Media formats supported by the HTML audio and video elements

  • Revision slug: HTML/Supported_media_formats
  • Revision title: Media formats supported by the HTML audio and video elements
  • Revision id: 399301
  • Created:
  • Creator: Hsivonen
  • Is current revision? No
  • Comment Change "MPEG 4" to "MP4" when talking about the container to make it clear we're talking about the container and not some other part of MPEG-4 (such as the pre-H.264 video profiles)

Revision Content

{{ HTMLVersionHeader("5") }}

The {{ HTMLElement("audio") }} and {{ HTMLElement("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 warranty.)

To make an HTML5 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 browsers -->
</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.

Statement from Microsoft on why IE9 does not have native WebM support.

The WebM format, specifically the VP8 video codec, had been acccused of patent infringment by a group of companies answering a call by the MPEG LA for the formation of a patent pool, but MPEG LA has agreed to license those patents to Google under a "perpetual, transferable, royalty free license".  This means, effectively, that all known patents on the WebM format are licensed to everyone for free. 

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 when available, 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 is not yet available.

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.

Ogg Opus

The Ogg container can also contain audio encoded using the Opus codec. Support for this is available in Gecko 15.0 {{ geckoRelease("15.0") }} and later.

MP4 H.264 (AAC or MP3)

The MP4 container format with the H.264 video codec and either the AAC audio codec or the MP3 audio codec is natively supported by Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. Firefox will soon support the format, but only when a third-party decoder is available.

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. However, since royalty free formats are not supported by Internet Explorer and Safari, Mozilla has decided to support the format anwyay, and Google never fulfilled their promise to remove support for it in  Chrome.

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 {{ CompatVersionUnknown() }} {{ 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>: MP4, MP3

{{ CompatVersionUnknown() }} (Not in Chromium)

Partial (see below)

9.0 {{ CompatNo() }} 3.1
<audio>: MP4, AAC

{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)

Partial (see below)

9.0 {{ CompatNo() }} 3.1
<audio>: Ogg, Opus {{ CompatUnknown() }} {{ CompatGeckoDesktop("15.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
<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, e.g. Perian)
<video>: Ogg, Theora, Vorbis {{ CompatVersionUnknown() }} {{ CompatGeckoDesktop("1.9.1") }} {{ CompatNo() }} 10.50 3.1 (must be installed separately, e.g. XiphQT)
<video>: MP4, H.264, MP3

{{ CompatVersionUnknown() }} (Not in Chromium)

Partial (see below) 9.0 {{ CompatNo() }} 3.1
<video>: MP4, H.264, AAC

{{ CompatVersionUnknown() }} (Not in Chromium)

Partial (see below) 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() }}

To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox. Instead it relies on support from the OS or hardware. Firefox supports these formats on the following platforms:

Platform Firefox version
Windows 7+ 21.0
Windows Vista 22.0
Android 20.0
Firefox OS 15.0

See also

Revision Source

<p>{{ HTMLVersionHeader("5") }}</p>
<p>The {{ HTMLElement("audio") }} and {{ HTMLElement("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.</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 warranty.)</p>
<p>To make an HTML5 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;
&nbsp; &lt;source src="somevideo.webm" type="video/webm"&gt;
  &lt;source src="somevideo.mp4" type="video/mp4"&gt;
&nbsp; I'm sorry; your browser doesn't support HTML5 video.
&nbsp; &lt;!-- You can embed a Flash player here, to play your mp4 video in older browsers --&gt;
&lt;/video&gt;
</pre>
<h3 id="WebM">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><a 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">Statement from Microsoft on why IE9 does not have native WebM support</a>.</p>
<p>The WebM format, specifically the VP8 video codec, had been acccused of patent infringment by a group of companies answering a call by the MPEG LA for the formation of a patent pool, but <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8">MPEG LA has agreed to license those patents to Google</a> under a "<a href="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261" title="http://xiphmont.livejournal.com/59893.html?thread=310261#t310261">perpetual, transferable, royalty free license"</a>.&nbsp; This means, effectively, that all known patents on the WebM format are licensed to everyone for free.&nbsp;</p>
<p>Gecko recognizes the following MIME&nbsp;types as WebM files:</p>
<dl>
  <dt>
    <code>video/webm</code></dt>
  <dd>
    A WebM&nbsp;media file containing video (and possibly audio as well).</dd>
  <dt>
    <code>audio/webm</code></dt>
  <dd>
    A WebM&nbsp;media file containing only audio.</dd>
</dl>
<h3 id="Ogg_Theora_Vorbis">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 when available, 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 is not yet available.</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&nbsp;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 id="Ogg_Opus">Ogg Opus</h3>
<p>The Ogg container can also contain audio encoded using the <a class="external" href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">Opus codec</a>. Support for this is available in Gecko 15.0 {{ geckoRelease("15.0") }} and later.</p>
<h3 id="MPEG_H.264_(AAC_or_MP3)">MP4 H.264 (AAC or MP3)</h3>
<p>The MP4 container format with the H.264 video codec and either the AAC audio codec or the MP3 audio codec is natively supported by Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. Firefox will soon support the format, but only when a third-party decoder is available.</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. However, since royalty free formats are not supported by Internet Explorer and Safari, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla has decided to support the format anwyay</a>, and Google never fulfilled their promise to <span class="external">remove support for it in&nbsp; Chrome</span>.</p>
<h3 id="WAVE_PCM">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:&nbsp;</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&nbsp;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 id="Browser_compatibility">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>{{ CompatVersionUnknown() }}</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>: MP4, MP3</td>
        <td>
          <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p>
        </td>
        <td>
          <p>Partial (see below)</p>
        </td>
        <td>9.0</td>
        <td>{{ CompatNo() }}</td>
        <td>3.1</td>
      </tr>
      <tr>
        <td><code>&lt;audio&gt;</code>: MP4, AAC</td>
        <td>
          <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p>
        </td>
        <td>
          <p>Partial (see below)</p>
        </td>
        <td>9.0</td>
        <td>{{ CompatNo() }}</td>
        <td>3.1</td>
      </tr>
      <tr>
        <td><code>&lt;audio&gt;</code>: Ogg, Opus</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("15.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</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, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</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>: MP4, H.264, MP3</td>
        <td>
          <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p>
        </td>
        <td>Partial (see below)</td>
        <td>9.0</td>
        <td>{{ CompatNo() }}</td>
        <td>3.1</td>
      </tr>
      <tr>
        <td><code>&lt;video&gt;</code>: MP4, H.264, AAC</td>
        <td>
          <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p>
        </td>
        <td>Partial (see below)</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>
<p>To avoid patent issues, support for MPEG 4, H.264, MP3 and AAC is not built directly into Firefox. Instead it relies on support from the OS or hardware. Firefox supports these formats on the following platforms:</p>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Platform</th>
      <th scope="col">Firefox version</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=799315" title="https://bugzilla.mozilla.org/show_bug.cgi?id=799315">Windows 7+</a></td>
      <td>21.0</td>
    </tr>
    <tr>
      <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a></td>
      <td>22.0</td>
    </tr>
    <tr>
      <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td>
      <td>20.0</td>
    </tr>
    <tr>
      <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td>
      <td>15.0</td>
    </tr>
  </tbody>
</table>
<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>
  <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio &amp; Video codecs in Chrome</a></li>
</ul>
<h2 id="See_also">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&nbsp;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