Using the <video> element
Probably the biggest and most talked about feature in HTML5, is the addition of browser video support through the
<video> element. Currently, in order to play a video file within a web page
web developers mainly have to resort to embedding an Adobe Flash™ video file within the code. With the introduction of the
<video> element, this will change.
<video> element is very similiar to the
<audio> element with regards to the attributes that are available to it:
src— a valid URL to the video file itself
autoplay— a boolean indicating whether the video should be played automatically
loop— a boolean indicating whether the video should be played repeatedly
controls— a boolean indicating that the default media controls should be displayed by the browser
As well as these, there are some additional attributes available to the
preload— indicates to the browser whether optimistic downloading of the video itself is required, or if metadata alone is all that's needed. Possible values are as follows:
none— indicates that the video is not to be preloaded (as it probably won't be required)
metadata— the video is probably not going to be required but it's metadata (e.g. dimensions, duration) is desirable
auto— informs the browser to attempt to download the entire video
(empty string)— means the same as
poster— the URL to an image file to be displayed when no video data is available.
width— the width of the video, in CSS pixels
height— the height of the video, in CSS pixels
So, from that, the following HTML would automatically play the file
upc-tobymanley.theora.ogv, and provide some default media controls:
<video src="upc-tobymanley.theora.ogv" autoplay controls></video>
You can see a working example of this, as long as you're using a browser that supports the HTML5
<video> element. The table below displays the
current support for the
<video> element amongst today's browsers (as of 5th April 2010).
|Internet Explorer (all)||N||N|
The first thing to notice about this table is that there are only two file types that are supported by the
<video> element, OGG and MP4. The reasons for this are varied and are still being
argued about elsewhere on the web and are not relevant here.
As the table shows, most of the major browsers (barring Internet Explorer) support playing of a video file through HTML5's
<video> element. Like the
<audio> element, you can also
make use of the
<source> tag in order to stack the different file types allowing the browser to try each (in this case there's only two) one until it finds one it can play. This can be done as follows:
<video autoplay controls width="512" height="300"> <source src='upc-tobymanley.theora.ogv' type='video/ogg; codecs="theora, vorbis"'> <source src='upc-tobymanley.mp4' type='video/mp4; codecs="mp4v.20.8, samr"'> Your browser does not support the <code>video</code> element. </video>
This code can be tested in your browser and show you that if either of the files cannot be played, e.g. in the case of Internet Explorer, a message will be shown advising this.
In place of this message you could embed an Adobe Flash™ version of the file in order to provide a "catch all" fallback for Internet Explorer:
<video autoplay controls width="512" height="300"> <source src='upc-tobymanley.theora.ogv' type='video/ogg; codecs="theora, vorbis"'> <source src='upc-tobymanley.mp4' type='video/mp4; codecs="mp4v.20.8, samr"'> <object type="application/x-shockwave-flash" width="512" height="300" wmode="transparent" data="flvplayer.swf?file=upc-tobymanley.flv&autoStart=true"> <param name="movie" value="flvplayer.swf?file=upc-tobymanley.flv&autoStart=true" /> <param name="wmode" value="transparent" /> </object> </video>
Test this code in Internet Explorer for yourself and see the results.
You may have noticed the use of the
codec attributes within each
source tag. These are used to provide the browser with further information on the video file in order to
facilitate with playing it. More can be read about the different MIME types and codecs available in the W3C specification.
As usual, browser support for this new element is currently patchy. There's also a large debate going on at the moment as to whether the
<video> element will kill the usage of Adobe Flash™ as the
method of adding video content to websites. I'm not sure it will kill it completely, but nevertheless I think it's fair to say that it's here to stay and will provide web developers with a cleaner, easier approach to adding