What are the different video codecs in HTML5?

A video codec is some software that compresses and/or decompresses digital video. There are many different codecs available today because there is not just one way to approach the problem of compression and decompression.

In the initial drafts of the HTML5 specification, it said that all browsers must have built-in support for multimedia in at least 2 codecs. Those two codecs were Ogg Theora for movies and Ogg Vorbis for audio.

The HTML5 Standard does not specify which codecs should be used by browsers

But, Nokia and Apple both did not want the HTML5 standard to have any requirements for built-in support of specific video codecs, so that requirement was removed from the HTML5 Standard. This now means that every browser supports different video codec formats depending on the preferences of the individuals responsible for developing the browser.

This means that if you are creating a webpage and want to use the HTML5 video tag you must encode your video using multiple codecs so that your video will play in all browsers.

The two major container and codec combinations

There are two popular container/codec combinations that you should know about – if you’re not sure about the difference between containers and codecs then read about that here: Containers vs. Codecs. Here are the two popular container/codec combinations:

  • 1. The WebM container combined with the VP8 codec.
  • 2. The MP4 container (which you have surely heard of) combined with the H.264 codec. The interesting thing about the H.264 codec is that the owners of the codec actually require that you pay money (basically a royalty fee) to use the codec, depending on whether your use of the codec is to freely share a video or to make money from a video.

Chrome actually dropped support of the H.264 video codec in 2011 in favor of the VP8 codec (packaged in the WEBM container). The VP8 codec was actually developed by a company called On2 Technologies, which was then bought out by Google in 2010 for $125 million dollars.

HTML5 video codecs browser support chart

Here is a chart that shows the details of which browsers support the more popular codecs and container combinations:

BROWSER MP4 (H.264 Codec) WEBM (VP8 Codec) OGV (OGG THEORA Codec)
Chrome NO, support discontinued YES YES
Firefox NO YES YES
IE9 + YES YES, but requires manual installation of codec NO
Safari YES NO NO

Browser audio codec support chart

BROWSER MP3 MP4/M4A (AAC Codec) .OGV/.OGG (Vorbis codec) WAV

What file formats should I provide for HTML5 video and audio?

Given the considerations shown in the chart above, the rule that should be followed is that you should provide both an H.264 encoded video and also a WebM video. As for audio codecs, you should provide both MP3 and Vorbis encoded versions of your audio content.

One thing that’s worth noting is the fact that is it’s possible to polyfill MP3 support for Firefox, because by default Firefox does not support the MP3 codec. In order to do this you can use the JSmad (at jsmad.org) Javascript library.

H.264 is an industry standard

The H.264 video codec is actually an industry standard, and is also included in every Blu-ray DVD player.

A comparison of the different video codecs

You might be wondering which video codec is best. While you can get very technical in discussing the underlying algorithms that each codec uses and the advantages/disadvantages of those algorithms we will avoid that discussion.

Focusing on the bigger picture, MP4 and WebM both provide good quality along with a good compression level for the web. The Ogg Theora codec compression is not as good as MP4 and WebM.

Also, another consideration is the fact that some people who are providing video that is not free for the end user may have to pay a royalty if they use the H.264 codec.

Hiring? Job Hunting? Post a JOB or your RESUME on our JOB BOARD >>

Subscribe to our newsletter for more free interview questions.

One thought on “HTML5 Video Codecs”