既存のビデオ プレーヤーがニーズを満たせない場合は、ビデオを自分でカプセル化する必要があります。 ビデオイベント
ライブブロードキャストプロトコルHLS (HTTP Live Streaming) は、Apple が提案したライブ ストリーミング プロトコルです。 iOS と Android の上位バージョンはどちらも HLS をサポートしています。 HLS は主に .m3u8 と .ts の 2 つの再生ファイルで構成されます。 HLS は互換性と拡張性が高いですが、ライブ放送の遅延が発生します。 HLS プロトコルは、ライブ ストリームをダウンロードおよび再生用に小さなセグメントに分割します。リストに 5 つの ts ファイルが含まれており、各 ts ファイルに 5 秒のビデオ コンテンツが含まれていると仮定すると、全体の遅延は 25 秒になります。 RTMP (Real Time Messaging Protocol) は、現在 Adobe が所有する 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; } } } [参考記事]:
vueベースのビデオプレーヤーの実装例に関するこの記事はこれで終わりです。より関連性の高いvueビデオプレーヤーのコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Centos7 で keepalived ログを別のパスに設定する方法の詳細な説明
>>: mysqldump でデータベースをバックアップするときに特定のライブラリを除外する例
1. pc-reset PCスタイルの初期化 /* 正規化.css */ html{ 行の高さ: 1...
エラーメッセージ:ユーザー: 'root' ホスト: `localhost'...
序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...
みなさんこんにちは。私は梁旭です。 Linux を使用しているときに、いくつかのコマンドを連結する必...
この記事では、全選択と逆選択操作を実装するためのjQueryの具体的なコードを参考までに共有します。...
reduceメソッドは配列の反復メソッドです。 mapやfilterとは異なり、 reduceメソッ...
スタートアップ企業は、型破りな仕事のやり方、ユニークなビジネスモデル、特徴的な製品やサービス、パーソ...
Gird レイアウトは Flex レイアウトといくつかの類似点があり、どちらもコンテナーの内部項目を...
この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...
1. 概要Promise オブジェクトは、ES6 で提案された非同期プログラミングの仕様です。非同期...
導入当社は、情報セキュリティと機密アプリケーションに関わるいくつかのプロジェクトの研究開発に従事して...
データ ボリューム コンテナーは、データ ボリュームをマウントするために特別に使用されるコンテナーで...
目次1. NFS の概要2. NFS構築1. NFSサーバーの構築2. NFSクライアントの構築3....
目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...
この記事では、主にリスト構造を使用して水平ナビゲーション構造を設定する 2 つの方法を紹介します。こ...