Vueはビデオ再生を実装するためにビデオタグを使用します

<テンプレート>
  <!-- ビデオ コンポーネント -->
  <div id="common-video" class="h-100">
    <div:class="{isShow:control}" class="h-100">
      <ビデオ
        ref="私のビデオ"
        :poster="ポスター"
        :src="src"
        :controls="コントロール"
        oncontextmenu="false を返す"
        @timeupdate="時間更新"
        コントロールリスト="nodownload"
        クラス="ビデオボックス"
      </ビデオ>
      <画像
        src="@/assets/images/playbtn.png"
        代替案=""
        @click="ビデオを操作する"
        class="ポインタ操作ボタン"
        :class="{ 'フェードアウト': videoState }"
      />
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "CommonVideo",
  データ（） {
    戻る {
      videoState: false, // ビデオ再生ステータス // 学習時間 studyTime: {
        currentTime: 0, // 現在の学習時間 期間: 0 // 合計時間},
      timer: {}, // タイマー pauseTimer: {} // タイマーを一時停止 };
  },
  /**
   * @param ポスター表示画像* @param src ビデオリソース* @param controls コントロールを表示するかどうか* @param control コントロール* @param videoData 基本ビデオデータ*/
  小道具: {
    ポスター：
      タイプ: 文字列、
      必須: false、
      デフォルト： ""
    },
    ソース: {
      タイプ: 文字列、
      必須: true
    },
    コントロール: {
      タイプ: ブール値、
      必須: false、
      デフォルト: true
    },
    コントロール： {
      タイプ: ブール値、
      必須: false、
      デフォルト: false
    },
    ビデオデータ: {
      タイプ: オブジェクト、
      必須: true
    }
  },
  マウント() {
    // ビデオの再生をリッスンします this.$refs.myVideo.addEventListener("play", () => {
      console.log("ビデオが再生中です");
      タイマーをオープンします。
    });
    // ビデオの一時停止をリッスンします。this.$refs.myVideo.addEventListener("pause", () => {
      console.log("ビデオが停止しました");
      this.closeTimer();
    });
  },
  メソッド: {
    // タイマーを開く openTimer() {
      this.timer = setInterval(() => {
        this.$emit("videoStudyTime", this.studyTime);
      }, 5000);
    },
    // タイマーを閉じる closeTimer() {
      タイマー間隔をクリアします。
      this.$emit("videoStudyTime", this.studyTime);
    },
    // 一時停止タイマーを開く openPauseTimer() {
      this.pauseTimer = setInterval(() => {
        this.hintOperate();
      }, 600000);
    },
    // 一時停止タイマーを閉じる closePauseTimer() {
      間隔をクリアします(this.pauseTimer);
    },
    // ヒント操作 hintOperate() {
      this.operateVideo();
      this.$alert("確認して学習を続けるにはクリックしてください", "プロンプト", {
        confirmButtonText: "確認",
        確認ボタンクラス: "ヒントボタン"、
        表示閉じる: false,
        コールバック: アクション => {
          this.$refs.myVideo.currentTime = this.videoData.currentTime;
          ビデオを操作する
          this.openPauseTimer();
        }
      });
    },
    // 現在の再生位置を取得する timeupdate(e) {
      this.studyTime.currentTime = e.target.currentTime;
      this.studyTime.duration = e.target.duration ? e.target.duration : 0;
    },
    // ビデオの再生と一時停止を操作するoperateVideo() {
      （！this.src）の場合{
        this.$message({ message: "ビデオリソースがありません。他のビデオを確認してください!" });
        false を返します。
      }
      （this.$refs.myVideo.paused）の場合{
        this.$refs.myVideo.play();
        this.videoState は true です。
      } それ以外 {
        this.$refs.myVideo.pause();
        this.videoState = false;
      }
    }
  },
  時計：
    //監視操作 videoData(val, oldVal) {
      const { currentTime, 継続時間 } = val;
      現在の時刻 && 継続時間 && 現在の時刻 < 継続時間) {
        this.hintOperate();
      }
    }
  }
};
</スクリプト>

<スタイル lang="less">
#共通ビデオ{
  位置: 相対的;
  .ビデオボックス{
    ボックスのサイズ: 境界線ボックス;
    境界線: 0;
    表示: ブロック;
    幅: 100%;
    高さ: 100%;
    アウトライン: なし !important;
  }
  .isShow{
    // 進行状況バー video::-webkit-media-controls-timeline {
      表示: なし;
    }
  }
  ビデオ::-webkit-media-controls-再生ボタン {
    可視性: 非表示;
  }
  .操作ボタン{
    表示: ブロック;
    幅: 60ピクセル;
    高さ: 60px;
    位置: 絶対;
    上: calc(50% - 30px);
    左: calc(50% - 30px);
  }
  .operate-btn:hover {
    不透明度: 0.8;
  }
  .フェードアウト{
    不透明度: 0;
  }
}
</スタイル>