1. Technology

Understanding HTML5 Video Formats

How to Choose the Video Codec(s) to Use for HTML5 Video

By

If you are interested in using HTML5 video on your website, one of the choices you will need to make is which codec(s) you will use. There are, at this time, three codecs that the browsers that support HTML5 support.

  • MP4 or H.264
  • ogg/Theora
  • WebM

When you're choosing a codec (or codecs) to encode your video in you should keep in mind who is going to view your videos and what devices they are going to view them on. In other words: browser and operating system.

Below I have a table that details the version support in various popular browsers including native support in Android and iOS devices ('Droid phones and tablets and iPhone and iPad devices).

Unfortunately, no one codec is supported by all the major players, so if you want your video to be seen by the largest group of people, you should consider converting it into at least two formats. The two I recommend are WebM and H.264.

What is the Difference Between Web Video Codecs

For most of us the differences (beyond what browsers they run in) can be summed up by four factors:

  • ease of encoding
  • video quality
  • compression size
  • cost to use

MP4 or H.264 Codec

This is the codec supported by Apple and Microsoft. It is a licensed codec that provides good quality video and small file sizes. There are a lot of programs available for both Mac and Windows that will encode in H.264 video.

Where the problem comes in is that this codec is not free. MPEG LA, the owner of the H.264 codec, has said they wouldn't charge royalties for internet video that is free to end users in perpetuity. But what does that mean? They may charge browser makers and video editing software makers to put the codec into their products, or they could take it right to the video creators (although this is unlikely). Ultimately, if the MPEG group starts charging anyone for the license of this software, we will be paying for it at some point through increases to the price of software we purchase or the loss of support in browsers and other devices.

  • Ease: 4 out of 5
  • Quality: 4 out of 5
  • Compression: 4 out of 5
  • Cost: Free (for now)

ogg/Theora Codec

Ogg/Theora is a free open standard for video encoding. It generates high quality videos with comparatively larger file sizes. Plus it is a lot harder to find tools to convert to ogg/Theora. And in some cases they only convert the video, and not the video and audio.

Ogg/Theora is free software, so many people are comfortable using it because they are not concerned that they will be charged a license fee some day in the future. As such, we can expect that the cost of this codec will remain free.

  • Ease: 1 out of 5
  • Quality: 3 out of 5
  • Compression: 2 out of 5
  • Cost: Free

WebM Codec

WebM uses the VP8 codec that is owned by Google. It has high video quality, but it can take a lot longer to encode a video in WebM than in H.264. While Google claims that WebM has the highest video quality of all the web codecs, most independent sources find that either H.264 is slightly better or there is very little difference between the two. The problem is that it can be very difficult to encode, especially compared to the many free and commercial tools available to encode H.264.

The WebM codec is free and open source, so it should remain free to use. However, the underlying codec is owned by Google. And their position on open source could change in the future. Ultimately, most people are assuming it won't, and so this codec will remain free.

  • Ease: 3 out of 5
  • Quality: 4 out of 5
  • Compression: 4 out of 5
  • Cost: Free

What About Flash (FLV)?

Clearly for the widest possible support, you should also encode your videos in Flash, and then set up a Flash fallback option. But relying on Flash for all your video needs could be a bad idea from several standpoints:

  • Flash requires a plugin—with HTML5 video using one of the above 3 codecs, your video will be played right in the browser, without any additional software required
  • The video tag is directly part of the DOM, so you can make changes to it with scripts and CSS much more effectively than you can an embeded Flash object.
  • Some of the most popular tablets and smart phones do not support Flash (iOS devices), so Flash videos won't play there.
  • Flash is owned by a commercial company, and if they decided to start charging for the use of the license, we'd be in the same boat as with H.264. Luckily this is not likely.

Browser Support for Video Codecs

  Android Chrome Firefox Internet Explorer iOS Opera Safari
Codec   Win Mac Win Mac Win   Win Mac Win Mac
MP4 or H.264 3.0 9 7 X X 9 3 X X 5 5
ogg/Theora 2.3 9 7 3.6 3.6 X X 10.63 10.63 X X
WebM 2.3 9 7 3.6 3.6 9 (with components) X 10.63 10.63 X X
If you find the information in this table or page incorrect, please let me know, and I'll get it corrected. Thanks!

©2014 About.com. All rights reserved.