The HTML 5 Video Element
HTML 5 makes adding video to your site a great deal easier with video tag. Issues of videos codecs, browser support and accessibility need to be resolved but somewhere down the line video will get a whole lot easier.
Not interested in the explanation? Go straight to the example.
Current best practice ¶
Current best practice is to use SWFObject to write a player like the JW FLV Media Player or Flow Player. Both of these are Flash players so if users don’t have Flash or JavaScript they get no video. Web authors can offer alternative HTML content through this method but it has always felt clunky.
A shiny new element ¶
Enter HTML 5 and the video element. No need to use a third party player - video is available within the HTML specification. Here’s how you would add a video to your page:
<video src="/video/your_video.ogg" controls="true">
Your browser doesnt support the video tag. You can
<a href="/video/your_video.ogg">download the video here.</a>
</video>
The following attributes are available:
<dl>
<dt>src</dt>
<dd>The gives the address of the video</dd>
<dt>poster</dt>
<dd>
This gives the address of an image to show when video data is not available
</dd>
<dt>autobuffer</dt>
<dd>This hints to the user agent that the content is likely to be used</dd>
<dt>autoplay</dt>
<dd>This auto starts the video</dd>
<dt>loop</dt>
<dd>This will loop the video</dd>
<dt>controls</dt>
<dd>Choose whether to show video controls or not</dd>
<dt>width</dt>
<dd>The width of the video</dd>
<dt>height</dt>
<dd>The height of the video</dd>
</dl>
Issues ¶
There are ongoing issues that need to be resolved, not least of which is browser support. Currently Firefox supports the ogg codec whilst Safari supports h.264. Opera is also supporting the .ogg format. Secondly anyone who has worked with videos will understand the plethora of codecs. Some of these are open formats, others are proprietary. For the proprietary codecs browser vendors will need to decide whether to fork out for expensive licenses or just support open codecs. Finally the accessibility question needs to be addressed. Should accessibility be embedded in the browser player (subtitles, transcript) or should this be handled another way?
Likely to be a while ¶
Ubiquitous support for the video element is likely to be a long way off but at some point using video on a site is going to be much easier and developers won’t need to rely on third party players - it will be part of the browser.
Further reading ¶
- HTML 5 Working Draft - The Video Element
- YouTube’s HTML5 Page
- The Dailymotion HTML5 Demo
- The HTML5 Video Tag’s Fatal Flaw
Tags
Can you help make this article better? You can edit it here and send me a pull request.
See Also
-
Techno kittens love HTML5
The kittens are jumping up and down. Why? HTML 5 offers an open set of standards for drawing animations and complex user interfaces. -
Testing with IE6, IE7 and IE8 on VirtualBox
I've recently moved from using Parallels for browser testing to Sun's Open Source VirtualBox. Here's a walkthrough on how to get a browser testing suite for free on OSX or Ubuntu. -
CSS3 Tour: border-radius
Border-radius allows you to create rounded corners with just CSS without the need for graphics or JavaScript. If you are not using it yet here's an explanation.