No HTML5 feature has been more anticipated than finally achieving built-in browser support for audio and video, largely eliminating the need for plugins. Support for both the <video> and <audio> tags is strong in all modern browsers: what has been contentious has been the decisions regarding codecs.
To shorten a very long story, browser programmers choose to support different codecs due to various issues, including licensing, philosophy, and marketshare. As of this writing and for the foreseeable future, there is no one codec that is shared as a standard by all browsers, which means that we have to encode our audio and video at least twice to achieve complete coverage, at least for now.
The current state of affairs could be summarized as:
| Client | WAVE | MP3 | WebM (VP8) | Ogg Vorbis / Theora | H264 | AAC | Opus |
|---|---|---|---|---|---|---|---|
| Firefox 3.5+ | ✓ | ✓ | ✓ | ||||
| Firefox 15+ | ✓ | ✓ | ✓ | ✓ | |||
| Chrome 9+ | ✓ | ✓ | ✓ | ✓ | |||
| Safari 3+ | ✓ | ✓ | ✓ | ||||
| Opera 10+ | ✓ | ✓ | |||||
| IE 9 | ✓ | ✓ | ✓ | ✓ | ✓ | ||
| iPhone / iPad | ✓ | ✓ | ✓ | ||||
| Android | ✓ | ✓ | ✓ | ||||
| Flash | ✓ | ✓ | ✓ | ✓ |
WAV , MP3, Opus and AAC are audio-only; all other formats have both an audio and video component. Microsoft recently announced that it will only support WebM in IE via third-party plugins, but was introducing support for H264 for Firefox and Chrome running on Windows via plugins of its own.
So for maximum coverage our modern web audio and video production workflow would look something like this:
- For audio
- encode original, full quality audio as MP3 and Ogg. Most browsers and clients will accept MP3; all others will take the Ogg format.
- For video
- encode the video as H264, which is accepted by Safari, IE9, Flash, Chrome, and all mobile devices. Encode a VP8 version for all other browsers, with a backup of OGV for earlier versions of Firefox without VP* support.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
