This article begins a “mini-series” of our in-depth coverage of important new elements in HTML5 to help you create media-rich pages that will work in any compliant browser. It’s recommended that you also read the prelude to this article, Multimedia In HTML5.
HTML5’s video element is conceptually easy to work with, since at bottom it’s been designed like the <img> tag…just code and go:
<video src="sample.mp4" width="640" height="480"></video>
Unfortunately, in the real world, things aren’t quite so easy. Due to licensing and other restrictions, you can’t simply assume that the user’s software will properly display your video in MPEG-4/H.264 format, so at this point you’ll have to supply the same video in open formats as well as providing a Flash-based fallback for pre-HTML5 browsers–something like this:
<video controls width="640" height="480" poster="sample.jpg"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogg"> <source src="sample.webm" type="video/webm"> <object width="640" height="480" type="application/x-shockwave-flash" data="player.swf"> <param name="movie" value="player.swf"> <param name="flashvars" value="controlbar=over&image=sample.jpg&file=sample.mp4"> <img src="sample.jpg" width="640" height="360" alt="Sample" title="No direct video playback capabilities, so please download the video below"> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="sample.mp4">"MP4"</a> Open Format: <a href="sample.ogv">"Ogg"</a> WebM Format: <a href="sample.webm">"WebM"</a> </p>
Since this isn’t the kind of thing most developers like to memorize, it’s good that someone has written up a handy free code generator that lets you specify all your parameters and video sizes and so on. But there’s more nitty-gritty to deal with, specifically transcoding those extra formats.
Preaching To The Converted
Unless you have lots of video files and an actual software budget, your best bet is free conversion software. Currently, the best selection for that is Handbrake, which is fully open source, runs on Windows, Mac OS X, and Linux, and will convert most multimedia file formats to MP4 or Ogg Theora (when we get to audio, you’ll find that it works just as well for those formats, too). If you’d rather be modern, OS-independent, and stay in the cloud, sites such as MediaConverter and Zamzar can accommodate you with free online transcoding services (the latter site even supports the relatively new WebM format).
The full list of attributes for the HTML5 video element at this time includes the following, with usage notes:
- src – The URL of the video. This overrides the source element, if present.
- poster – The URL of a still picture to show while the video is not playing.
- preload – This can have the value none, metadata, or auto. Auto will download the entire file if possible; metadata will download just the parameters so that the length, size, and type of the video can be identified, and none will do nothing, which saves bandwidth.
- autoplay – This boolean, if present, triggers the video to play as soon as it is fully buffered or ready to stream.
- loop – Also a boolean; if loop is present, the video will repeat endlessly in the absence of user intervention.
- audio – This attribute, which controls the audio portion of the video, is still in development. Currently, it can take only a single value: muted, which means that the audio volume will initially be set to zero. The intent is to allow an autoplaying video to start and get the user’s attention, but without blaring audio that would cause the user to close the entire tab in disgust 🙂
- controls – A boolean attribute that specifies the browser should provide a set of default video controls. If it doesn’t appear, you’ll have to design and code your own controls.
- width, height – these size attributes control the size of the area reserved for the video on the page, but not necessarily its exact dimensions.
While it takes a bit more work, generally in the Javascript department, to create your own controls and error handling, all it takes is some CSS to modify the look of the video element:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>File in same directory</title> <style type="text/css"> video { width: 800px; height: 600px; position: relative; } </style> </head> <body> <P> <video source src="airplane.webm" controls autoplay> Your browser does not support the video tag. </video> <P> </body> </html>
You can see it in action here!
Currently, this works in Google Chrome and Opera 11, but not in Internet Explorer 9, Firefox 3.6 or Firefox 4.0 beta 10.