Getting Started with HTML5 Video
By Richard Shepherd
23 August 2010 | Category: Code, HTML5
HTML5 Video. It just sounds sexy. Even typing it stirs an excitement inside me usually reserved for theme park rides and new episodes of Family Guy. It’s one of the most lauded features within the new HTML spec, and also one of the most divisive.
Perhaps not divisive in the web community, most designers and developers seem to love the idea of it, but certainly divisive in the real world of cross browser support, licensing and (dare we even mention it) Adobe Flash.
HTML5 Video in Safari with native browser controls
Let’s start at the end. Internet Explorer 9 promises to support WebM video, one of the three main contenders to the HTML5 video throne, but from IE8 backwards you’re out of luck. In short, you need to use Flash. The same is true of all but the most recent versions of other major browsers, which of course poses a very relevant question.
Why Use HTML5 Video at All?
It’s a great question and, as I’ve mentioned, a divisive one. There are myriad reasons why and we’ll go on and look at a few of them. But if your users follow the usual browsing trend the chances are they won’t be able to see the video and you’ll need a fallback to Flash.
Even when IE9 makes it’s debut to the masses there will still be a legion of IE8, IE7 and IE6 users, together with other older browsers, that will need you to keep dipping your toe in Adobe’s pool.
I need to add a caveat to this article. I live in the real world and I work on a site with millions of real users. The vast majority of these users have browsers that don’t support HTML5 video and I expect that’s the same for many of your sites too. As much as we want everyone to use Chrome on OSX it’s not going to happen so you will need to create a Flash fallback for the foreseeable future. I’m talking years here, not months.
There are some other problems with HTML5. There are three major camps emerging each championing a different video codec (a way to compress and decompress video files). As of writing there are some content protection issues (digital rights management) and some features, like full-screen video and native keyboard support, have yet to be fully fleshed out.
So Why Bother?
I think any good web practitioner is a pioneer, always seeking out new technologies and techniques to bring colour and life to their site. If you’ve got this far then you’re one of those people.
HTML5 video promises a wonderful environment to create unique video experiences, styled with CSS and controlled with JavaScript. A HTML5 video is just another element in the DOM which we can read and write to, and this allows us far more customisation on-the-fly than Flash ever could. It’s accessible, it’s standards compliant, and above all it’s simple.
YouTube are already delivering some HTML5 videos, and Vimeo have hopped on the bandwagon too. More and more sites are offering up the format, experimenting with it, and creating new and exciting ways to use video on their site. Check out the links at the end of this article for more places to check it out – just not with IE ;)
The YouTube HTML5 Video Player
Need More Reasons?
DOM, Meet Video
They’ve been flirting for some time now but finally the DOM and video can make it official and head out on a date. You can position, float and z-index video till dawn, indeed anything you can do to a div you can do to a video element. No more of those pesky plugins that make Flash elements disappear if you have lightboxes – HTML5 video will play nice with the rest of the kids and, more importantly, be under your complete control thanks to JavaScript.
Video, Meet CSS
It doesn’t end there. As a DOM element HTML5 video can be styled. And since the only browsers that support it also support CSS3, in some form or another, it means you can add (webkit) transitions, box shadows, hover effects and all kinds of stylesheet goodness to make your video blend seamlessly into your page.
Keyboard, meet Video
Although only currently supported by Opera, all browsers will soon support keyboard accessibility of videos without any additional code. As Bruce Lawson has noted it’s almost impossible to TAB in and out of a Flash video, which is a real problem for those users without assistive browsing technology.
Add these new features together, throw in a dizzy helping of JavaScript, and you just know that someone, somewhere will create a HTML5 video editor.
Using HTML5 Video on your Site
In days of old when Knights were bold the interweb got all confused about anything that wasn’t text. Netscape and Mosaic decreed that images should be tagged up as <img> which, to be fair, makes some sense. But the W3C didn’t approve and they introduced the <object> tag. As the saying goes “you snooze, you lose” – the web had already adopted the Netscape/Mosaic method.
Then things got really strange. When the forerunner to Flash hit the web the W3C again suggested the object element but Netscape went ahead and created the <embed> element, which the W3C refused to validate. The resulting confusion gave us the wonderful markup-soup that is Flash video.
1 | <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/Sv5iEK-IEzw?fs=1&hl=en_GB" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="100" height="100" src="http://www.youtube.com/v/Sv5iEK-IEzw?fs=1&hl=en_GB" allowscriptaccess="always" allowfullscreen="true"></embed></object> |
Without whining about the aesthetics of that, wouldn’t it be nice if we could simplify it to just: <video src=”myVideo.ogv”></video>
Surely it’s not that simple? Well sorry to disappoint you but it is. In fact, because it’s HTML5 the quotes are optional too so it’s two characters longer than it needs to be. I’m not even going to insult you by explaining that code.
But how about we give this baby some shizzle?
1 | <video src=myvideo.ogv width=640 height=480 controls poster=myImage.jpg></video> |
I think the only two things I need to explain here are controls, a boolean which displays the browsers native controls, and poster which is an image to display whilst the video is downloading. If you only specify one size attribute, the video will automatically resize the other maintaining the video’s aspect ratio.
There are other attributes we can throw in but as yet there is limited cross browser support for them. They include loop, autoplay, and autobuffer.
Need a fallback for those browsers that don’t support HTML5 video? That’s easy too:
1 2 3 | <video src=myvideo.ogv width=640 height=480 controls poster=myImage.jpg> <a href=myvideo.ogv>Download this video.</a> </video> |
Codecs and Acronyms
Of course this does pose the question, what on earth is an .ogv file? Well until fairly recently it was a fairly obscure video file. It gets worse it’s not the only one and it won’t work in all browsers.
Yep, cross-browser compatibility rears it’s ugly head once more. There are (currently) three codecs we need to worry about the main reason seems to be browser vendor’s personal preference and their aversion to using patented technology. Take our old friend the .mp4 file, which is familiar to anyone with an Apple device. MP4 files are created with the H.264 (MPEG-4 AVC) codec and there are licensing issues a-plenty surrounding it, which is probably why only Apple (Safari) and Google (Chrome) are supporting it.
Partly because of this we are seeing the rise of two comparative new-comers to the video field – Theora and VP8. I’ll try to keep this brief – Theora is royalty-free and therefore can be used in any form without a problem. You’ll most often see .ogv files for videos encoded with this codec. It’s best friend is Vorbis audio (.ogg files), similarly royalty free. Browsers that support this type of video include Firefox, Chrome and Opera.
VP8 (stay with me, we’re nearly done with this) came from On2 (the same company behind VP3 which then became Theora). On2 was bought by Google earlier this year who then waved a legal magic wand and made the technology royalty-free. It’s more complicated than that, but I’m not a lawyer, suffice it to say anyone can use it. The VP8 codec creates .webm video files.
That Last Bit Bored Me
Me too, but it’s important and I encourage you to read a little more on these codecs and the implications of using them.
Here’s a summary of which browsers support what:
- Theora (.ogv files) – Firefox 3.5+, Chrome 5.0+, Opera 10.5+
- H.264 (.mp4 files) – Safari 3.0+, Chrome 5.0+, iPhone 3.0+, Android 2.0+
- WebM (.webm files) – Internet Explorer 9 (yay!), Firefox 4.0+, Chrome 6.0+, Opera 11.0+
NB. The file extensions I’ve noted here are the most often used but you can encode videos of different types with different extensions – most of us needn’t worry too much about that though.
For an in-depth look at the dizzy world of video and audio codecs as they relate to HTML5, check out Mark Pilgrim’s fantastic article.
A Real World Example – It’s Easier Than it Seems!
Let’s return to the real world of digital camcorders and basic video editors like iMovie and Windows Movie Maker. Go ahead and record, edit and output your movie as normal. Now, head on over to http://www.mirovideoconverter.com/ and download the Miro Video Converter.
The Miro converter will encode .ogv, .mp4 and .webm in it’s sleep, so create your three versions. Three versions seems like overkill but for now it’s the only way we can support those browsers that support HTML5 video. Strictly speaking you could forego the .webm file until IE9 is released.
And finally, here’s the code we’ll use:
1 2 3 4 5 6 7 | <video width=640 height=480 controls poster=myImage.jpg id=videocontent> <source src=myvideo.ogv type=video/ogg> <source src=myvideo.mp4 type=video/mp4> <source src=myvideo.webm type=video/webm> <!-- You can even put your flash video code here as a fallback for internet explorer users --> <a href=myvideo.mp4>Download this video.</a> </video> |
And there you have it, all three major formats supported. Head over into your stylesheet and apply some lovely CSS3 effects to #videocontent. Of course the video element can have any ID or class name you like.
Further reading
As you can probably tell HTML5 video is a huge topic and at the same time relatively easy to implement. You can keep it as simple as the code above so you can delve deeper into the world of codecs and licensing. In case you feel the need to find out more, here are some of the sites I used to put together this article.
- http://www.webmproject.org/
- http://www.vorbis.com/
- http://mpeg.chiariglione.org/
- http://www.getmiro.com/
- http://dev.opera.com/articles/view/introduction-html5-video/
- http://diveintohtml5.org/video.html
- http://www.youtube.com/html5
- http://vimeo.com/blog:268
- http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video
- http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2
So what do you think? Will you be using HTML5 video on your site soon or will you stick with good ole Flash?
We look forward to hearing your comments and seeing how you implement HTML5 videos on your sites with JavaScript and CSS fun and trickery!
Follow @thinkvitamin on Twitter Please check out Treehouse
