HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット

<audio> 要素および <video> 要素は、プラグインを必要としないオーディオやビデオの再生サポートを提供します。ビデオやオーディオを扱うためにビデオコーデックやオーディオコーデックが使用され、コーデックにより圧縮や品質のレベルは異なります。コンテナーフォーマットは、符号化されたビデオやオーディオの保管や転送に使用されます (サウンドトラック付きのビデオでは、両方をまとめて収めます)。さまざまな組み合わせのコーデックやコンテナーフォーマットがありますが、ウェブで使いやすい組み合わせはわずかです。

主に特許の問題によりブラウザーの HTML5 video および audio の実装は、ブラウザー間で同一のメディア形式をサポートする状態ではありません。ウェブにおけるメディア形式の領域は、アメリカや EU 諸国を含む多くの国の特許法に大きく悩まされています (この記事で特許に関する注釈は現状のまま提供されており、一切の保証はありません)。この記事ではウェブに関係するさまざまなコーデックやコンテナーの組み合わせについて、デスクトップなどデバイス種別ごとのサポート状況を含めて説明します。

すべての主要なブラウザーの最新バージョンで動作するように 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/VP9 or MP4 with H.264.
  <!-- 古いブラウザーで mp4 ビデオを再生するために、Flash プレイヤーを埋め込むことができます -->
</video>

WebM

WebM 形式は制限されたバージョンの Matroska コンテナーフォーマットに基づいています。これは、常に VP8 または VP9 ビデオコーデックと Vorbis または Opus オーディオコーデックを使用します。WebM はデスクトップ版およびモバイル版の Gecko (Firefox)、Chrome、Opera でネイティブにサポートされており、また Internet Explorer や Safari (iOS を除く) ではアドオンを追加することでこの形式をサポートできます。Edge ブラウザー向けに、VP9 WebM のネイティブサポートが 進行中 です。

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) 以降のデスクトップ版およびモバイル版ブラウザーでサポートされています。

Ogg FLAC

Ogg コンテナーは、FLAC コーデック でエンコードされたオーディオを含むこともできます。これは、Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) 以降で、デスクトップ版に限りサポートしています。

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 は、ローエンドのスマートフォンなどの低スペックのハードウェアでは再生できない場合があります。

MPEG メディアは特許で保護されており、無償ではライセンスされていません。必要なライセンスの一部は MPEG LA から購入できます。Mozilla [12]、Google [12] および Opera によると、現在 H.264 はロイヤリティフリーな形式ではないためオープンなウェブプラットフォームには合いません。しかしロイヤリティフリーの形式が Internet Explorer や Safari でサポートされていないため、 それでも Mozilla は H.264 形式をサポートすることを決めており、また Google は Chrome から H.264 のサポートを削除するという約束をいまだに果たしていません。

MP4 FLAC

Firefox 51 より、MediaSource Extensions および DRM のサポートの有無にかかわらず、FLAC コーデックを使用する MP4 ファイルを再生できます。

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" です。

WAVE コーデックのレジストリーについては RFC 2361 をご覧ください。

Gecko は下記の MIME タイプを WAVE オーディオファイルとして認識します:

  • audio/wave (推奨、Chrome では動作しません)
  • audio/wav
  • audio/x-wav
  • audio/x-pn-wav

FLAC

FLAC オーディオコーデック (FLAC コーデック) を使用する FLAC コンテナー形式は、デスクトップ版の Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) でサポートしました。FLAC コンテナー形式のファイルは一般的に、拡張子が ".flac" になります。

Gecko は下記の MIME タイプを FLAC オーディオファイルとして認識します:

  • audio/flac (推奨)
  • audio/x-flac

Media Source Extensions (MSE)

Media Source Extensions は、JavaScript で再生用のメディアストリームを生成できるようにするため HTMLMediaElement を拡張しようとする、W3C のワーキングドラフトです。JavaScript でストリームを生成可能にすることで、適応性があるストリーミングやライブストリームのタイムシフトなど、さまざまな活用方法を容易に実現できます。MSE のサポートは MP4 および WebM コンテナーに限られていますが、コーデックのサポートはプラットフォームに応じて異なります。

例えば、デコードを 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/Opus をストリーミング ? 36.0 (36.0)[2] ? ? ?
<audio>: Ogg で Vorbis を使用 (有) 3.5 (1.9.1) 未サポート 10.50 未サポート
<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) ? ? ?
<audio>: FLAC 未サポート 51 (51) 未サポート 未サポート 未サポート
<audio>: Ogg で FLAC を使用 未サポート 51 (51) 未サポート 未サポート 未サポート
<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)[36] ? (有) ?
<video>: MSE を使用して WebM をストリーミング ? 42.0 (42.0)[35] ? ? ?
<video>: Ogg で Theora および Vorbis を使用 (有) 3.5 (1.9.1) 未サポート 10.50 未サポート
<video>: MP4 で H.264 および MP3 を使用 (有)[4] (有)[10] 9.0 (有) (有)
<video>: MP4 で H.264 および AAC を使用 (有)[4] (有)[11] 9.0 (有) 3.1
<video>: MP4 で FLAC を使用 ? 51 (51) ? ? ?
その他の形式 未サポート 未サポート 未サポート 未サポート 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 をストリーミング ? 42.0 (42.0) ? ? ? ? ? ?
<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
<video>: MP4 で FLAC を使用 ? 51.0 (51) ? ? ? ? ? ?
その他の形式 ? ? ? ? ? ? ? ?

[1] 別途インストールが必要です。

[2] Nightly/Dev Edition のみ有効です。

[3] H.264 をサポートしないプラットフォームに限ります。

[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 では、ビデオのエンコードに使用したプロファイルをハードウェアがサポートしていなければなりません)。

[35] VP8/VP9 ビデオコーデックは H.264 ハードウェアデコーダーが使用できない場合に、MSE 内に限り使用できます。使用可能かは、MediaSource.isTypeSupported() で確認することを推奨します。

[36] Firefox 46 より、RTCPeerConnection.createOffer() を使用して WebRTC を初期化する場合に、既定で VP9 を使用します。以前は VP8 が既定の動画形式でした。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: shuuji3, yyss, ethertank
 最終更新者: shuuji3,