Vue+video.jsはビデオプレイリストを実装します

npm インストール --save-dev video.js

'video.js' からビデオをインポートします
'video.js/dist/video-js.css' をインポートします。
Vue.prototype.$videos = ビデオ

initVideo(){          
        elementList を document.querySelectorAll(".video-js"); とします。
        this.element=elementList.length; //videojs 数量の割り当て for (let index = 0; index < elementList.length; index++) { 
           id = elementList[index].getAttribute('id'); とします。   
            this.$videos(id, {
              autoplay: false, //自動再生// muted:false, //ミュートするかどうか,
              controls: true,//コントロール バー// techOrder: ['html5','flash'],//フラッシュ再生を設定 language: "en",//初期化言語 preload: "auto",//プリロード幅:'400',
               高さ:'200',
               // 再生速度 playbackRates: [0.5, 1, 1.5, 2],
              }、 関数 （） {
                this.ボリューム(0);
                //これは非常に重要です。ミュートが機能しなくなったら、現在のビデオ コールバックでサウンドを 0 に設定する必要があります。
                //this.play(); //これも同じです。このメソッド this.play()==autoplay は同じ効果があります this.one("playing", function () { // 再生をリッスンします console.log("ビデオを正常に初期化しました");
                });
                
                this.one("error", function (error) { // エラーをリッスンします console.error("例外をリッスンしています",error);
                });
            }); 
        }
    },

マウント() {
    ビデオを初期化します。
  },

破棄する前に() {
    //ページに表示されるノードの数に応じてループと破棄の回数を制御します//ここでの要素は、上記の初期化後に取得したノードの数です for (let index = 0; index < this.element; index++) {                  
              this.$videos(`myVideos${index}`).dispose()
      }  
  },

<div v-for="(item,i) 管理者リスト内" :key="i">
        <div class="mr30 mt10">
          <span class="link-color fontExtraLarge">{{i+1}}、{{item.title}}</span>
          <ビデオ
           ref='ビデオ'
            :id="'myVideos'+i"
            クラス="video-js vjs-default-skin vjs-big-play-centered mt10"
          >
            <ソース:src="item.src" type="video/mp4" />
          </ビデオ>
        </div>
</div>