vue videojs,vue-video-player 多个视频

　　本文主要详细介绍vue video.js实现的视频播放列表。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue video.js实现视频播放列表的具体代码，供大家参考。具体内容如下

　　1.引入Video.js

　　npm安装-保存-开发视频. js

　　然后在main.js中引用

　　从“video.js”导入视频

　　导入 video.js/dist/video-js.css

　　Vue.prototype.$videos=Video

　　引用完后，我们可以做一个视频列表。

　　2.在页面中 使用

　　方法定义初始方法。

　　initVideo(){

　　let element list=document . query selector all(。video-js’)；

　　this . element=element list . length；//videojs数量分配

　　for(设索引=0；index elementList.length索引){

　　设id=elementList[index]。get attribute(“id”)；

　　这个。$videos(id，{

　　Autoplay: false，//自动播放

　　//muted:false，//是否静音，

　　控件：true，//控件栏

　　//TechHolder: [HTML5 ， flash]，//设置flash播放

　　语言： en ，//初始化语言

　　preload:“auto”，//preload

　　宽度： 400 ，

　　身高：“200”，

　　//双倍速度回放

　　回放速率：[0.5，1，1.5，2]，

　　}，function () {

　　本.卷(0)；

　　//这个地方很重要。一旦您的静音不起作用，请务必在设置当前视频回拨时将声音设置为0。

　　//this . play()；//这个地方也一样。这个方法this.play()==autoplay有同样的效果。

　　This.one (playing ，function(){//监控播放

　　Console.log(成功初始化视频)；

　　});

　　This.one (error ，function(error){//监听错误

　　Console.error(监控异常，错误)；

　　});

　　});

　　}

　　},

　　安装在安装的

　　已安装(){

　　this . init video()；

　　},

　　然后在beforeDestroy()中卸载，否则页面会报错，再次进入页面时视频无法重新初始化。

　　销毁前(){

　　//根据页面上显示的次数控制回收和销毁的次数。

　　//这里的元素是我初始化后得到的节点数。

　　for(设索引=0；索引this.element索引){

　　这个。$videos(`myVideos${index} `)。处置()

　　}

　　},

　　最后，我会给你的网页布局。

　　 div v-for=(item，i) in adminList :key=i

　　div class=mr30 mt10

　　span class= link-color font extra large { I 1 } } 、{{item.title}}/span

　　录像

　　ref=video

　　:id= 我的视频 I

　　class= video-js vjs-default-skin vjs-big-play-centered mt10

　　来源：src= item . src type= video/MP4 /

　　/视频

　　/div

　　/div

　　好了，就这样。如果你有任何问题，请提问。

　　有关Video.js的更多设置，请点击这里

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。