HTML5 for Your Video Clips

One size fits all is very hard to find.

Like most editors these days, I need to post video samples that are accessible to prospects. If you visit my video gallery page, you can find different samples of my work. Initially, all the video on my site was Flash video. At the time I uploaded the video, Flash seemed to be the most universal format for video. Unfortunately, Apple’s mobile devices such as iPhone and iPad do not support Flash.
For that reason, I started on a quest for a solution that worked on all devices. That quest led me to HTML5 video.

When I started my search, there was 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, I would have to encode the video to multiple formats including non-HTML5 video formats for those browsers 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, a video stream and audio streams.

The container is a package that keeps the separate video and audio streams together. One source of my research (diveintohtml5.info 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. I 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.

QuickTime Movie Inspector

To get an illustration of this video component structure, load a movie into the QuickTime Player and Show Movie Inspector. The QuickTme movie file itself is the container and the different streams and codecs are listed in "Format:". In our illustration (image to left) the container is an MPEG 4 video (.m4v) that includes a video track using the H.264 codec and an audio track using the AAC codec.

As HTML5 stands now, the example we’ve illustrated will not work in all browsers. In order to reach as many viewers as possible, the video would have to be encoded in multiple combinations of containers and codecs. If you don't want to post multiple encodes, you could just encode for the most popular browser, but you risk alienating a whole lot of potential viewers. Want to see which is the most popular browser; check out www.w3schools.com/browsers/browsers_stats.asp.

Because there is no “one-size-fits-all” solution, I guess I’ll have to come up with another solution. That’s too bad, I had such high hopes for HTML5 video.