Updated: April 2, 2015
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 MP4 (the MPEG-4 container format) using the H.264 codec with the “baseline” profile. This will work across ALL of the most popular operating systems and browsers, such as Chrome, Safari, Internet Explorer and Firefox (as of version 35.0). Previous versions of Firefox require WebM, so you might still want to include a WebM video file in your <video> code.
Exporting to WebM requires additional software, such as a WebM QuickTime component, Sorenson Squeeze or Miro Video Converter, 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. Firefox version 35.0 and later support AAC, but again, previous versions of the browser require a different codec, Vorbis, 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 Vorbis 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. To learn more about additional HTML5 attributes, see Mozilla’s <video> element article.