2010 is finally here and HTML5 is in last call! I have decided that I will be doing a set of tutorials on HTML5 and some of it’s great new features. And to start out the New Year I thought I would show everyone how to put those great New Years Eve videos online in HTML5 with the new <video> element!
First things first, the HTML5 doctype. Many of you may be familiar with HTML4 and XHTML1′s doctypes. Respectively they are:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> & <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Now if you are like me then you have likely never typed that. Traditionally this was the one part of my markup that I would copy and paste. Usually I am a stickler about machine generated code, but with HTML 4 Transitional, HTML4 Strict, XHTML1 Transitional, & XHTML1 Strict, there were too many characters for my feeble mind to remember. So I would copy and paste the doctype and be done with it. But HTML5, oh sweet sweet HTML5 has done away with all that madness. Now we have the serene <!doctype html>. So clean and fresh, like a snowy field. This doctype causes all browsers to render in standards mode! Which is reason enough for you to start using it today. It is also case insensitive, so it can be <!DOCTYPE HTML>. <!doctype HTML>, or even <!dOcTyPe HtMl> if you’re feeling crazy.
Now that we have that out of the way let’s get on with the fun stuff—HTML5 video!
Traditionally if you have wanted video on your website you needed to use some type of extension— most likely flash. This is an issue because flash isn’t native to the webpage. That meant that people needed to download an extension to make your video work. Yes it’s a given that most people have flash installed. But perhaps not everyone does. Also, many mobile devices (including the 1000 pound gorilla in the room—iPhone) don’t support flash. So all of those great videos on your site are broken when you look at them on your shiny iPhone.
HTML5 fixes that issue by introducing the <video> element. Similar to the <img> tag, the <video> tag allows you to simply point to a source file and embed video natively in your markup in a couple of lines of code. And whats even better?! Mobile devices such as the iPhone/iPod touch, android devices, palm webOS devices, and even macs/pcs can watch your video. There is no better choice!
So how do we accomplish this miracle of modern technology? Hold on to your socks….
<video src=”new-years-eve.mv4″> </video>
There it is. Don’t worry, I’ll wait while you triple take…..
Yeah, it’s that easy…..with a couple caveats of course. After all, this is the web.
So how do the browsers feel about the above markup. As always that depends on which browser you are talking about. IE as always says “Bah Humbug”—so don’t even try. Chrome, Safari, & Firefox are a different story however. And this is where it gets a bit (but not much) tricky.
One of the things that is holding HTML5 up from completion is the addition of an audio and video codec from the specification. There are a couple of choices, but there isn’t consensus. And here is why. Firefox, the bastion of open source doesn’t want to pay the outrageous royalties involved to use the h.264 codec for video and the mp3 codec for audio. They would much rather implement the “open” Ogg theora and vorbis formats for video and audio. There is some debate about whether these codecs are up to snuff for such large scale deployment by people such as Google open source program manager Chris DiBona who recently said “If [YouTube] were to switch to Theora and maintain even a semblance of the current YouTube quality it would take up most available bandwidth across the Internet.” – Ouch
So Google and Apple decided to take the route of supporting h.264 for video and mp3 for audio. My understanding is that they reason that they have already paid those royalty payments and they don’t want to expose themselves to any potential litigation from the ogg people. Sound reasoning I suppose.
But this has left the poor <video> & <audio> tag from fulfilling their grand destiny of native video/audio for all! If you encoded your video in ogg then people who access it from a webkit browser (chrome, safari, mobile safari, mobile android, and palm OS’s browser are all based on the webkit rendering engine) won’t be able to see it. But if you encode the video in H.264 then your open source brethren at Firefox won’t be able to enjoy. What to do…..
Fortunately we have the <source> element! Huh? “There is a src attribute and a <source> element?” you are asking right now. Yep, for <audio> and <video> there is a <source> element that can descend so that you can call more than one source. Example of our updated markup:
A couple of things that you might have noticed that I added without telling you. The controls attribute. This is a nice little attribute that allows for a set of browser built in controls for your video or audio. This makes it very simple to add a nice play, pause, and start button. It is a boolean (true or false) value. By default it is not even present, which represents false. So if you leave it out altogether you won’t have any controls. It’s presence represents true. So you don’t need to put controls=”true”— the correct way to write it is controls=”".
Next you will see that there is our new friend the <source> element. I added two types of video here. H.264 for webkit browsers and ogg for firefox. Regarding the type attribute, from Mark Pilgrim’s great work Dive into HTML5 “
type attribute looks complicated — hell, it is complicated. It’s a combination of three pieces of information: the container format, the video codec, and the audio codec. For the
.ogv video file, the container format is Ogg, represented here as
video/ogg. (Technically speaking, that’s the MIME type for Ogg video files.) The video codec is Theora, and the audio codec is Vorbis. That’s simple enough, except the format of the attribute value is a little screwy. The value itself has to include quotation marks, which means you’ll need to use a different kind of quotation mark to surround the entire value.
The H.264 video is even more complicated. … We encoded with the H.264 “baseline” profile and the AAC “low-complexity” profile, then wrapped it all in an MPEG-4 container. All of that information is included in the
<source src="NewOrleans2006.ogv" type='video/ogg; codecs="theora, vorbis"'>
The benefit of going to all this trouble is that the browser will check the
<source src="NewOrleans2006.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
typeattribute first to see if it can play a particular video file. If it decides it can’t play a particular video, it won’t download the file. Not even part of the file. You’ll save on bandwidth, and your visitors will see the video they came for, faster.”
Now that everything is cleared up. You might also want to add a height and width to you <video> tag. So the final thing looks like.
<!doctype html> <html> <head> <title>HTML5 Video </title> </head> <body> <video controls=”" width=”400″ height=”400″> <source src=”new-years-eve.m4v” type=‘video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘> <source src=”new-years-eve.ogv” type=‘video/ogg; codecs=”theora, vorbis”‘> </video> </body> </html>
Go to my website and check out this example of HTML5 video.
There is much more to know about HTML5 <video> and this is only a tiny primer. For a much much more exhaustive look at HTML5 <video> check out the video section in Mark Pilgrim’s amazing work Dive into HTML5 (yes I realize how many time’s I’ve linked to that in this article. It is really that good of an online book).
Or you can always check out what the HTML5 specification has to say about video.
As always I appreciate any feedback (please correct me if you see errors or omissions). Thanks for reading and stay tuned for more in this series of HTML5 tutorials.
Comments are closed.
<< Multiply me