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.
Contents
Video’s a tough nut to crack
Using the <video> tag
Using the <audio> tag
Conclusion
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 <object>and <embed> tags.
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:<video src="/myvideo.mp4"></video>
Pretty simple right?
Well, ideally you would do something more like this (which is what the aforementioned YouTube demo does):
view sourceprint?
1 <video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
2
3 <div class="fallback">
4
5 <p>You must have an HTML5 capable browser.</p>
6
7 </div>
8
9</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.
The <video> tag also has a whole host of events you can hook into with JavaScript, allowing you to play movies inside movies and set up complex user interactions via mouse and keyboard events. Here’s an example that uses the video tag in conjunction with the Canvas tag and Web Workers (we’ll cover those in the future) to create a motion tracking system for web video.
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:
01 <video src="video.mp4" controls>
02
03 <object data="player.swf" type="application/x-shockwave-flash">
04
05 <param value="player.swf" name="movie"/>
06
07 ...etc...
08
09 </object>
10
11 </video>
Obviously, all we’ve really done is wrap the same old <object> and <embed> tags with the new <video> tag — hardly a great leap for the web.
How about we get rid of the fallback code, keep our HTML limited to the video tag and use a little JavaScript to handle the Flash embedding behind the scenes?
Drupal developer Henrik Sjokvist has an example of how to do just that using the following HTML 5 code:
1 <video controls>
2
3 <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->
4
5 <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
6
7
8
9 </video>
Sjokvist’s Flash solution requires a little JavaScript to sniff out the browsers capabilities and then offer Flash if the browser can’t understand HTML5 (note that the code uses the swfobject library to handle the actual embed). We prefer this method since it keeps the actual HTML code cleaner and when video tag support is ubiquitous, all you need to do is drop the JavaScript. There’s no requirement to rewrite your actual pages.
Another possible solution would be to simply load the MP4 movie into a Flash container file. As of Flash Player 10, Flash supports dynamically loaded MP4 files, so all you would need is to use Sjokvist’s JavaScript detection code, but rather than feeding your player SWF a separate .flv video file, you could just load the same MP4 file.
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 <video>:
1 <audio src="/music/myaudio.ogg" autoplay>
2
3Sorry, your browser does not support the <audio> element.
4
5
</audio>
And as with the <video> tag, the same Flash-based workarounds would give you near universal support for today’s crop of browsers.
Conclusion
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.
Source : http://www.webmonkey.com/2010/02/embed_audio_and_video_in_html_5_pages/#Video.27s_a_tough_nut_to_crack
