demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter.

featured articles

popular favourites

HTML5 Audio & Video: Codec Support & Production Workflow

No 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:

HTML5 A/V codec support in browsers (as of July 27, 2012)
ClientWAVEMP3WebM (VP8)Ogg Vorbis / TheoraH264AACOpus
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.

You must be signed up in order to leave comments.

web developer guide

featured comment

by Aisling Brock in New Business Card Design

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four
A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]
Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands
Borderlands

what i'm hearing

Planets
Planets

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.