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

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

ビューアの再生の点では、ブラウザーのビデオ機能が自動的に検出されます。次に、HLS(HTTPライブストリーミング)を使用してビデオを提供します。これはアダプティブビデオストリーミングとも呼ばれます。 または、その配信メソッドが存在しない場合は、代わりに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ビデオストリーミング。

このページ