vue+video.js怎么實現(xiàn)視頻播放列表

這篇文章主要講解了“vue+video.js怎么實現(xiàn)視頻播放列表”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue+video.js怎么實現(xiàn)視頻播放列表”吧！

具體內(nèi)容如下

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 數(shù)量賦值
        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'],//設(shè)置flash播放
              language: "en",// 初始化語言
               preload: "auto",// 預(yù)加載
               width:'400',
               height:'200',
               // 倍速播放
               playbackRates: [0.5, 1, 1.5, 2],
              }, function () {
                this.volume(0);
                //這個地方很重要,一旦你的muted 不起作用 ,就一定要在設(shè)置當(dāng)前的視頻回調(diào)中設(shè)置聲音為0
                //this.play(); //這個地方也一樣 ,此方法this.play()==autoplay  是有相同的效果
                this.one("playing", function () {         // 監(jiān)聽播放
                   console.log("成功初始化視頻");
                });
                
                this.one("error", function (error) {      // 監(jiān)聽錯誤
                    console.error("監(jiān)聽異常",error);
                });
            }); 
        }
    },

在mounted中掛載

mounted() {
    this.initVideo();
  },

然后再在beforeDestroy（）中卸載，不然頁面會報錯，而且再次進(jìn)入頁面的時候，視頻無法重新初始化

beforeDestroy() {
    //控制 看你頁面上顯示的多少個  就循環(huán)多少次銷毀
    // 這兒的element  就是上面 我初始化后獲取節(jié)點(diǎn)個數(shù)
      for (let index = 0; index < this.element; index++) {                  
              this.$videos(`myVideos${index}`).dispose()
      }  
  },

最后給大家獻(xiàn)上頁面的布局

<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怎么實現(xiàn)視頻播放列表”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue+video.js怎么實現(xiàn)視頻播放列表這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！