Vue で video.js を使用して m3u8 形式のビデオを再生する方法

 "vue": "^2.6.11",
 "ビデオ.js": "^7.10.2",
 "videojs-contrib-hls": "^5.15.0",
 "mux.js": "^5.7.0"

糸ビデオ.jsを追加します
yarn add videojs-contrib-hls // これはhlsストリームを再生するために必要なプラグインです yarn add mux.js // vueプロジェクトでは、インストールされていない場合はエラーが発生する可能性があります

import "video.js/dist/video-js.css"; // video.js の CSS をインポートします
import hls from "videojs-contrib-hls"; // hls ストリームを再生するにはプラグインが必要です import Vue from "vue";
Vue.js の hls 関数

import "./plugins/video.js"; // 定義したばかりの video.js ファイルをインポートします

<テンプレート>
 <div class="test-videojs">
 <video id="videoPlayer" class="video-js" ミュート済み></video>
 </div>
</テンプレート>
<スクリプト>
import Videojs from "video.js"; // Videojsをインポート 
エクスポートデフォルト{
 データ（） {
 戻る {
 // https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 はビデオです。cctv1 (ライブ ブロードキャストで巻き戻しできません) をこれに置き換えると、早送りと巻き戻しの効果を確認できます。nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
 };
 },
 マウント() {
 this.initVideo(this.nowPlayVideoUrl);
 },
 メソッド: {
 initVideo(nowPlayVideoUrl) {
  // これらのオプション属性はビデオタグに直接設定することもできます。muted を参照してください。
  オプション = {
  autoplay: true, // 自動再生を設定する controls: true, // 再生コントロールを表示する source: [
   // src がオプションとして設定されている場合、チャンネル切り替えは実行できないことに注意してください (nowPlayVideoUrl が監視されている場合でも)
   {
   src: nowPlayVideoUrl、
   type: "application/x-mpegURL" // videojs にこれが HLS ストリームであることを伝えます}
  ]
  };
  // videojsの最初のパラメータはドキュメント内のビデオのIDを表します
  const myPlayer = Videojs("videoPlayer", オプション, 関数 onPlayerReady() {
  console.log("this in onPlayerReady refers to:", this); // this はここで、Videojs によって作成されたインスタンスである Player を参照します console.log(myPlyer === this); // これは true を返します
  });
 }
 }
};
</スクリプト>
<スタイル lang="scss">
#ビデオプレーヤー{
 幅: 500ピクセル;
 高さ: 300px;
 マージン: 50px 自動;
}
</スタイル>

<テンプレート>
 <div class="test-videojs">
 <ビデオ id="videoPlayer" クラス="video-js"></ビデオ>
 <el-button type="danger" @click="changeSource">CCTV3 に切り替える</el-button>
 </div>
</テンプレート>
<スクリプト>
import Videojs from "video.js"; // Videojsをインポート
エクスポートデフォルト{
 データ（） {
 戻る {
  nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
  オプション:
  autoplay: true, // 自動再生を設定します muted: true, // 自動再生を実現するには true に設定し、ビデオはミュートされます (Chrome 66 以降では、オーディオとビデオの自動再生が禁止されています)
  preload: "auto", // プリロードコントロール: true // 再生コントロールを表示する},
  プレイヤー:null
 };
 },
 マウント() {
 this.getVideo(this.nowPlayVideoUrl);
 },
 メソッド: {
 getVideo(nowPlayVideoUrl) {
  this.player = Videojs("videoPlayer"、 this.options);
  //キーコード、チャンネル切り替え操作を実装するためにsrcを動的に設定するthis.player.src([
  {
   src: nowPlayVideoUrl、
   type: "application/x-mpegURL" // videojs にこれが HLS ストリームであることを伝えます}
  ]);
 },
 ソースの変更（）{
  this.nowPlayVideoUrl = "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8";
  console.log(this.nowPlayVideoUrl, "変更されました");
 }
 },
 時計：
 nowPlayVideoUrl(新しい値、古い値) {
  this.getVideo(新しいVal);
 }
 },
 破棄する前に() {
 if (this.player) {
  this.player.dispose(); // プレーヤーを削除します。このメソッドは、videojs の内部状態をリセットし、dom を削除します。
 }
 }
};
</スクリプト>
<スタイル lang="scss">
#ビデオプレーヤー{
 幅: 500ピクセル;
 高さ: 300px;
 マージン: 50px 自動;
}
</スタイル>

 <video id="videoPlayer" class="video-js" ミュート済み></video>

// 動的にsrcを設定
this.player.src([
  {
   src: nowPlayVideoUrl、
   type: "application/x-mpegURL" // videojs にこれが HLS ストリームであることを伝えます}
 ]);

糸を追加 mux.js

import "videojs-flash"; // rtmp ストリームを再生するために必要なプラグイン type: 'rtmp/flv', // このタイプの値は、これが rtmp ストリーム ビデオであることを videojs に伝えるために必要です