vue+video.js实现视频播放列表
{{i+1}}、{{item.title}}<!-- <div v-else class="flex flex_between mt10" style="flex-wrap:wrap; width:900px;" ><d...
·
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>
好了 ,到这就大功告成了,有什么问题,欢迎大家提问。
更多相关Video.js的设置请点击这里
更多推荐
已为社区贡献2条内容
所有评论(0)