dhfPlayer sdk js接入方式
<h3>1.引入js和css文件</h3>
<pre><code><link href="./css/dhfPlayer.css" rel="stylesheet">
<script src="./scripts/dhfPlayer.min.js"></script></code></pre>
<h3>2.使用demo</h3>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大黄蜂视频插件</title>
<link href="./css/dhfPlayer.css" rel="stylesheet">
</head>
<body>
<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls></video>
<button onclick="changeSrc();">切换视频播放</button>
<script src="./scripts/dhfPlayer.min.js"></script>
<script>
var player = new DhfPlayer('example-video',{
//视频M3U8地址
source:'https://test360drm.oss-cn-shanghai.aliyuncs.com/record/live977/977_334_870/977_334_870.m3u8',
//传入的网校ID
// agencyId:'1616',
// //视频id
// videoId:'36752',
// //后台分配的app_id
// app_id:"OMOFBbvtELsjRxQp8vJVw",
//容器宽度
width:800,
//容器高度
height:400,
//视频播放后是否循环播放
loop:false,
//是否静音
muted:false,
//是否自动播放
autoplay:false,
//播放速率
playbackRates: [0.7, 1.0, 1.5, 2.0],
//视频播放事件
onplay: function () {
console.log('onplaybegin event');
},
//视频报错事件
onerror: function () {
console.log('onplayerror event');
},
//视频结束事件
onended: function () {
console.log('onplayend event');
},
//视频暂停事件
onpause: function () {
console.log('onplaypause event');
},
});
//切换视频播放
function changeSrc(){
player.player.src({
src: 'https://test360drm.oss-cn-shanghai.aliyuncs.com/record/live977/977_334_870/977_334_870.m3u8',
type: 'application/x-mpegURL',
})
}
</script>
</body>
</html></code></pre>
<h3>3.参数说明</h3>
<p><strong>//播放视频两种途径：1.填写source参数，视频的m3u8地址（推荐） 2.填写agencyId,videoId,app_id</strong></p>
<table>
<thead>
<tr>
<th>序号</th>
<th>参数名</th>
<th>意义</th>
<th>初始值</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>width</td>
<td>播放器的宽度</td>
</tr>
<tr>
<td>2</td>
<td>height</td>
<td>播放器的高度</td>
</tr>
<tr>
<td>3</td>
<td>loop</td>
<td>视频是否循环播放</td>
<td>false</td>
</tr>
<tr>
<td>4</td>
<td>muted</td>
<td>视频是否静音</td>
<td>false</td>
</tr>
<tr>
<td>5</td>
<td>autoplay</td>
<td>视频是否自动播放</td>
<td>false</td>
</tr>
<tr>
<td>6</td>
<td>fluid</td>
<td>是否按比例縮放高度</td>
<td>true</td>
</tr>
<tr>
<td>7</td>
<td>source</td>
<td>播放视频m3u8地址</td>
</tr>
<tr>
<td>8</td>
<td>agencyId</td>
<td>后台接口获取网校id</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td>videoId</td>
<td>后台接口获取对应播放视频id</td>
</tr>
<tr>
<td>10</td>
<td>app_id</td>
<td>后台接口分配的app_id</td>
<td></td>
</tr>
<tr>
<td>11</td>
<td>onplay</td>
<td>事件 点击播放按钮触发</td>
<td></td>
</tr>
<tr>
<td>12</td>
<td>onerror</td>
<td>事件 播放视频出现错误</td>
</tr>
<tr>
<td>13</td>
<td>onended</td>
<td>事件 视频播放完触发</td>
<td></td>
</tr>
<tr>
<td>14</td>
<td>onpause</td>
<td>事件 暂停视频</td>
<td></td>
</tr>
<tr>
<td>15</td>
<td>playbackRates</td>
<td>视频播放速率</td>
<td></td>
</tr>
</tbody>
</table>