HTML5 動画に必要なフォーマット

投稿者 Kazushi Sorakubo  |  動画配信、動画マーケティングのブライトコーブ

*このブログ記事は Zencoder Blog の "What formats do I need for HTML5 video?" を翻訳したものです。

Web に動画コンテンツを埋め込むには、HTML5 の <video> タグが最適です。これを使用すると、最新のあらゆるブラウザ（モバイル ブラウザを含む）でネイティブの動画再生が可能です。大多数の視聴者は Flash などのプラグインを必要としません。この同じトピックを 2010 年に取り上げましたが、それ以来、ブラウザもデバイスも大きく変化しました。

HTML5 と video 要素は 2010 年以来大きく進歩しましたが、パブリッシャにとって困難な選択の多くは、そのまま残っています。すべてのブラウザがサポートする魔法のコーデックは、まだありません。また、モバイル デバイスの改善によって、動画サポートのレベルが変わっています。

この投稿では、Web やモバイル デバイスのサポートに最適な出力について、また、推奨するビットレートについて取り上げます。結局、お客様に最適な出力は、お客様のニーズによって異なりますが、HTML5 動画の利用を始めるための基本的なガイドラインを示します。

Flash を避ける理由

HTML5 動画の長所の 1 つは、（ほとんどの）ユーザが再生に Flash を使用する必要がなくなる点にあります。Flash の何がいけないのでしょうか。今でも、すべてのサイトが Flash を利用しているのに。

さまざまな理由がありますが、結局は、ユーザ体験が向上するという理由に行き着きます。HTML5 動画は、Flash プラグインよりも読み込みが素早く、システム リソースの使用が少なくなります。さらに、Web 開発者の立場からすると、利用がはるかに簡単です。モバイル デバイスにも Flash をサポートするものがありますが、iOS も Android（4.1 以降）も Flash をサポートしません。

そうは言っても、Flash はまだ Web で重要な役割を果たしています。以前のブラウザの多くは HTML5 動画をサポートしておらず、それらのブラウザをサポートするためには、Flash の利用が必要です。ほとんどの HTML5 動画プレーヤ（Video.js など）は、これを処理してくれます。ここからは、「可能な場合は Flash プラグインをロードしない」という想定の下で話を進めます。

利用するフォーマット

最新のブラウザでネイティブに機能する動画フォーマットは 3 つあります。あいにく、すべてのブラウザで機能するフォーマットはありません。したがって、有効な HTML5 動画サポートには、最低 2 つを組み合わせる必要があります。

最小構成

少なくとも、H.264 + AAC（または MP3）の .mp4 ファイルが必要です。H.264 は、最も多くのブラウザでネイティブにサポートされており、それ以外のブラウザでも Flash プラグインを使用して再生できます。H.264 High プロファイルは最高の品質を実現します。一方で、Baseline プロファイルは最も広く、特にモバイル デバイスでサポートされています（これについては後で説明します）。

サポートされるデスクトップ ブラウザ

  • Safari 3.1 以降
  • Chrome 3.0 以降
  • Internet Explorer 9.0 以降
  • Firefox 21、24（24 ではデフォルトで無効。システム コーデックによる）

サポートされるモバイル ブラウザ

  • Android ブラウザ 3.0 以降
  • Safari (iOS) 3.1 以降
  • Firefox (Android) 17.0 以降
  • Internet Explorer (Windows Phone) 9.0 以降

複数のフォーマット

できるだけ多くのブラウザでネイティブ再生を提供したい場合は、OGV (Ogg Theora + Vorbis) または WebM (VP8 + Vorbis) レンディションも含める必要があります。対象範囲を最大化するために両方とも含めることもできますが、一方をサポートするブラウザのほとんどは、もう一方もサポートします。

サポートされるデスクトップ ブラウザ

WebM
  • Chrome 6 以降
  • Firefox 4.0 以降
  • Opera 10.60 以降
Ogg
  • Chrome 3.0 以降
  • Firefox 3.5 以降
  • Opera 10.50 以降

サポートされるモバイル ブラウザ

  • （両方）Android ブラウザ 2.3 以降

2010 年時点では、Ogg は 44.64% のブラウザでサポートされていました。一方、WebM のサポートは 9.35% のみでした。2013 年では、サポートの割合は 2 つともほぼ同じです。2012 年 12 月時点で、Ogg は 58.85%、WebM は 58.03% のブラウザでサポートされています。

どちらかを選択するのであれば、WebM を推奨します。2010 年当時、「WebM はオープン動画の未来であると思う」と私たちは言っていましたが、それは今でも変わりません。WebM の方が優れたコーデックであり、勢いがあります。したがって、これからも成長を続けると考えています。

推奨: MP4 + WebM（対象範囲を最大化するのであれば MP4 + WebM + Ogg）

モバイル デバイスへの対応

デスクトップの場合と同様に、すべてのモバイル デバイスで機能する単一のプロファイルはありません。最新のデバイスのほとんどは H.264 をサポートしますが、残念なことに、サポートされる H.264 プロファイルにはさまざまなバリエーションがあります。幸い、わずかの出力で最新のモバイル デバイスのほとんどをカバーできます。

デバイスによる相違点の主なものは、サポートされる解像度と H.264 プロファイルです。プロファイルの高い方が（Main と High）、ある特定のファイル サイズで品質が良くなりますが、デコードが難しいので古いデバイスではサポートできません。Baseline は最も基本的ですが、最も多くのデバイスによってサポートされています。

  1. 最新のモバイル デバイスのほとんどは MP4/H.264 をサポートします。これには、iOS シリーズすべて（iPhone、iPod、iPad、Apple TV など）、ほとんどの Android デバイス、Windows Phone 7、最新の Blackberry フォンなどが含まれます。
    注）最新のモバイル デバイスと Web の両方に、同じファイルを使用できます。したがって、バージョン数を減らしたければ、1 つだけにすることができます。古いモバイル デバイス（iPhone で言えば 3GS 以前）をサポートしたい場合、Baseline プロファイルの使用を続ける必要があります。最新のデバイス（iPhone 4S以降）は High をサポートしますが、少し古い世代（iPhone 4 など）は Main までしかサポートしません。
  2. ずっと古いモバイル デバイスには 3GP/MPEG4 を使用してください。ほとんどの Blackberry および一部の Android も 3GP をサポートします。また、通常、3GP は、iPhone/iPod でも再生されます（iOS は MP4/MPEG-4 を再生し、3GP は MP4 のサブセットにすぎないので）。
  3. 最新の Android デバイス（Android 2.3.3 以降）は WebM をサポートします。

推奨: 最小構成、MP4、640×480 または 480×360（サポートの幅を最大化するため）。最大構成、4 つの MP4 バージョン（480×360、640×480、720p + Main および 1080p + High プロファイル）プラス 1 つの 3GP バージョン（320×240）。お客様の視聴者に応じて、最大と最小のどこか中間で大丈夫ですが、具体的なエンコード設定については以前の投稿を参照してください。

複数のビットレート

大きな動画の複数のレンディションをさまざまなサイズとビットレートで提供することによって、さまざまなインターネット接続速度のユーザをサポートできます。提供する動画が HD（またはそれに近い）である場合、提供するオプションはおそらく少しだけになります。たとえば、提供する動画の最高品質バージョンが 1280×720 である場合、640×480 バージョンも提供したいと思うでしょう。最高品質が 1920×1080 である場合、レンディションの数を増やして、640×480 と 1280×720 も提供したいと思うでしょう。

HTML5 の video 要素は、ユーザが必要とするビットレートの選択に関しては何も知りません。したがって、どのレンディションが最適かを推測するために自分でロジックを書くか、ユーザに選択してもらう必要があります。通常は、ユーザに最低レンディションを提供し、希望に応じて、より高品質のバージョンを選択してもらうことを推奨します。

TL;DR

  1. 最小構成: MP4/H.264 + WebM。MP4 レンディションは、必要に応じて Flash 利用時に使用されます。
  2. モバイルでは、上と同じ MP4（Baseline プロファイルを使用）が利用できます。解像度とプロファイルが異なるレンディションを 2 つ、3 つ使用すれば、対応デバイスと動画品質の幅が広くなります。

推奨

推奨構成をいくつか示します。Zencoder は、これらのフォーマットをすべてサポートします。Zencoder を使用して最適な出力プロファイルを作成する方法が分からない場合は、お問い合わせください。HTML5 と具体的なデバイス用のサンプル API リクエストを参照したい場合は、リクエスト ビルダーのテンプレートをチェックしてください。

  1. 最低限
    • HTML5、Flash、モバイル:MP4/H.264、Baseline プロファイル、640×480
    • HTML5:WebM（または Ogg）
  2. 少し範囲を広げる
    • HTML5、Flash:MP4/H.264、High プロファイル
    • HTML5:WebM
    • HTML5:Ogg
    • モバイル:MP4/H.264、Baseline プロファイル、480×360 または 640×480
  3. すべてを十分にサポート
    • HTML5、Flash:MP4/H.264、High プロファイル
    • HTML5:WebM
    • HTML5:Ogg
    • モバイル:MP4/H.264、Baseline プロファイル、480×360、古いモバイル デバイス用
    • モバイル:MP4/H.264、Main プロファイル、1280×720、古い iOS デバイス用（iPhone 4 および古い iPad/Apple TV）。最新のデバイス（iPhone 5 など）は、デスクトップの High プロファイル レンディションをサポートできます。
    • モバイル:3GP/MPEG4、320×240 および/または 177×144、スマートフォン以外用*

* 3GP 出力は、今のところ Zencoder ではベータです。試用をご希望の場合は、お問い合わせください。