vue-video-player を使用してライブ放送を実現する方法

CDN メソッドでは、HTML ファイル ヘッダーにファイルを直接導入します。
  <link rel="スタイルシート" href="path/to/video.js/dist/video-js.css"/>
  <script type="text/javascript" src="video.min.js へのパス"></script>
  <script type="text/javascript" src="vue.min.js へのパス"></script>
  <script type="text/javascript" src="vue-video-player.js へのパス">
  </スクリプト>
    <script type="text/javascript"> Vue.use(window.VueVideoPlayer)
  </スクリプト>

NMP インストール プラグイン:
  npm インストール vue-video-player --save
    npm をインストール videojs-contrib-hls --save

main.js に基本的なスタイル ファイルを導入します。
// videoPlayer スタイルをインポートします import 'video.js/dist/video-js.css'
    

オンデマンドインポート:
'videojs-contrib-hls' をインポートします
'vue-video-player' から { videoPlayer } をインポートします。

コンポーネント:
    ビデオプレーヤー
},    
 
グローバルインポート:
'vue' から Vue をインポートします
'vue-video-player' から VueVideoPlayer をインポートします。 
// カスタムスタイルをインポートし、<video-player> に対応するクラス名を追加します (例: video-player-custom)
// 'vue-video-player/src/custom-theme.css' をインポートします
Vue.use(VueVideoPlayer, /* { 
 オプション: グローバルデフォルト設定、
   イベント: グローバル videojs イベント}*/)

<テンプレート>
  <!-- playsinline: モバイルデバイスでプレーヤーを全画面表示しないように設定します [ ブール値、デフォルト: false ] -->
  <!-- customEventName: カスタム状態変更イベント名 [文字列、デフォルト: 'statechanged'] -->
    <ビデオプレーヤー
    クラス="ビデオプレーヤーカスタム"
        ref="ビデオプレーヤー"
        :options="プレイヤーオプション"
        :playsinline="true"
        customEventName="カスタム状態変更イベント名"
        @play="onPlayerPlay"
        @pause="プレイヤー一時停止中"
        @ended="プレイヤー終了時"
        @ready="プレイヤーの準備完了"
        @statechanged="プレイヤーの状態が変更されました"
        @playing="onPlayerPlaying"
        @waiting="プレイヤー待機中"
        @loadeddata="プレーヤーに読み込まれたデータ"
        @timeupdate="時間更新"
        @canplay="onPlayerCanplay"
        @canplaythrough="onPlayerCanplaythrough">
    </ビデオプレーヤー>
</テンプレート>
<スクリプト>
'videojs-contrib-hls' をインポートします
'vue-video-player' から { videoPlayer } をインポートします。
エクスポートデフォルト{
   コンポーネント:
        ビデオプレーヤー
    },
  データ（） { 
    戻る {
       プレイヤーオプション: { 
         // ミュートされているか: true、
                  // デフォルトは英語ですが、中国語に設定すると「zh-CN」になります。
                  // 再生速度。指定すると、Video.js はコントロール (vjs-playback-rate クラスのコントロール) を表示し、ユーザーが再生速度を選択できるようにします。playbackRates: [0.5, 1.0, 1.5, 2.0],
                  // プレーヤーをスムーズモードにし、プレーヤーの動的サイズを計算するときにこの値を使用して、アスペクト比を示します。aspectRatio: '4:3'、
             // 互換性の順序、デフォルト値は ['html5'] です。他の登録済みテクノロジは、登録された順序でこのテクノロジの後に追加されます。
                  技術オーダー: ['html5'],
                  // ネイティブの <video> タグ内の <source> サブタグのセットと同等で、グレースフル デグラデーションを実現できます。type 属性はメディア リソース ソースの MIME タイプを指定します: [
                        //{
                    	  //タイプ: "video/mp4",
                    	  //ソース: ""
                  	//,
                        //{
                    	  //タイプ: "rtmp/flv",
                    	  //ソース: ""
                  	//,
                   	{
                     	  タイプ: "application/x-mpegURL",
                     	  ソース: "https://live.cgtn.com/1000/prog_index.m3u8"
                   	},
                   ]、
                  // ビデオカバーポスター: require('./icon/cover.jpg'),　
      }
    }
  },
  計算: { 
    	//プラグインノードはカスタムボタンイベントを追加するために使用されます player() { 
      これを返します。$refs.videoPlayer.player 
    }
  },
    マウント() {},
    メソッド: {
        // 再生コールバック onPlayerPlay(player) {
        },
        // 一時停止コールバック onPlayerPause(player) {
          //console.log(プレイヤー)
        },
        //ビデオ再生終了コールバック onPlayerEnded(player) {
          //console.log(プレイヤー)
        },
        // DOM要素のreadyStateが変更されると再生が停止します onPlayerWaiting(player) {
          //console.log(プレイヤー)
        },
        // 再生が開始されました callback onPlayerPlaying(player) {
          //console.log(プレイヤー)
        },
        // プレーヤーが現在の再生位置でデータをダウンロードすると、onPlayerLoadeddata($event) がトリガーされます {
          //コンソール.log($イベント)
        },
        // 現在の再生位置が変更されたときにトリガーされます。
        プレイヤータイム更新($event) {
          //コンソール.log($イベント)
        },
        //メディアのreadyStateがHAVE_FUTURE_DATA以上である onPlayerCanplay($event) {
          //コンソール.log($イベント)
        },
        // メディアの readyState は HAVE_ENOUGH_DATA 以上です。つまり、メディア ファイル全体をバッファリングなしで再生できます。
        プレイヤーがプレイスルーできるかどうか($event) {
          //コンソール.log($イベント)
        },
        //再生ステータス変更コールバック playerStateChanged($event) {
          //コンソール.log($イベント)
        },
        // リスナーをコンポーネントの準備完了状態にバインドします。イベント リスナーとの違いは、準備完了イベントがすでに発生している場合は、関数がすぐにトリガーされることです。 。
        プレイヤーが準備完了($event) {
          //コンソール.log($イベント)
        },
    }
}
</スクリプト>
<style lang="scss" スコープ>
.ビデオプレーヤーカスタム{
    幅: 100%;
    高さ: 180ピクセル;
    // vidoeUI は /deep/ .video-js{ を書き換えます
        幅: 100%;
        高さ: 100%;
        パディング: 0;
        オーバーフロー: 非表示;
        // player.vjs-tech{
          オブジェクトフィット: カバー;
        }
        // 再生ボタン.vjs-big-play-button {
            位置: 絶対;
            上位: 50%;
            左: 50%;
            幅: 2em;
            高さ: 2em;
            上マージン: -1em;
            左マージン: -1em;
            フォントサイズ: 2em;
            行の高さ: 2em;
            境界線の半径: 50%;
            背景色: rgba(0,0,0,0.45);
            アウトライン: なし;
        }
        // Cover.vjs-poster{
            幅: 100%;
            高さ: 100%;
            背景サイズ: カバー;
        }
    }
}  
</スタイル>