HLSとDASHアダプティブストリーミングを使用してWebサイトにHTML5ビデオプレーヤーを埋め込む方法

AdobeのFlashPlayerは、インターネットの主要なビデオプレーヤーとして長い間使用されてきました。それは長い間君臨していましたが、より速く、効率的で、ファイル管理を容易にするプロトコルに取って代わられています。 Google ChromeはFlashもブロックし始めており、AdobeFlashのサポートはまもなく完全に終了します。このレガシープロトコルを完全に置き換えるにはしばらく時間がかかるかもしれませんが、それは確かにその利点をもたらします。一部の新しいブラウザは、HLS(HTTP Live Streaming)をネイティブでサポートしています。



HTML5とHLSはオープンソースプロトコルです。つまり、誰でもコードを変更してWebサイトで使用でき、完全に無料です。ビデオを再生品質の複数の異なる標準にエンコードし、キャプションを囲み、帯域幅に応じてビデオの品質を最適化することは、HLSビデオストリーミングとシームレスに行われます。 HTMLネイティブのため タグ、HTML5ストリーミングがコードに含まれているため、HLSおよびDASHを介して簡単にストリーミングできます。 DASHとHLSは、ビデオストリームをHTML5ビデオプレーヤーに使用できる小さなセグメントに分割します。ビデオの再生を開始する前にビデオをバッファリングする必要がある時間と、ストリームを視聴するときに発生する可能性のある途切れの問題を削減します。メリットは、視聴者だけでなく、コンテンツプロバイダーにも及びます。

JWPlayerを使用してWebサイトにHTML5ビデオプレーヤーを埋め込む

始める前に、JWPlayerを ここに 。アダプティブストリーミングの目的で使用されるHLSとDASHの台頭により、多くのビデオプレーヤーが登場し、ユーザーに公平な利益を確実に提供しています。何度も挑戦に耐え、ESPNやソニーピクチャーズなどで使用されてきたそのようなプレーヤーの1つがJWPlayerです。コンテンツのアップロード、ビデオプレーヤーのHTML5、iOS、Android、Fire OSへの埋め込みは、JWPlayerのネイティブコードを使用して簡単に行うことができ、ユーザーエクスペリエンスをさらに向上させることができます。しかし、今日の焦点は、HTML5ビデオプレーヤーと、HLSとDASHを使用してアダプティブストリーミングを改善する方法にあります。



JW Playerは何を提供しますか?

JWPlayerは、動画をアップロードして再生リストにするためのプラットフォームを提供するだけでなく、広告スケジュールのレポートとカスタマイズされたレポートを提供することで、アップロードされた動画のリアルタイムの統計を表示することもできます。



カスタマイズされたレポート



JWPlayerは、キャプション、サムネイル、メタデータなどを簡単に管理できるようにすることで、CMSを利用したWebサイトのコンテンツ管理も容易にします。したがって、JWPlayerの使用と利点は、HTML5ビデオを埋め込むためのビデオプレーヤーであるだけではありません。

JWPlayerに動画をアップロードする

動画をアップロードする

HTML5 WebサイトにJWPlayerの埋め込みを開始する前に、まずそれぞれのビデオをJWPlayerプラットフォームにアップロードすることが重要です。ありがたいことに、アップロードするファイルを選択するだけなので、それほど複雑な作業ではありません。



ビデオがアップロードされたら、そのビデオのメタデータセクションの編集を開始し、分析を表示してトラフィックなどを監視するか、HLSのソースを取得して[アセット]タブからクローズドキャプションをアップロードできます。

HLSおよびDASHビデオプレーヤーのカスタマイズ

ビデオプレーヤーを埋め込む前に、まずプレーヤーライブラリをサイトに追加する必要があります。この偉業を達成する方法は3つあります。セルフホスト、クラウドホスト、およびAPI呼び出しを使用したクラウドホスト。クラウドホスティングとAPI呼び出しを使用したクラウドホスティングの違いは、単にAPI呼び出しに基づいています。 API呼び出しを介してビデオプレーヤーの実装を管理したい開発者は、これを使用することをお勧めします。セルフホストの場合、プレーヤーのバージョンは完全にあなたによって制御されます。プレーヤーのライセンスは自動的にローテーションされないため、セルフホストを使用する場合は手動で行う必要があることに注意してください。

クラウドでホストされるプレーヤーのカスタマイズ

ここに表示されているように、クラウドでホストされるプレーヤーは、好みに合わせてカスタマイズおよび洗練することができます。たとえば、プレーヤーはレスポンシブサイズまたは固定サイズのいずれかを持つことができます。再生は、ループ、開始時のミュートなどに設定できます。さらに、プレーヤーのデフォルトの色、ビデオの推奨事項などを変更することもできます。

これらすべてを停止したら、Cloud Hosted PlayerLibraryコードをウェブページにアップロードする必要があります JWPlayerをWebサイトにロードできるようにするためのタグ。

ビデオプレーヤーの埋め込み

デフォルトでは、JWPlayerは自動的にHTML5メディアエンジンを優先するため、主要な設定を心配する必要はありません。ただし、場合によっては、それを変更する必要があります。その場合は、プレーヤーをカスタマイズして、自分のやり方でセットアップすることができます。

クラウドでホストされているプレーヤーライブラリをウェブページのタグにアップロードしたら、次のステップは埋め込みコードをアップロードすることです。まず、を作成します のタグ JWPlayerが表示される場所。を呼び出す セットアップ() プレイリストプロパティを使用して、ターゲットのプレーヤーを呼び出します

以下はサンプルの例です セットアップ() JWPlayer開発者自身によって提供されるコード:

jwplayer( 'myElement')。setup({'プレイリスト': 'https://example.com/myVideo.mp4