这篇文章主要讲解了“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(){
let 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 是有相同的效果
this.one("playing", function () { // 监听播放
console.log("成功初始化视频");
});
this.one("error", function (error) { // 监听错误
console.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>感谢各位的阅读，以上就是“vue+video.js怎么实现视频播放列表”的内容了，经过本文的学习后，相信大家对vue+video.js怎么实现视频播放列表这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
