We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

<audio> 要素および <video> 要素は、プラグインを使用しない音声や動画の再生の対応を提供します。メディアファイルの形式は、1つ以上のデータのストリームを保持するコンテナーで構成され、データはコーデックと呼ばれる圧縮形式を使用して符号化されます。コンテナーはファイルの拡張子で識別することができます。コンテナーの中のストリームには、動画、音声、データ、キャプションなどの複数の種類を含むことができます。単一のコンテナー (つまりメディアファイル) は同じ種類のストリームを複数保持することができます。音声や動画のストリームはコーデックです。コーデック ("coder-decoder" の短縮形) は、ファイル内のデータを圧縮するアルゴリズムです。それぞれのコンテナーの種類は特定のコーデックにしか対応していません。

なぜウェブで複数のメディア形式が必要とされているかを理解することが重要です。ほとんどがこの記事の範囲外の様々な理由によるものですが、それぞれのブラウザーは別々なメディア形式に対応しています。ウェブにおけるメディア形式の領域は、アメリカや EU 諸国を含む多くの国の特許法に大きく悩まされています (この記事で特許に関する注釈は現状のまま提供されており、一切の保証はありません)。この記事ではウェブに関するファイル形式について、モバイル及びデスクトップのブラウザーの対応を含めて説明します。

表示メディア

こちらでは HTML でメディア要素が参照される方法を軽くおさらいします。詳しくはそれぞれの要素の記事をご覧ください。

HTML5 は複数のメディア要素に対応しています。 <video> 及び <audio> 要素は単独で使われることもあれば、 <source> 要素と組み合わせられることもあります。短い例を示します。 <video> 及び <audio> 要素にはどちらも src 属性がありますが、この例では複数の動画ファイルを提供するために <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.
</video>

ファイル形式

HTML のメディア要素が対応しているたくさんの (但し全てではない) ファイル形式を以下に挙げます。ブラウザーがどの形式に対応しているかを知るには、このページの最下部にある「ブラウザーの対応」の節をご覧ください。

WebM

WebM 形式は制限されたバージョンの Matroska コンテナー形式に基づいています。これは、常に VP8 または VP9 動画コーデックと Vorbis または Opus 音声コーデックを使用します。

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

Firefox は以下の MIME タイプを理解します。

audio/ogg; codecs=opus
RFC 7845 section 9 をご覧ください。

Ogg FLAC

Ogg コンテナーは、 FLAC コーデックでエンコードされた音声を含むこともできます。これは Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) 以降のデスクトップ版と、 Gecko 58.0 (Firefox 58.0 / Thunderbird 58.0 / SeaMonkey 2.55) 以降のモバイル版で対応しています。

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

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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 56.0 51 (51) 未サポート 未サポート 11
<audio>: Ogg で FLAC を使用 56.0 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 を使用 (有)[3] (有)[10] 9.0 (有) (有)
<video>: MP4 で H.264 および AAC を使用 (有)[4] (有)[11] 9.0 (有) 3.1
<video>: MP4 で FLAC を使用 62.0 51 (51) ? ? ?
その他の形式 未サポート 未サポート 未サポート 未サポート 3.1[12]
機能 Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
基本対応 (有) 29 24.0 1.0.1 10.0 11.0 (有)[13] 3.2
<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 を使用 (有) 29 24.0 1.0.1 未サポート 16.0 (有)[24] 未サポート
<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] 29 24.0[33] (有)[27] 10.0 16.0[28] (有)[29] (有)
<video>: MP4 で H.264 および AAC を使用 (有)[30] 29 24.0[34] (有)[31] 10.0 16.0[28] (有)[32] 3.2
<video>: MP4 で FLAC を使用 ? 62.0 58.0 (58) ? ? ? ? ?
その他の形式 ? ? ? ? ? ? ? ?

[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 が既定の動画形式でした。

関連情報

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

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