<audio> 要素および <video> 要素は、プラグインを必要としないオーディオやビデオの再生サポートを提供します。ビデオやオーディオを扱うためにビデオコーデックやオーディオコーデックが使用され、コーデックにより圧縮や品質のレベルは異なります。コンテナフォーマットは、符号化されたビデオやオーディオの保管や転送に使用されます (サウンドトラック付きのビデオでは、両方をまとめて収めます)。さまざまな組み合わせのコーデックやコンテナフォーマットがありますが、Web で使いやすい組み合わせはわずかです。
主に特許の問題によりブラウザの HTML5 video および audio の実装は、ブラウザ間で同一のメディア形式をサポートする状態ではありません。Web におけるメディア形式の領域は、アメリカや EU 諸国を含む多くの国の特許法に大きく悩まされています (この記事で特許に関する注釈は現状のまま提供されており、一切の保証はありません)。この記事では Web に関係するさまざまなコーデックやコンテナの組み合わせについて、デスクトップなどデバイス種別ごとのサポート状況を含めて説明します。
すべての主要なブラウザの最新バージョンで動作するように HTML5 を使用してビデオを表示するには、ビデオを WebM 形式と MPEG H.264 AAC 形式の両方で提供して、以下のように <source> 要素を使用します:
<video controls> <source src="somevideo.webm" type="video/webm"> <source src="somevideo.mp4" type="video/mp4"> I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264. <!-- 古いブラウザで mp4 ビデオを再生するために、Flash プレイヤーを埋め込むことができます --> </video>
WebM
WebM 形式は制限されたバージョンの Matroska コンテナフォーマットに基づいています。これは、常に VP8 または VP9 ビデオコーデックと Vorbis または Opus オーディオコーデックを使用します。WebM はデスクトップ版およびモバイル版の Gecko (Firefox)、Chrome、Opera でネイティブにサポートされており、また Internet Explorer や Safari (iOS を除く) ではアドオンを追加することでこの形式をサポートできます。
なぜ IE9 は WebM をネイティブサポートしないかに関する Microsoft の主張。
WebM 形式、具体的にいうと VP8 ビデオコーデックは、パテントプール形成のための MPEG LA による呼びかけに答えた企業のグループによって特許侵害で告発されましたが、MPEG LA はそれらの特許を "永続的、移転可能、ロイヤリティフリーのライセンス" で Google にライセンスすることに同意しました。つまり事実上、WebM 形式に関するすべての既知の特許は無償で誰にでもライセンスされます。
Gecko は下記の MIME タイプを WebM ファイルとして認識します:
video/webm- ビデオを含む (オーディオも含むと思われる) WebM メディアファイル。
audio/webm- オーディオだけを含む WebM メディアファイル。
Ogg Theora Vorbis
Theora ビデオコーデックと Vorbis オーディオコーデックによる Ogg コンテナフォーマットはデスクトップ版およびモバイル版の Gecko (Firefox)、Chrome、Opera でサポートされており、Safari (iOS を除く) ではアドオンを追加することでこの形式をサポートできます。この形式は Internet Explorer でサポートされていません。
WebM は圧縮や品質の度合いが良く、またより多くのブラウザでサポートされることから、利用可能であれば Ogg Theora Vorbis より一般的に優れています。しかし、Ogg 形式は古いバージョンのブラウザをサポートするために使用できます (例えば Firefox 3.5/3.6 は WebM をサポートしていませんが、Ogg をサポートしています)。
Theora の特許に関する状況は、WebM の状況に似ています。
Theora Cookbook を読むことで、Ogg メディアの作成について詳しく学ぶことができます。
Gecko は下記の MIME タイプを Ogg ファイルとして認識します:
audio/ogg- オーディオだけを含む Ogg ファイル。
video/ogg- ビデオを含む (オーディオも含むと思われる) Ogg ファイル。
application/ogg- 不特定のコンテンツを含む Ogg ファイル。他の 2 つの MIME タイプを使用することを推奨しますが、ファイルのコンテンツが不明である場合はこれを使用してもかまいません。
Ogg Opus
Ogg コンテナは、Opus コーデックでエンコードされたオーディオを含むこともできます。これは、Gecko 15.0 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12) 以降のデスクトップ版およびモバイル版ブラウザでサポートされています。
MP4 H.264 (AAC または MP3)
H.264 ビデオコーデックと AAC オーディオコーデックによる MP4 コンテナフォーマットは、デスクトップ版およびモバイル版の Internet Explorer、Safari、Chrome でネイティブサポートされていますが、Chromium や Opera はサポートしていません。IE および Chrome は MP4 コンテナで MP3 オーディオコーデックもサポートしていますが、Safari はサポートしていません。Firefox/Android 版 Firefox/Firefox OS はこの形式をサポートしますが、サードパーティーのデコーダが使用でき、かつデバイスのハードウェアが MP4 のエンコード時に使用されたプロファイルを扱える場合に限ります。
注記: high profile でエンコードされた MP4 は、ローエンドの Firefox OS フォンなど低スペックのハードウェアで再生できない場合があります。
MPEG メディアは特許で保護されており、無償ではライセンスされていません。すべての必要なライセンスは MPEG LA から購入できます。Mozilla [1、2]、Google [1、2] および Opera によると、現在 H.264 はロイヤリティフリーな形式ではないためオープンな Web プラットフォームには合いません。しかしロイヤリティフリーの形式が Internet Explorer や Safari でサポートされていないため、 それでも Mozilla は H.264 形式をサポートすることを決めており、また Google は Chrome から H.264 のサポートを削除するという約束をいまだに果たしていません。
MP3
MP3 オーディオ形式 (.mp3、audio/mpeg。前述の、MP4 コンテナ内の MP3 オーディオとは異なります) は、Firefox/Android 版 Firefox/Firefox OS でオペレーティングシステムが MP3 デコーダを提供するとき、Internet Explorer、Chrome、Safari において、<audio> でサポートしています。
WAVE PCM
PCM オーディオコーデック (WAVE codec "1") による WAVE コンテナフォーマットは、デスクトップ版およびモバイル版の Gecko (Firefox) および Safari でサポートされています。WAVE コンテナフォーマットのファイルは、一般的に拡張子が ".wav" です。
Gecko は下記の MIME タイプを WAVE オーディオファイルとして認識します:
audio/wave(推奨、Chrome では動作しません)audio/wavaudio/x-wavaudio/x-pn-wav
Media Source Extensions (MSE)
Media Source Extensions は、JavaScript で再生用のメディアストリームを生成できるようにするため HTMLMediaElement を拡張しようとする、W3C のワーキングドラフトです。JavaScript でストリームを生成可能にすることで、適応性があるストリーミングやライブストリームのタイムシフトなど、さまざまな活用方法を容易に実現できます。現在、デスクトップ版 Firefox などのブラウザで実験的にサポートしています。
例えば、デコードを MSE にオフロードしながら JavaScript を使用して MPEG-DASH を実装できます。
注記: タイムシフトとは、しばらく後にライブストリームを視聴する手段です。
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 3.0 | 3.5 (1.9.1) | 9.0 | 10.50 | 3.1 |
<audio>: WAVE で PCM を使用 |
(有) | 3.5 (1.9.1) | 未サポート | 10.50 | 3.1 |
<audio>: WebM で Vorbis を使用 |
(有) | 4.0 (2.0) | 未サポート | 10.60 | 3.1[1] |
<audio>: MSE を使用して、WebM で Vorbis をストリーミング |
? | 36.0 (36.0)[2] | ? | ? | ? |
<audio>: Ogg で Vorbis を使用 |
(有) | 3.5 (1.9.1) | 未サポート | 10.50 | 3.1[3] |
| <audio>: MP3 | (有)[4] | (有)[5] | 9.0 | (有) | 3.1 |
<audio>: MP4 で MP3 を使用 |
? | ? | ? | ? | (有) |
<audio>: MP4 で AAC を使用 |
(有)[6] | (有)[7] | 9.0 | (有) | 3.1 |
<audio>: Ogg で Opus を使用 |
27.0 | 15.0 (15.0) | ? | ? | ? |
<video>: WebM で VP8 および Vorbis を使用 |
6.0 | 4.0 (2.0) | 9.0[8] | 10.60 | 3.1[9] |
<video>: WebM で VP9 および Opus を使用 |
29.0 | 28.0 (28.0) | ? | (有) | ? |
<video>: MSE を使用して、WebM で VP9 および Opus/VP8 および Opus をストリーミング |
? | 36.0 (36.0)[2] | ? | ? | ? |
<video>: Ogg で Theora および Vorbis を使用 |
(有) | 3.5 (1.9.1) | 未サポート | 10.50 | 3.1[3] |
<video>: MP4 で H.264 および MP3 を使用 |
(有)[4] | (有)[10] | 9.0 | (有) | (有) |
<video>: MP4 で H.264 および AAC を使用 |
(有)[4] | (有)[11] | 9.0 | (有) | 3.1 |
| その他の形式 | 未サポート | 未サポート | 未サポート | 未サポート | 3.1[12] |
| 機能 | Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| 基本サポート | 2.3 | 24.0 | 1.0.1 | 10.0 | 11.0 | (有)[13] | 3.2 | 29.0 |
<audio>: WAVE で PCM を使用 |
? | 24.0 | 1.0.1 | 未サポート | 未サポート | (有)[14] | 3.2 | ? |
<audio>: WebM で Vorbis を使用 |
? | 24.0 | 1.0.1 | 未サポート | 11.0 | (有)[15] | 未サポート | ? |
<audio>: MSE を使用して、WebM で Vorbis をストリーミング |
? | ? | ? | ? | ? | ? | ? | ? |
<audio>: Ogg で Vorbis を使用 |
? | 24.0 | 1.0.1 | 未サポート | 11.0 | (有)[16] | 未サポート | ? |
<audio>: MP3 |
? | (有)[17] | (有)[18] | 10.0 | ? | (有)[19] | 3.2 | ? |
<audio>: MP4 で MP3 を使用 |
? | ? | ? | ? | ? | ? | (有) | ? |
<audio>: MP4 で AAC を使用 |
? | (有)[20] | (有)[21] | 10.0 | ? | (有)[22] | (有) | ? |
<audio>: Ogg で Opus を使用 |
未サポート | 24.0 | 未サポート | 未サポート | 未サポート | (有)[23] | 未サポート | 未サポート |
<video>: WebM で VP8 および Vorbis を使用 |
2.3 | 24.0 | 1.0.1 | 未サポート | 16.0 | (有)[24] | 未サポート | 29.0 |
<video>: WebM で VP9 および Opus を使用 |
? | ? | ? | ? | ? | ? | ? | ? |
<video>: MSE を使用して、WebM で VP9 および Opus/VP8 および Opus をストリーミング |
? | ? | ? | ? | ? | ? | ? | ? |
<video>: Ogg で Theora および Vorbis を使用 |
未サポート | 24.0 | 1.0.1 | 未サポート | 未サポート | (有)[25] | 未サポート | 未サポート |
<video>: MP4 で H.264 および MP3 を使用 |
(有)[26] | 24.0[33] | (有)[27] | 10.0 | 16.0[28] | (有)[29] | (有) | 29.0 |
<video>: MP4 で H.264 および AAC を使用 |
(有)[30] | 24.0[34] | (有)[31] | 10.0 | 16.0[28] | (有)[32] | 3.2 | 29.0 |
| その他の形式 | ? | ? | ? | ? | ? | ? | ? | ? |
[1] 別途インストールが必要です。
[2] Nightly/Dev Edition のみ有効です。
[3] 別途インストールが必要です。例えば XiphQT など。
[4] AAC は MP4 コンテナに限りサポートします。Chromium は対応していません。
[5] 特許の問題を回避するため MP3 のサポートは、Firefox に直接組み込まれてはいません。代わりに、OS のサポートに依存します。Firefox はこの形式を以下のプラットフォームでサポートします: Firefox 22.0 から Windows Vista 以降、Firefox 20.0 から Android、Firefox 15.0 から Firefox OS、Firefox 26.0 から Linux (GStreamer コーデックに依存)、Firefox 35.0 から OS X 10.7。
[6] Main のみサポートします。Chromium は対応してません。また、AAC は MP4 コンテナに限りサポートします。
[7] AAC は MP4 コンテナに限りサポートします。特許の問題を回避するため MPEG4 および AAC のサポートは、Firefox に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存しています (MP4 では、ビデオのエンコードに使用したプロファイルをハードウェアがサポートしていなければなりません)。Firefox はこの形式を以下のプラットフォームでサポートします: Firefox 22.0 から Windows Vista 以降、Firefox 20.0 から Android、Firefox 15.0 から Firefox OS、Firefox 26.0 から Linux (GStreamer コーデックに依存)、Firefox 35.0 から OS X 10.7。
[8] 別途インストールが必要です。例えば WebM MF など。
[9] 別途インストールが必要です。例えば Perian など。
[10] 特許の問題を回避するため MPEG4、H.264、MP3 のサポートは、Firefox に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存しています (MP4 では、ビデオのエンコードに使用したプロファイルをハードウェアがサポートしていなければなりません)。Firefox はこの形式を以下のプラットフォームでサポートします: Firefox 22.0 から Windows Vista 以降、Firefox 20.0 から Android、Firefox 15.0 から Firefox OS、Firefox 26.0 から Linux (GStreamer コーデックに依存)、Firefox 35.0 から OS X 10.7。
[11] AAC は MP4 コンテナに限りサポートします。特許の問題を回避するため MPEG4、H.264、H.264、AAC のサポートは、Firefox に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存しています (MP4 では、ビデオのエンコードに使用したプロファイルをハードウェアがサポートしていなければなりません)。Firefox はこの形式を以下のプラットフォームでサポートします: Firefox 22.0 から Windows Vista 以降、Firefox 20.0 から Android、Firefox 15.0 から Firefox OS、Firefox 26.0 から Linux (GStreamer コーデックに依存)、Firefox 35.0 から OS X 10.7。
[12] QuickTime を通してすべての形式を再生可能です。
[13] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。
[14] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。
[15] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。
[16] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。
[17] 特許の問題を回避するため MP3 のサポートは、モバイル (Android) 版 Firefox に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存します。
[18] 特許の問題を回避するため MP3 のサポートは、Firefox OS に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存します。
[19] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。
[20] AAC は MP4 コンテナに限りサポートします。特許の問題を回避するため MPEG4 および AAC のサポートは、モバイル (Android) 版 Firefox に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存しています (MP4 では、ビデオのエンコードに使用したプロファイルをハードウェアがサポートしていなければなりません)。
[21] AAC は MP4 コンテナに限りサポートします。特許の問題を回避するため MPEG4 および AAC のサポートは、Firefox OS に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存しています (MP4 では、ビデオのエンコードに使用したプロファイルをハードウェアがサポートしていなければなりません)。
[22] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。また、AAC は MP4 コンテナに限りサポートします。
[23] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。
[24] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。
[25] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。
[26] Android のデフォルトブラウザで H.264 ビデオを再生するには、Peter Gasston による解説のように、壁を乗り越えなければなりません。
[27] Firefox OS 1.0.1 はさまざまな形式をサポートする <video> を検知したときに、実際は H.264 をサポートしていない場合でも HTMLMediaElement.prototype.canPlayType で、H.264 ビデオに対して誤って true を返します。この問題は Firefox OS 1.1 で修正しました。
特許の問題を回避するため、モバイル版 (Android) 版 Firefox および Firefox OS では MPEG4、H.264、MP3 を内蔵機能としてはサポートしていません。代わりに、OS またはハードウェアのサポートに依存しています (MP4 では、ビデオのエンコードに使用したプロファイルをハードウェアがサポートしていなければなりません)。
[28] 11.0 から部分的にサポートしています。また、AAC は MP4 コンテナに限りサポートします。
[29] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。
[30] AAC は MP4 コンテナに限りサポートします。Android のデフォルトブラウザで H.264 ビデオを再生するには、Peter Gasston による解説のように、壁を乗り越えなければなりません。
[31] Firefox OS 1.0.1 はさまざまな形式をサポートする <video> を検知したときに、実際は H.264 をサポートしていない場合でも HTMLMediaElement.prototype.canPlayType で、H.264 ビデオに対して誤って true を返します。この問題は Firefox OS 1.1 で修正しました。また、AAC は MP4 コンテナに限りサポートします。
特許の問題を回避するため MPEG4、H.264、H.264、AAC のサポートは、Firefox OS に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存しています (MP4 では、ビデオのエンコードに使用したプロファイルをハードウェアがサポートしていなければなりません)。
[32] Opera Mini 自体はビデオおよびオーディオをサポートしていませんが、デバイスがサポートする形式のビデオやオーディオは、デバイスに渡して再生します。また Opera Mobile も、サポートしていない形式のメディアで同様のことを行います。また、AAC は MP4 コンテナに限りサポートします。
[33] 特許の問題を回避するため MPEG4、H.264、MP3 のサポートは、モバイル (Android) 版 Firefox に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存しています (MP4 では、ビデオのエンコードに使用したプロファイルをハードウェアがサポートしていなければなりません)。
[34] 特許の問題を回避するため MPEG4、H.264、AAC のサポートは、モバイル (Android) 版 Firefox に直接組み込まれてはいません。代わりに、OS またはハードウェアのサポートに依存しています (MP4 では、ビデオのエンコードに使用したプロファイルをハードウェアがサポートしていなければなりません)。