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

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

既存のビデオ プレーヤーがニーズを満たせない場合は、ビデオを自分でカプセル化する必要があります。

ビデオイベント

  • loadstart: ビデオの読み込みが開始されるとトリガーされ、currentTime に値 (履歴再生記録または 0) が割り当てられます。
  • 期間変更: メタ情報が読み込まれたか変更され、ビデオの長さが変更されました。ビデオの長さ (継続時間) を取得し、currentTime に値 (履歴再生記録または 0) を割り当てます。
  • playing: ビデオの再生が開始されたときに発生します (初めて再生する場合、一時停止後に再開する場合、または終了後に再開する場合)。
  • pause: 再生が一時停止されたときにトリガーされます。
  • timeupdate: currentTime が変更されると、再生の進行状況が更新されます。再生プログレスバーの処理
  • seeked: 再生位置を指定します
  • 待機中: バッファ
  • 終了: 再生が終了し、ステータスがリセットされました
  • WeixinJSBridgeReady: WeChat でビデオを使用するには、weixinJSBridgeReady イベントをリッスンし、コールバック関数で play() コマンドを実行する必要があります。

ライブブロードキャストプロトコル

HLS (HTTP Live Streaming) は、Apple が提案したライブ ストリーミング プロトコルです。 iOS と Android の上位バージョンはどちらも HLS をサポートしています。 HLS は主に .m3u8 と .ts の 2 つの再生ファイルで構成されます。 HLS は互換性と拡張性が高いですが、ライブ放送の遅延が発生します。 HLS プロトコルは、ライブ ストリームをダウンロードおよび再生用に小さなセグメントに分割します。リストに 5 つの ts ファイルが含まれており、各 ts ファイルに 5 秒のビデオ コンテンツが含まれていると仮定すると、全体の遅延は 25 秒になります。

RTMP (Real Time Messaging Protocol) は、現在 Adob​​e が所有する Macromedia によって開発されたライブ ビデオ プロトコルのセットです。 RTMP はフラッシュベースであり、iOS ブラウザでは再生できませんが、リアルタイムのパフォーマンスは HLS よりも優れています。

HTTP-FLV は、低遅延の FLV ビデオ形式のライブ配信ストリームです。ただし、モバイルデバイスではサポートされていません。

結論: HTTP-FLV はレイテンシが低いため、推奨されます。デバイスが HTTP-FLV をサポートしていない場合は、flv.js を使用します。デバイスが flv.js をサポートしていない場合は HLS が使用されますが、HLS では遅延が大きくなります。

ビデオをカプセル化する

/** 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;
  }
 }
}

[参考記事]:

  • X5コアビデオ2つの再生モード
  • H5 ライブビデオラベルの落とし穴のまとめ
  • H5 ライブ放送入門(理論)
  • 総合的な高度なH5ライブ放送

vueベースのビデオプレーヤーの実装例に関するこの記事はこれで終わりです。より関連性の高いvueビデオプレーヤーのコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の Vue-Video-Player 操作
  • vue-video-player ビデオプレーヤーの詳細設定
  • vue-video-player をベースにしたプレーヤーのカスタマイズ方法

<<:  Centos7 で keepalived ログを別のパスに設定する方法の詳細な説明

>>:  mysqldump でデータベースをバックアップするときに特定のライブラリを除外する例

推薦する

よく使われるCSSカプセル化方法の概要

1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...

MySQL で浮動小数点データを文字データに変換するときに起こりうる問題の詳細な説明

序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...

Linux で xargs コマンドを使用する詳細なチュートリアル

みなさんこんにちは。私は梁旭です。 Linux を使用しているときに、いくつかのコマンドを連結する必...

jQueryはすべての選択と逆選択操作ケースを実装します

この記事では、全選択と逆選択操作を実装するためのjQueryの具体的なコードを参考までに共有します。...

8 JSのreduce使用例とreduce操作方法

reduceメソッドは配列の反復メソッドです。 mapやfilterとは異なり、 reduceメソッ...

スタートアップ企業が丹念に作り上げた優れたウェブデザイン17選

スタートアップ企業は、型破りな仕事のやり方、ユニークなビジネスモデル、特徴的な製品やサービス、パーソ...

CSS3 のディスプレイのグリッドレイアウトとフレックスレイアウトの詳細な説明

Gird レイアウトは Flex レイアウトといくつかの類似点があり、どちらもコンテナーの内部項目を...

MySqlのインストールとアンインストールに関する詳細なチュートリアル

この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...

JavaScript 非同期プログラミングにおける Promise の初期の使用法の詳細な説明

1. 概要Promise オブジェクトは、ES6 で提案された非同期プログラミングの仕様です。非同期...

SSMは、mysqlデータベースアカウントのパスワード暗号文ログイン機能を実装します。

導入当社は、情報セキュリティと機密アプリケーションに関わるいくつかのプロジェクトの研究開発に従事して...

Docker データボリュームコンテナの作成と使用状況分析

データ ボリューム コンテナーは、データ ボリュームをマウントするために特別に使用されるコンテナーで...

CentOS 環境で NFS リモート ディレクトリ マウントを使用する手順の紹介

目次1. NFS の概要2. NFS構築1. NFSサーバーの構築2. NFSクライアントの構築3....

TypeScript 2.0 マーク付き共用体型の詳細な説明

目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...

HTML で水平ナビゲーション構造を設定する方法

この記事では、主にリスト構造を使用して水平ナビゲーション構造を設定する 2 つの方法を紹介します。こ...