In Lesson 1 and Lesson 2 of our HTML 5 tutorial, we looked at some new structural tags you can use to help eliminate the “div-soup” of HTML 4.x layouts, as well as some other semantic tags to help give your pages easy-to-parse dates, metadata and captioned images.
Now it’s time to take a look at what might be the most-hyped part of the HTML 5 specification — the audio and video tags.
Video’s a tough nut to crack
Currently, the only way to reliably embed video on a web page so that all users can see it regardless of browser or operating system, is with Flash. This requires the Adobe Flash plugin and a combination of the
Most users have the Flash plugin installed already (actually, something like 95% of web-connected users have some version of it), but proponents of HTML 5 are pushing for an open video standard that doesn’t require any plugins. That’s the idea behind the new
<video> tag in HTML 5 — it provides a way to embed (and interact with) video without the need for a proprietary plugin like Flash.
Unfortunately, video isn’t that simple. Not only does the browser need to understand the
<video> tag, it also needs to have the necessary codec to play the video. The obvious solution would be for the authors of the HTML 5 specification to pick a video codec and mandate that every browser maker implements it.
That was the idea that was proposed, anyway. It’s also the point when the fur started flying. The debate over various codecs is rather complex (we covered it on the Webmonkey blog, and our sister site Ars Technica has a nice in-depth look at the debate), but the short story is that browser makers couldn’t agree on a video codec. Apple doesn’t like the proposed Ogg Theora codec and Opera and Mozilla don’t want to pay the license fees necessary to ship their browser with the H.264 codec. Google is implementing both, and Microsoft stayed largely out of the fray since it currently has no plans to implement the HTML 5 video element at all.
Faced with a standoff among the browser makers, HTML 5′s benevolent dictator, Ian Hickson, effectively threw up his hands and said “screw it” — so now there’s no specific video codec named or mandated in the HTML 5 spec.
Does that mean the video tag is useless? No, it just means that widespread adoption of a video codec is still a ways off.
In the meantime, let’s take a look at how you would use the video tag, and how you can use it today with some fallback code for the browsers that can’t handle it.
Using the <video> tag
Lest you think what we’re about to wade through is ultimately an exercise in futility, if there is no agreed upon standard, consider this: Google is chomping at the bit to use the video tag for YouTube.
In fact, there’s already a mockup of what YouTube would look like using only HTML 5. While the company hasn’t announced a timeline to convert YouTube to use the HTML 5
<video> tag, you can bet that when they do, a sizable chunk of the web will follow suit.
So how does video work? Well, are you ready? Here’s the code to embed a video in HTML 5:
Pretty simple right?
Well, ideally you would do something more like this (which is what the aforementioned YouTube demo does):
<video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer> <div class="fallback"> <p>You must have an HTML5 capable browser.</p> </div> </video>
There are also a number of useful attributes for the
<video> tag, including auto-play controls, a “poster” attribute that points to an image file to display before the video is loaded and a boolean attribute for play/pause controls. The full list of video tag attributes can be found on the W3C schools site.
Since not every browser can play MP4 videos, and since very few of them understand the video tag, what should you do today?
The unfortunate answer is that you’ll need to point to multiple videos. Hardly ideal, but if you want to push the HTML boundaries, you can embed your video using the
<video> tag for browsers that support HTML 5 and fallback on Flash for those that don’t.
Something like this would do the trick:
<video src="video.mp4" controls> <object data="player.swf" type="application/x-shockwave-flash"> <param value="player.swf" name="movie"/> ...etc... </object> </video>
Obviously, all we’ve really done is wrap the same old
<embed> tags with the new
<video> tag — hardly a great leap for the web.
Drupal developer Henrik Sjokvist has an example of how to do just that using the following HTML 5 code:
<video controls> <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari --> <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 --> </video>
If you need a refresher course on how to dynamically load videos into a Flash file, check out this Stack Overflow page which has a quick overview and some basic sample code.
Using that scenario, you’ve got a solution where every visitor can see your video and you only need to offer two actual files: Ogg Theora for Firefox and other browsers which support it, and an MP4 for everyone else.
Using the <audio> tag
The audio tag is more or less a duplicate of the video tag. The same codec limitations apply — Mozilla only supports Ogg Vorbis files, while Safari can handle pretty much anything QuickTime can.
The code looks very similar to
<audio src="/music/myaudio.ogg" autoplay> Sorry, your browser does not support the <audio> element. </audio>
And as with the
<video> tag, the same Flash-based workarounds would give you near universal support for today’s crop of browsers.
As you can see, the audio and video landscape in HTML 5 has some issues — namely the inability for browser makers to come to any sort of codec consensus. But bear in mind that the good old
<img> tag also lacks a specific format mandate and we’ve managed to make that work over time.
Ideally, all the browsers would support both Ogg and H.264, giving developers even more options.
There’s also the possibility that Google will open source the codecs it is trying to acquire from the start-up On2. On2′s VP3 codec is the basis for Ogg Theora, and if Google releases VP6, VP7 or VP8 as open-source, there’s another possible solution for open-source video on the web.
You can read more about this development on Webmonkey’s blog.
Lesson 1: Building Web Pages With HTML 5