When the HTML5 <video> tag entered onto the scene, so did a bunch of new video formats, each said to work in different browsers. Frankly, it just made HTML5 confusing, and a bit unruly to work with when other players, like Flash, provided streamlined publishing and wide playback adoption. But then Apple’s lack of support for Flash on its iOS devices sparked a new movement toward HTML5 video. Luckily, these specs are becoming simpler to understand as new browsers adopt more HTML5 features.
The preferred video format for HTML5 is now MP4 (the MPEG-4 container format) using the H.264 codec with the “baseline” profile. This will work across a majority of the most popular operating systems and browsers, such as Chrome and Safari, but not Firefox, which is compatible with the WebM format. Exporting to WebM requires additional software, such as a WebM QuickTime component or Sorenson Squeeze, which is one reason you haven’t heard as much about it. But if you want a wider reach for your HTML5 video, check out this list of WebM export tools at The WebM Project’s tools page.
For a majority of browsers, the preferred audio format within the MP4 video container is AAC or MP3 — again excluding Firefox, which uses the open-source Vorbis codec to go along with WebM. Choose the “low-complexity” setting for AAC to maximize compatibility with mobile browsers.
HTML5 video tags allow you to include multiple versions of a video, so you can export videos as MP4, WebM and Theora formats and let the browser choose which one it can play.
Here’s a quick reference for HTML 5 video compression settings:
- HTML5 Video #1: MP4 container / H.264 video (baseline) / AAC audio (low-complexity)
- HTML5 Video #2: WebM / Vorbis
For more detailed information on the ever-changing browser compatibility, check out this great rundown, The State of HTML5 Video, from Long Tail Video, and for more about specific browser compatibility and history (as of mid-2010), read the chapter Video on the Web from the online book Dive Into HTML5.