Media formats supported by the HTML audio and video elements

  • Revision slug: Media_formats_supported_by_the_audio_and_video_elements
  • Revision title: Media formats supported by the HTML audio and video elements
  • Revision id: 10161
  • Created:
  • Creator: Dikrib
  • Is current revision? No
  • Comment page display name changed to 'Media formats supported by the HTML audio and video elements'

Revision Content

{{ HTMLVersionHeader("5") }}

The audio and video elements provide support for playing audio and video media without requiring plug-ins. Video codecs and audio codecs are used to handle video and audio, and different codecs offer different levels of compression and quality. A container format is used to store and transmit the coded video and audio together. Many codecs and container formats exists, and there are even more combinations of them. For use on the web, only a handful of combinations are relevant.

Different browsers do not support the same media formats in their implementations of HTML 5 video and audio, mainly because of patent issues. The area of media formats on the web has greatly suffered from patent law in many countries including USA and EU. (The notes on patents in this article is provided as-is and without any warrenty.)

To make an HTML 5 video, which works in the newest versions of all major browsers, you can serve your video in both WebM format and MPEG H.264 AAC format, using the source element like this:

<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.
  <!-- You can embed a Flash player here, to play your mp4 video in older browseres -->
</video>

WebM

The WebM format is based on a restricted version of the Matroska container format. It always uses the VP8 video codec and the Vorbis audio codec. WebM is natively supported in Gecko (Firefox), Chrome and Opera, and support for the format can be added to Internet Explorer and Safari by installing an add-on.

All known patents on the WebM format are licensed to everyone for free. However since WebM is a relatively new format, the format has not yet stood the test of time in relation to potential hidden patent issues, according to Microsoft and Apple.

Gecko recognizes the following MIME types as WebM files:

video/webm
A WebM media file containing video (and possibly audio as well).
audio/webm
A WebM media file containing only audio.

Ogg Theora Vorbis

The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in Gecko (Firefox), Chrome and Opera, and support for the format can be added to Safari by installing an add-on. The format is not supported in Internet Explorer.

WebM is generally preferred over Ogg Theora Vorbis, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions, where support for WebM were not added yet.

The patent situation of Theora is similar to that of WebM.

You can learn more about creating Ogg media by reading the Theora Cookbook.

Gecko recognizes the following MIME types as Ogg files:

audio/ogg
An Ogg file containing only audio.
video/ogg
An ogg file containing video (and possibly also audio).
application/ogg
An Ogg file with unspecified content. Using one of the other two MIME types is preferred, but you can use this if you don't know what the contents of the file are.

MPEG H.264 (AAC or MP3)

The MPEG container format with the H.264 video codec and either the AAC audio codec or the MP3 audio codec is supported by Internet Explorer and Safari. Firefox and Opera does not support the format. Support for the format is deprecated in Chrome, and Chromium does not support it either.

The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [1, 2], Google [1, 2] and Opera.

WAVE PCM

The WAVE container format, with the PCM audio codec (WAVE codec "1") is supported by Gecko (Firefox) and Safari. Files in the WAVE container format typically end with the ".wav" extension.

Note: See RFC 2361 for the WAVE codec registry.

Gecko recognizes the following MIME types as WAVE audio files:

  • audio/wave (preferred)
  • audio/wav
  • audio/x-wav
  • audio/x-pn-wav

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 3.0 {{ CompatGeckoDesktop("1.9.1") }} 9.0 10.50 3.1
<audio>: WAVE, PCM {{ CompatUnknown() }} {{ CompatGeckoDesktop("1.9.1") }} {{ CompatNo() }} {{ CompatNo() }} 3.1
<audio>: WebM, Vorbis {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} {{ CompatNo() }} 10.60 3.1 (must be installed separately)
<audio>: Ogg, Vorbis {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1.9.1") }} {{ CompatNo() }} 10.50 3.1 (must be installed separately, e.g. XiphQT)
<audio>: MPEG 4, MP3 {{ CompatUnknown() }} {{ CompatNo() }} 9.0 {{ CompatNo() }} 3.1
<audio>: MPEG 4, AAC {{ CompatUnknown() }} {{ CompatNo() }} 9.0 {{ CompatNo() }} 3.1
<video>: WebM, VP8, Vorbis {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("2.0") }} 9.0 (must be installed separately, e.g. WebM MF) 10.60 3.1 (must be installed separately)
<video>: Ogg, Theora, Vorbis {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1.9.1") }} {{ CompatNo() }} 10.50 3.1 (must be installed separately, e.g. XiphQT)
<video>: MPEG 4, H.264, MP3 {{ CompatUnknown() }} {{ CompatNo() }} 9.0 {{ CompatNo() }} 3.1
<video>: MPEG 4, H.264, AAC {{ CompatUnknown() }} {{ CompatNo() }} 9.0 {{ CompatNo() }} 3.1
any other format {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} 3.1 (plays all formats available via QuickTime)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

Revision Source

<p>{{ HTMLVersionHeader("5") }}</p>
<p>The <a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a> and <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a> elements provide support for playing audio and video media without requiring plug-ins. Video codecs and audio codecs are used to handle video and audio, and different codecs offer different levels of compression and quality. A container format is used to store and transmit the coded video and audio together. Many codecs and container formats exists, and there are even more combinations of them. For use on the web, only a handful of combinations are relevant.</p>
<p>Different browsers do not support the same media formats in their implementations of HTML 5 video and audio, mainly because of patent issues. The area of media formats on the web has greatly suffered from patent law in many countries including USA and EU. (The notes on patents in this article is provided as-is and without any warrenty.)</p>
<p>To make an HTML 5 video, which works in the newest versions of all major browsers, you can serve your video in both WebM format and MPEG H.264 AAC format, using the <a href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> element like this:</p>
<pre class="brush: html">&lt;video controls&gt;
  &lt;source src="somevideo.webm" type="video/webm"&gt;
  &lt;source src="somevideo.mp4" type="video/mp4"&gt;
  I'm sorry; your browser doesn't support HTML5 video.
  &lt;!-- You can embed a Flash player here, to play your mp4 video in older browseres --&gt;
&lt;/video&gt;
</pre>
<h3>WebM</h3>
<p>The <a class="external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> format is based on a restricted version of the <a class="external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a> container format. It always uses the VP8 video codec and the Vorbis audio codec. WebM is natively supported in Gecko (Firefox), Chrome and Opera, and support for the format can be added to Internet Explorer and Safari by installing an add-on.</p>
<p>All known patents on the WebM format are licensed to everyone for free. However since WebM is a relatively new format, the format has not yet stood the test of time in relation to potential hidden patent issues, <a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx">according to Microsoft</a> and Apple.</p>
<p>Gecko recognizes the following MIME types as WebM files:</p>
<dl> <dt><code>video/webm</code></dt> <dd>A WebM media file containing video (and possibly audio as well).</dd> <dt><code>audio/webm</code></dt> <dd>A WebM media file containing only audio.</dd>
</dl>
<h3>Ogg Theora Vorbis</h3>
<p>The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in Gecko (Firefox), Chrome and Opera, and support for the format can be added to Safari by installing an add-on. The format is not supported in Internet Explorer.</p>
<p>WebM is generally preferred over Ogg Theora Vorbis, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions, where support for WebM were not added yet.</p>
<p>The patent situation of Theora is similar to that of WebM.</p>
<p>You can learn more about creating Ogg media by reading the <a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a>.</p>
<p>Gecko recognizes the following MIME types as Ogg files:</p>
<dl> <dt><code>audio/ogg</code></dt> <dd>An Ogg file containing only audio.</dd> <dt><code>video/ogg</code></dt> <dd>An ogg file containing video (and possibly also audio).</dd> <dt><code>application/ogg</code></dt> <dd>An Ogg file with unspecified content. Using one of the other two MIME types is preferred, but you can use this if you don't know what the contents of the file are.</dd>
</dl>
<h3>MPEG H.264 (AAC or MP3)</h3>
<p>The MPEG container format with the H.264 video codec and either the AAC audio codec or the MP3 audio codec is supported by Internet Explorer and Safari. Firefox and Opera does not support the format. Support for the format is <a class="external" href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">deprecated in Chrome</a>, and Chromium does not support it either.</p>
<p>The MPEG media formats are covered by patents, which are not freely licensed. All the necessary licenses can be bought from MPEG LA. Since H.264 is currently not a royalty free format, it is unfit for the open web platform, according to Mozilla [<a class=" external" href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/">1</a>, <a class=" external" href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html">2</a>], Google [<a class=" external" href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html">1</a>, <a class=" external" href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html">2</a>] and Opera.</p>
<h3>WAVE PCM</h3>
<p>The WAVE container format, with the PCM audio codec (WAVE codec "1") is supported by Gecko (Firefox) and Safari. Files in the WAVE container format typically end with the ".wav" extension.</p>
<div class="note"><strong>Note: </strong>See <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> for the WAVE codec registry.</div>
<p>Gecko recognizes the following MIME types as WAVE audio files:</p>
<ul> <li><code>audio/wave</code> (preferred)</li> <li><code>audio/wav</code></li> <li><code>audio/x-wav</code></li> <li><code>audio/x-pn-wav</code></li>
</ul>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>3.0</td> <td>{{ CompatGeckoDesktop("1.9.1") }}</td> <td>9.0</td> <td>10.50</td> <td>3.1</td> </tr> <tr> <td><code>&lt;audio&gt;</code>: WAVE, PCM</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("1.9.1") }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>3.1</td> </tr> <tr> <td><code>&lt;audio&gt;</code>: WebM, Vorbis</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatGeckoDesktop("2.0") }}</td> <td>{{ CompatNo() }}</td> <td>10.60</td> <td>3.1 (must be installed separately)</td> </tr> <tr> <td><code>&lt;audio&gt;</code>: Ogg, Vorbis</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatGeckoDesktop("1.9.1") }}</td> <td>{{ CompatNo() }}</td> <td>10.50</td> <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> </tr> <tr> <td><code>&lt;audio&gt;</code>: MPEG 4, MP3</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>9.0</td> <td>{{ CompatNo() }}</td> <td>3.1</td> </tr> <tr> <td><code>&lt;audio&gt;</code>: MPEG 4, AAC</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>9.0</td> <td>{{ CompatNo() }}</td> <td>3.1</td> </tr> <tr> <td><code>&lt;video&gt;</code>: WebM, VP8, Vorbis</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatGeckoDesktop("2.0") }}</td> <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td> <td>10.60</td> <td>3.1 (must be installed separately)</td> </tr> <tr> <td><code>&lt;video&gt;</code>: Ogg, Theora, Vorbis</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatGeckoDesktop("1.9.1") }}</td> <td>{{ CompatNo() }}</td> <td>10.50</td> <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> </tr> <tr> <td><code>&lt;video&gt;</code>: MPEG 4, H.264, MP3</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>9.0</td> <td>{{ CompatNo() }}</td> <td>3.1</td> </tr> <tr> <td><code>&lt;video&gt;</code>: MPEG 4, H.264, AAC</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>9.0</td> <td>{{ CompatNo() }}</td> <td>3.1</td> </tr> <tr> <td>any other format</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>3.1 (plays all formats available via QuickTime)</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<ul> <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li>
</ul>
<h2>See also</h2>
<ul> <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> <li><code><a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> <li><a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li>
</ul>
Revert to this revision