Recently there’s been a lot of buzz surrounding HTML5 video as an alternative to Flash. What I had originally read sounded so promising – video that could play on any device without the need of any additional plug-ins or proprietary codecs (we’ll get into codecs later). It sounded so easy – native HTML tags would allow the video to load and play with built-in controls. As I read further, the excitement faded away.
I was looking for a “one size fits all” solution and as I looked deeper, HTML5 video lost its luster. At the time of this writing, you will need to have a different codec and/or container for playback, depending upon what browser you use. In order to support everyone, we would have to encode the video to multiple formats including non-HTML5 video formats for those browsers (Internet Explorer, for the most part) that do not support HTML5 at all.
If I’ve lost you, don’t feel bad; it’s not all that easy to follow. Here’s a quick primer on how digital video works. When working with portable video files you’re essentially dealing with three components – a container as well as video and audio streams.
The container is a package that keeps the separate video and audio streams together. One source of my research (diveintohtml5.org by Mark Pilgrim) compared the container to a ZIP file – a single file that contains multiple individual files. The container you choose for your website depends entirely on who you anticipate your audience to be. We initially went with Flash Video as a container, because the Flash plug-in has the highest penetration in browsers (www.statowl.com). Although there are a lot of video container formats out there, some of the more popular include MPEG 4 (.mp4 or .m4v), Flash Video (.flv) and Ogg (.ogv).
Stored inside these containers are streams – these streams are the actual video and audio parts of the video. If that didn’t already sound complicated enough, the video and audio streams have their own codecs. The codec is the software used to compress and decompress video and audio. In fact the word codec is a blend of the two words compressor and decompressor. The choice of a codec is based on a couple of things: making the best quality video at the smallest bit rate and anticipating what codec is installed on the end-user’s computer. Popular codecs include H.264, Theora, and VP8 for video and MP3, AAC and Vorbis for audio.
Because there is no “one-size-fits-all” solution, I guess we’ll have to resort to using code to detect the browser and serve up the appropriate video format. That’s too bad, I had such high hopes for HTML5 video.
If you’re using HTML5 video, we’d love to hear from you – drop us a comment (we’d love to hear from you even if you’re not using HTML5 video).
Posted by James Burke