Vueベースのビデオプレーヤーの実装例

/** HTML **/
<div class="ビデオ">
 <!-- ビデオ プレーヤー -->
 <ビデオ
  クラス="ビデオ__プレーヤー"
  ref="ビデオプレーヤー"
  プリロード="自動"
  :autoplay="オプション.autoplay"
  :muted="オプション.muted"
  webkit-playsinline="true"
  playsinline="true"
  x-webkit-airplay="許可"
  x5-ビデオプレーヤータイプ="h5-ページ"
  x5-ビデオの向き="縦向き"
  スタイル="object-fit:cover;"
 >
  <ソース:src="options.src" />
 </ビデオ>

 <!-- ビデオポスター -->
 <div
  v-show="ポスターを表示"
  クラス="ビデオ__ポスター"
  :style="{'背景画像': 'url(' + options.pic + ')'}"
 </div>

 <!-- ビデオ読み込み中 -->
 <div v-show="読み込み中" クラス="ビデオ__読み込み中">
  <span class="video__Loading-icon"></span>
 </div>

 <!-- ビデオを一時停止 -->
 <div @click="handleVideoPlay" クラス="video__pause">
  <span v-show="!videoPlay" class="video__pause-icon"></span>
 </div>
</div>

/**js**/
小道具: {
 オプション:
  タイプ: オブジェクト、
  デフォルト: () => {}
 }
},
データ（） {
 戻る {
  videoPlay: false, // ビデオは現在再生中か? videoEnd: false, // ビデオは終了しているか? showPoster: true, // ビデオカバーが表示されているか? showLoading: false, // 読み込み中 currentTime: 0, // 現在の再生位置 currentVideo: {
   期間: this.options.duration
  },

 }
},
マウント() {
 this.videoPlayer = this.$refs.videoPlayer;
 this.videoPlayer.currentTime = 0;
 
 this.videoPlayer.addEventListener("loadstart", e => {
   this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
 });
 
  // ビデオの長さを取得します this.videoPlayer.addEventListener("durationchange", e => {
  this.currentVideo.duration = this.videoPlayer.duration;
  // 再生履歴が存在する this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
 });
 
 this.videoPlayer.addEventListener("再生中", e => {
  this.showPoster = false;
  this.videoPlay = true;
  this.showLoading = false;
  this.videoEnd = false;
 });
 
 // 一時停止 this.videoPlayer.addEventListener("pause", () => {
  this.videoPlay = false;
  this.videoPlayer.currentTime が 0.1 未満の場合
   this.showPoster = true;
  }
  this.showLoading = false;
 });
 
 // 再生進行状況の更新 this.videoPlayer.addEventListener("timeupdate", e => {
   this.currentTime = this.videoPlayer.currentTime;
  },
  間違い
 );

 // 再生位置を指定する this.videoPlayer.addEventListener("seeked", e => {
 });

 // バッファリング this.videoPlayer.addEventListener("waiting", e => {
  this.showLoading = true;
 });
 
 // 再生終了 this.videoPlayer.addEventListener("ended", e => {
  // 状態をリセット this.videoPlay = false;
  this.showPoster = true;
  this.videoEnd = true;
  this.currentTime = this.currentVideo.duration;
 });
 
 // WeChat が自動的に再生できない問題を処理するために、weixinJSBridgeReady イベントをリッスンします。ただし、すべてに適用できるわけではありません。手動で再生する場合は一時停止ボタンが追加されます。
 document.addEventListener('WeixinJSBridgeReady', () => { 
  ビデオを再生します。
 }、 間違い）;
},
メソッド: {
 ハンドルビデオ再生() {
  if (this.videoPlayer.paused) { // 再生 if (this.videoEnd) { // 再再生 this.currentTime = 0;
    this.videoPlayer.currentTime = 0;
   }
   ビデオを再生します。
   this.videoPlay = true;
  } else { // 一時停止 this.videoPlayer.pause();
   this.videoPlay = false;
  }
 }
}