dhfPlayer sdk VUE接入方式
<h3>1. npm 安装</h3>
<pre><code>npm i dhfplayer --save</code></pre>
<h3>2.全局引入（main.js 文件下）</h3>
<pre><code>import dhfPlayer from 'dhfplayer'
Vue.use(dhfPlayer)</code></pre>
<h3>3.使用demo</h3>
<pre><code><template>
<div class="pbox">
<dhf-player
ref="player"
:playsinline="false"
:options= "videoOptions"
@pause="onPlayerPause($event)"
@ended="ended($event)"
@play="play($event)"
@error="error($event)"
></dhf-player>
</div>
</template>
<script>
import '../../node_modules/video.js/dist/video-js.css'
export default {
data () {
return {
videoOptions: {
// 宽度
width: 800,
// 高度
height: 800,
// 视频播放后是否循环播放
loop: false,
// 是否静音
muted: true,
// 是否自动播放
autoplay: true,
playbackRates: [0.7, 1.0, 1.5, 2.0],
// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。设置为true，宽度和高度以父盒子为准
fluid: false,
controlBar:{
remainingTimeDisplay:true,
pictureInPictureToggle:false
},
// 视频m3u8地址
source: 'https://test360drm.oss-cn-shanghai.aliyuncs.com/record/live1/1_2_3/1_2_3.m3u8',
// 传入的网校ID
// agencyId: '1',
// // //视频id
// videoId: '79313',
// // //后台分配的app_id
// app_id: 'LB6nIZoJj8DjFYwGtkkOoQ',
}
}
},
methods: {
onPlayerPause (player) {
console.log(player)
},
ended (player) {
//播放结束后播放其他视频
player.src({ type: 'application/x-mpegURL', src: 'https://test360drm.oss-cn-shanghai.aliyuncs.com/record/live977/977_334_870/977_334_870.m3u8' })
player.play()
},
play () {
console.log('play')
},
error () {
console.log('error')
}
}
}
</script>
<style>
.pbox{
width: 400px;
height: 400px;
}
</style></code></pre>
<h3>4.参数说明</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>playbackRates</td>
<td>播放速率</td>
<td></td>
</tr>
<tr>
<td>12</td>
<td>remainingTimeDisplay</td>
<td>剩余时间</td>
<td>false</td>
</tr>
<tr>
<td>13</td>
<td>pictureInPictureToggle</td>
<td>画中画</td>
<td>true</td>
</tr>
</tbody>
</table>
<h3>5.方法说明</h3>
<table>
<thead>
<tr>
<th>序号</th>
<th>方法名</th>
<th>意义</th>
<th>初始值</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>pause</td>
<td>视频暂停</td>
</tr>
<tr>
<td>2</td>
<td>ended</td>
<td>视频结束</td>
</tr>
<tr>
<td>3</td>
<td>play</td>
<td>点击播放按钮触发</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>error</td>
<td>视频播放发生错误</td>
</tr>
</tbody>
</table>