Video.js を使用して H5 ライブ ブロードキャスト インターフェイスを実装する

今回は、Video.jsを使用してH5ライブブロードキャストインターフェイスを実装する場合の注意事項と、Video.jsを使用してH5ライブブロードキャストインターフェイスを実装する場合の

注意事項

を紹介します。以下は実際的なケースです。 。

最近、ライブブロードキャスト機能のみのモバイルH5簡易版を作成しました。要件はWeChatにありますが、ライブブロードキャストの録画も必要です。ライブ ブロードキャストについて学ぶには、

1. 構成

図に示すように、背景はビデオ タグを使用してライブ ブロードキャストを再生します。ギフトや

アニメーション

はcss3で実装されています。

2. プロセス

モバイル端末はネイティブ システムを使用し、PC はデータ処理中に

video

を収集し、ストリーミング メディア サーバーである rtmp を介してストリーミング メディア サーバーにプッシュします。 rtmp、hls、再ストリーミング、オーディオおよびビデオのデコード、再生などのさまざまな形式での再生を生成します。

3. プッシュ ストリーミング

RTMP

: これは、Macromedia によって開発されたリアルタイム メッセージ送信プロトコルであり、現在は Adob​​e に属しています。 RTMP プロトコルをサポートするストリーミング メディア/インタラクティブ サーバー。オーディオ、ビデオ、データ間の同心性。

利点: プロトコルはシンプルで、さまざまなプラットフォームでの実装が簡単で、優れた CDN サポートを備えています。

4.プルフロー

理解を通して、3つのタイプに分けられます。

RTMP: 基本的に長い TCP リンクであり、各瞬間のデータは受信直後に低遅延で転送されます。

-HTTP-FLV: 本質的には HTTP の長いリンクであり、各瞬間のデータは受信後すぐに低遅延で転送されます。

-HLS: HTTP 短いリンク、優れたクロスプラットフォーム、わずかに高い遅延。主に .m3u8 ファイルと .ts ファイルの 2 つのコンテンツが含まれています。 m3u8 の URL をリクエストすると、video タグがファイルを解析し、再生する対応する ts ファイルを見つけます。

5. 発生した問題

主に video.js を使用しています

QQx5 カーネル:

Android WeChat と qq ブラウザーでは、x5 カーネルにより、ビデオを再生するとシステム再生レイヤーがポップアップしますが、qq ではブラウザのバグにより、一番上のレイヤーに黒いレイヤーが表示されます。解決策は、video タグを非表示にすることです。

ライブブロードキャスト中にデータを受信した場合、それはrtmpプロトコルであり、直接ブロードキャストすることはできません。.m3u8形式に変換されます

<source src="http://xxxxxx.m3u8" type=&#39;&#39;application/x-mpegURL" />

録画を再生する場合、データはMP4形式で受信され、配信できます。直接使用されています

<source src="http://xxxxxx.mp4" type=&#39;&#39;video/mp4" />

あなたはこれらのケースを読んだと思います この方法をマスターした後は、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:
HTML のメタ ビューポート属性の使用方法

html 画像

の代わりに Base64 エンコーディングを使用する方法 HTML で hr 水平線を使用する方法

html 画像とテキストの混合配置を実現する方法

🎜🎜

以上がVideo.js を使用して H5 ライブ ブロードキャスト インターフェイスを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。