HTML 5 Video

June 24, 2010

If you haven't heard the buzz about HTML5, you should check out the many features and improvements. It has support for cool stuff like SVG and MathML, but one of the most impressive things it can accomplish is embedding streaming videos with no required flash player or java applet. The old way of video streaming usually involves first converting your video into the proprietary flash ".flv" format. Then you add many lines of ugly code, filled with frequently redundant information, like this example courtesy of YouTube:

<object width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/mPpUiXDUASk&amp;hl=en_US&amp;fs=1&amp;"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/mPpUiXDUASk&amp;hl=en_US&amp;fs=1&amp;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed>
</object>

In HTML5, all this can be replaced by something as clean and simple as the tag. Here is an example of what it looks like in action:

<video width="640"  height="360" src="./movies/movie1.mp4"  controls autobuffer>

Much cleaner, right?

Sadly, this is not without its caveats. First of all HTML5 is not yet a finalized standard, so the various browsers will handle it differently. Secondly, Internet Explorer does not yet support HTML5 (surprise, surprise!), although the upcoming IE9 will provide support for it. This brings me to the first major hurdle:

Currently, there is no universal codec/container combination that will satisfy all HTML5 browsers.

This means that if you desire to use HTML5 video, you will need to encode your video at least twice. The two "official" combinations are Ogg/Theora/Vorbis and MP4/H.264/AAC. The Ogg combo works on Firefox and Opera, whereas the MP4 combo works with Safari, iPhone, Android, and the upcoming IE9.

Check out http://diveintohtml5.org/video.html for more detailed information.

Once you have your videos encoded and uploaded, you'll need to set it up in your code. The diveintohtml5.org guide recommends having 3 codecs (with webm, which is a soon-to-be standard) and Flash fallback, but in the future various browsers should have a more uniform codec support:

<video id="movie" width="320" height="240" preload controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/good/bbb_480p.mp4", "autoPlay":false, "autoBuffering":true}}' />
<p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
</object>
</video>

You'll notice the optional mime types and codecs as additional attributes. This is really just error proofing your code. It will make sure that it will have browser interoperability, and browsers won't have to download the videos to tell what codecs they are using (which saves you bandwidth—and when you are serving up videos, your bandwidth is a precious commodity!).

So much for the clean and simple solution, eh? So what is the upshot here? Well, first and foremost, it's an open standard. You no longer have to rely on the proprietary Flash plugin to do something that the browser should be able to natively support. Secondly, Flash is not universally supported, and with the growing prominence of iPhone video streaming, you'll be missing out on a huge demographic. Thirdly, HTML5 video is friendlier with overhead resources. So while it's not perfectly simple yet, it's still worthwhile to start adopting.

-Mark