vue+video.js實現視訊播放列表
阿新 • • 發佈:2021-10-29
本文例項為大家分享了+video.實現視訊播放列表的具體程式碼,供大家參考,具體內容如下
1.引入Video.js
npm install --save-dev video.js
然後在main.js中引用
import Video from 'video.js'
import 'video.js/dist/video-js.'
Vue.prwww.cppcns.comototype.$videos = Video
引用完成後我們就可以做視訊列表了
2.在頁面中 使用
method中定義初始方法
initVideo(){ let elementList=document.querySelectorAll(".video-js"); this.element=elementList.length; //videojs 數量賦值 for (let index http://www.cppcns.com= 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的設定請點選這裡
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。