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
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>
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.
[See the HTML 5 video demo.]
- [HTML 5 Working Draft - The Video Element]
- [YouTube’s HTML5 Page]
- [The Dailymotion HTML5 Demo]
[The HTML5 Video Tag's Fatal Flaw]
: http://shapeshed.com/examples/HTML5-video-element/ : http://blog.deconcept.com/swfobject/ : http://www.longtailvideo.com/players/jw-flv-player/ : http://flowplayer.org/ : /video/your_video.ogg : http://www.whatwg.org/specs/web-apps/current-work/#video : http://www.youtube.com/html5 : http://blog.dailymotion.com/2009/05/27/watch-videowithout-flash/ : http://sandfly.net.nz/blog/2009/05/the-html5-video-tags-fatal-flaw/
Have an update or suggestion for this article? You can edit it here and send me a pull request.