HTML5 for Video Assets

Like most companies these days, MerlinOne incorporates video into our web presence. If you visit our product video page, you can find different presentations of our products. When you watch them, what you’re looking at is Flash 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.

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.

To get an illustration of this video component structure, load a movie into the QuickTime Player and look at its Properties. The movie file itself is the container and the different streams and codecs are listed inside. 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 work in Safari, Chrome and their respective mobile devices, but not much else. To date, this H.264/AAC/MP4 combination will not work with Internet Explorer, Firefox or Opera and unfortunately these browsers deliver too many viewers for us to neglect. Want to see which is the most popular browser; check out www.w3schools.com/browsers/.

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