HTML5ビデオビューアの使用に関するベストプラクティス

Dynamic MediaクラシックHTML5ビデオビューアプリセットは堅牢なビデオプレーヤーです。 プレーヤーの設計の点では、標準のWeb開発ツールを使用してビデオプレーヤーの全機能を作成できます。 例えば、ボタン、コントロールおよびカスタムのポスター画像背景を HTML5 と CSS を使用して設計し、顧客にカスタマイズした外観を提供することができます。

ビューアの再生の点では、ブラウザーのビデオ機能が自動的に検出されます。次に、HLS(アダプティブビデオストリーミング)を使用してビデオを提供します。 または、その配信メソッドが存在しない場合は、代わりにHTML5プログレッシブが使用されます。

単一のプレーヤーに組み合わせることで、次のような機能を実現できます。

  • HTML5とCSSを使用して設計された再生コンポーネント
  • 埋め込み再生
  • ブラウザの機能に基づくアダプティブストリーミングとプログレッシブストリーミングの使用

リッチメディアコンテンツの提供先を、デスクトップユーザーとモバイルユーザーに拡張できます。 また、ビデオエクスペリエンスを合理化することもできます。

AdobeビューアリファレンスガイドのHTML5ビューアについても参照してください。

Dynamic Mediaクラシックビデオビューアを使用したデスクトップコンピューターおよび携帯端末でのビデオ再生

デスクトップおよびモバイル向けのアダプティブビデオストリーミングの場合、ビットレートの切り替えに使用するビデオは、アダプティブビデオセット内のすべてのMP4ビデオに基づきます。

ビデオ再生は、HLSまたはプログレッシブビデオを使用して行われます。 HLS(HTTP Live Streaming)は、アダプティブビデオストリーミングのAppleの標準で、ネットワーク帯域幅容量に基づいて再生を自動調整します。 また、残りのビデオがダウンロードされるまで待たなくても、顧客はビデオ内の任意の時点を「検索」できます。 HTTPライブストリーミングも参照してください。 プログレッシブビデオは、ビデオをローカルにダウンロードして保存することで配信されます。プログレッシブビデオは、ユーザーのデスクトップ画面または携帯端末にローカルに保存されます。

次の表に、Dynamic Mediaクラシックビデオビューアを使用するデスクトップコンピューターおよび携帯端末でのビデオのデバイス、ブラウザー、再生方法を示します。

デバイス ブラウザ ビデオ再生モード
デスクトップ Internet Explorer 9および10 プログレッシブダウンロード
デスクトップ Internet Explorer 11+ HLSビデオストリーミング。
デスクトップ Firefox 23-44 プログレッシブダウンロード
デスクトップ Firefox 45以降 HLSビデオストリーミング。
デスクトップ クロム HLSビデオストリーミング。
デスクトップ Safari(Mac) HLSビデオストリーミング。
モバイル Chrome(Android™ 6以前) プログレッシブダウンロード
モバイル Chrome(Android™ 7以降) HLSビデオストリーミング。
モバイル Android™(デフォルトのブラウザ) プログレッシブダウンロード
モバイル Safari(iOS) HLSビデオストリーミング。
モバイル Chrome(iOS) HLSビデオストリーミング。
モバイル BlackBerry® HLSビデオストリーミング。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now