ホームページ > 記事 > ウェブフロントエンド > Video.js を使用して H5 ライブ ブロードキャスト インターフェイスを実装する
今回は、Video.jsを使用してH5ライブブロードキャストインターフェイスを実装する場合の注意事項と、Video.jsを使用してH5ライブブロードキャストインターフェイスを実装する場合の
注意事項を紹介します。以下は実際的なケースです。 。
最近、ライブブロードキャスト機能のみのモバイルH5簡易版を作成しました。要件はWeChatにありますが、ライブブロードキャストの録画も必要です。ライブ ブロードキャストについて学ぶには、
1. 構成図に示すように、背景はビデオ タグを使用してライブ ブロードキャストを再生します。ギフトや
アニメーションはcss3で実装されています。
2. プロセスモバイル端末はネイティブ システムを使用し、PC はデータ処理中に
videoを収集し、ストリーミング メディア サーバーである rtmp を介してストリーミング メディア サーバーにプッシュします。 rtmp、hls、再ストリーミング、オーディオおよびビデオのデコード、再生などのさまざまな形式での再生を生成します。
3. プッシュ ストリーミングRTMP
: これは、Macromedia によって開発されたリアルタイム メッセージ送信プロトコルであり、現在は Adobe に属しています。 RTMP プロトコルをサポートするストリーミング メディア/インタラクティブ サーバー。オーディオ、ビデオ、データ間の同心性。
利点: プロトコルはシンプルで、さまざまなプラットフォームでの実装が簡単で、優れた CDN サポートを備えています。
4.プルフロー理解を通して、3つのタイプに分けられます。
RTMP: 基本的に長い TCP リンクであり、各瞬間のデータは受信直後に低遅延で転送されます。
-HLS: HTTP 短いリンク、優れたクロスプラットフォーム、わずかに高い遅延。主に .m3u8 ファイルと .ts ファイルの 2 つのコンテンツが含まれています。 m3u8 の URL をリクエストすると、video タグがファイルを解析し、再生する対応する ts ファイルを見つけます。
5. 発生した問題 主に video.js を使用しています
Android WeChat と qq ブラウザーでは、x5 カーネルにより、ビデオを再生するとシステム再生レイヤーがポップアップしますが、qq ではブラウザのバグにより、一番上のレイヤーに黒いレイヤーが表示されます。解決策は、video タグを非表示にすることです。
<source src="http://xxxxxx.m3u8" type=''application/x-mpegURL" />録画を再生する場合、データはMP4形式で受信され、配信できます。直接使用されています
<source src="http://xxxxxx.mp4" type=''video/mp4" />
あなたはこれらのケースを読んだと思います この方法をマスターした後は、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。
の代わりに Base64 エンコーディングを使用する方法 HTML で hr 水平線を使用する方法
以上がVideo.js を使用して H5 ライブ ブロードキャスト インターフェイスを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。