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 or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML5 Audio Video: Codec Support and Production Workflow

html / multimedia

Estimated reading time: 1 minute, 23 seconds

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:

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.