vue+video.js实现视频播放列表
本⽂实例为⼤家分享了vue+video.js实现视频播放列表的具体代码，供⼤家参考，具体内容如下
1.引⼊Video.js
npm install --save-dev video.js
然后在main.js中引⽤
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$videos = Video
引⽤完成后我们就可以做视频列表了
2.在页⾯中使⽤
method中定义初始⽅法
initVideo(){
vue element adminlet elementList=document.querySelectorAll(".video-js");
this.element=elementList.length;  //videojs 数量赋值
for (let index = 0; index < elementList.length; index++) {
let id=elementList[index].getAttribute('id');
this.$videos(id, {
autoplay: false, //⾃动播放
//  muted:false, // 是否静⾳,
controls: true,//控制条
//  techOrder: ['html5','flash'],//设置flash播放
language: "en",// 初始化语⾔
preload: "auto",// 预加载
width:'400',
height:'200',
// 倍速播放
playbackRates: [0.5, 1, 1.5, 2],
}, function () {
this.volume(0);
//这个地⽅很重要,⼀旦你的muted 不起作⽤ ，就⼀定要在设置当前的视频回调中设置声⾳为0
//this.play(); //这个地⽅也⼀样 ，此⽅法this.play()==autoplay  是有相同的效果
<("playing", function () {        // 监听播放
console.log("成功初始化视频");
});
<("error", function (error) {      // 监听错误
<("监听异常",error);
});
});
}
},
在mounted中挂载
mounted() {
this.initVideo();
},
然后再在beforeDestroy（）中卸载，不然页⾯会报错，⽽且再次进⼊页⾯的时候，视频⽆法重新初始化beforeDestroy() {
//控制看你页⾯上显⽰的多少个就循环多少次销毁
// 这⼉的element  就是上⾯我初始化后获取节点个数
for (let index = 0; index < this.element; index++) {
this.$videos(`myVideos${index}`).dispose()
}
},
最后给⼤家献上页⾯的布局
<div v-for="(item,i) in adminList" :key="i">
<div class="mr30 mt10">
<span class="link-color fontExtraLarge">{{i+1}}、{{item.title}}</span>
<video
ref='video'
:id="'myVideos'+i"
class="video-js vjs-default-skin vjs-big-play-centered mt10"
>
<source :src="item.src" type="video/mp4" />
</video>
</div>
</div>
好了，到这就⼤功告成了，有什么问题，欢迎⼤家提问。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。