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

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

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

1 人のプレーヤーに組み合わせることで、次の機能を実現できます。

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

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

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

ビューアプリセット のトレーニングビデオも参照してください。

Adobe Dynamic Media Classicビデオビューアを使用したデスクトップコンピューターおよびモバイルデバイスでのビデオの再生

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

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

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

デバイス ブラウザ ビデオ再生モード
デスクトップ 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 ビデオストリーミング。

このページ