The HTML5 <video> tag is a lovely innovation that greatly simplifies the inclusion of videos in your web pages. While this isn’t a complete guide to using that tag, there’s a couple of issues I’ve had with it that deserve some discussion.
It seems that most browsers have a default behaviour of attempting to download the complete video to the user’s machine as soon as the page loads. While this makes for a slick experience for your visitors, it’s a potential bandwidth nightmare since everybody who visits your page will be downloading the video whether they want to watch it or not. Now, your users may or may not find this to be an issue depending on their connection speed, but you can be sure that you as a webmaster will have a problem if that page is popular with even a few people. My one page with an embedded video is responsible for well over 80% of this site’s total bandwidth, and I may well overshoot my hosting comapany’s bandwidth limit soon, which will start costing me actual money – enough to focus the mind.
Having scouted around for a solution to this, I came across the autobuffer attribute. If set to false, this professed to tell the browser that it shouldn’t download the video until the user clicked the Play button. That sounded perfect, but when I tried it nothing happened – browsers were still downloading the video regardless.
It turns out that the autobuffer attribute is now obsolete, and has been replaced with the preload attribute. This is upsetting, not least because there’s a lot less documentation around the web on preload than there is on autobuffer. But at least preload works – in most cases.
The preload attribute has three options:
auto: Preload as much of the video as possible
metadata: Just load the details of the video (e.g. length and the first frame)
none: Don’t preload anything
If we select none nothing of our video is loaded at all. This uses least bandwidth, but can make your page look a little odd. It’s useful to have at least something shown for a video waiting to play, so if you want to use this option it’s wise to include a banner image using the poster attribute. This is simply an image, usually a frame from the video, that is displayed until the user clicks the Play button.
<video width="640" height="360" poster="frame.jpg" preload="none"> <source src="video.mp4" type="video/mp4"/> </video>
The metadata option seems to be a good compromise. It won’t download the whole video, but it will show the first frame of the video and get the length information, so your visitors will know how much of their lives they need to commit up front.
<video width="640" height="360" preload="metadata"> <source src="video.mp4" type="video/mp4"/> </video>
Either of these is a vast improvement on the basic video tag, and your poor server will thank you for not making it cram quite so much data down its cabling.
And finally, the inevitable word on compatibility, because web standards wouldn’t be standards unless they were broken in at least some browsers. All these options work on the latest versions of Firefox and Chrome. Safari doesn’t appear to honour the preload attribute in any way. At the time of writing, their developer notes explicitly state that the metadata option isn’t supported, and my experiments with none have also proved fruitless. (All Safari tests were done on Windows, as I don’t have access to a Mac.) I only have Internet Explorer 8 at the minute which doesn’t support the <video> tag at all, so I can’t say how that behaves. I’ll try to find out what IE9 does soon.