HTML5, Part I: Video

I had originally planned to finish off my Web 2.0 Overview before getting into the specifics of each technology, but yesterday’s introduction to HTML5 got a lot of attention, so we’ll move it up a bit.

HTML5 supersedes HTML 4.0, XHTML 1.0, and XHTML 1.1; it provides new tags for handling many common web design elements that are currently handled with third party applications such as Flash, and standardizes elements that have never been formally documented.

What do you need to get started?
The latest versions of Chrome, Firefox, Opera, and Safari all support some but not all HTML5 features; Internet Explorer 8 has a few features and IE 9 is expected to add more. As always, when designing for Internet Explorer, be particularly careful about elements that compete with Microsoft’s own offerings – for example, IE 8 does not support the canvas tag, which would replace Microsoft’s Silverlight technology. In this series, I’ll attempt to focus on those elements that are supported by all of the major browsers, or at least mention the exceptions.

Show me the video!
Let’s start with how to embed video in a webpage. Traditionally this has been done with a third-party plugin such as QuickTime, RealPlayer, or Flash; now we have a standards-based method that should be supported on all platforms. Currently the <video> tag works in Chrome, Firefox 3.5, IE 9, Opera, and Safari 3; however, each browser supports different codecs and containers. Unfortunately, there is no one container/codec combo that works for all of these browsers, so if you want your video to show up for everyone using an HTML5 browser, you’ll need to encode it multiple times. Fortunately, HTML5 allows you to specify several videos in one video tag, leaving it to the browser to choose which one to display. To have the video display on all browsers, you’ll need the following encodings: (Converting video into the correct formats is one service a professional website designer will provide)

  • Theora video and Vorbis audio in an Ogg container
  • H.265 video and AAC audio in an MP4 container
  • VP8 video and Vorbis audio in a WebM container

Finally, to accommodate browsers that do not support the <video> tag, you’ll want to fall back to a Flash video.

So give me the tag details, already!
When you only have one video file, the tag works pretty much as expected; however, it has a number of optional (but desirable) attributes:

<video src=”videoname” width=”XXX” height=”YYY” controls> </video>

So what’s all this? The src part, width, and height should be fairly self-explanatory;  width and height are optional but should be used anyway. By default, the video tag does not offer the user any type of control over the video; the controls option adds a built-in set. Alternatively, you can write your own; the video element has methods play() and pause() and read/write properties volume, muted, and currentTime.

If you expect every visitor to watch the video,  the preload option will start it downloading as soon as the page loads; setting preload=”none” will tell the browser not to load the video until it’s requested. Finally, the autoplay option does exactly what you would expect; it downloads the video and starts it playing as soon as possible.

Several videos, one tag
What if you went ahead and made three encodings of your video so everyone using an HTML5 browser can see it? In that case, your code will look something like this:

<video width=”xxx” height=”yyy” controls>

<source src=”video.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>

<source src=”video.webm” type=’video/webm; codecs=”vp8, vorbis”‘>

<source src=”video.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>

<object width=”XXX” height=”YYY” type=”application/x-shockwave-flash” data=”__FLASH__.SWF”>

<param name=”movie” value=”__FLASH__.SWF” />

<param name=”flashvars” value=”image=__POSTER__.JPG&amp;file=__VIDEO__.MP4″ />

</object>

</video>

Do you really need all that? Well, no…but if you don’t specify exactly how each video is encoded, the browser will find out whether it can play a video by downloading it and trying to play it, wasting your bandwidth and the user’s time. Better to put in a little extra effort beforehand! The object tags will be ignored by HTML5 browsers (as will any non-source tags inside the video tag) but will cause older browsers to display the flash movie.

Side note: the MP4 file format should be listed first, as the iPad only notices the first source listed and will fail to play your video otherwise.

Acknowledgements:
Video for Everybody offers a more in-depth discussion of setting up your videos to be readable by everyone,

HTML5: Up and Running (due out next month from O’Reilly) contains a fascinating discussion of the history of HTML and instructions on encoding video.