HTML5 and Video Element

Written by Cedric on . Posted in Web Development

To stream a video on a web page before the HTML5 <video> tag, you had to embed an external flash player (player.swf) which requires to load a javascipt file (swfobject.js in our exemple) and the code looked like this:

<script type=’text/javascript’ src=’/embed/swfobject.js‘></script>
<div id=’mediaspace’>This div will be replaced</div>

<script type=’text/javascript’>
var s1 = new SWFObject(‘/jw/embed/player.swf‘,’ply’,’470′,’320′,’9′);

No need to use a third party player anymore using the <video> element in HTML5. Here’s how you would add a video to your page:

<video src=“/video/your_file.ogg”> </video
It’s gonna be as easy as integerating an image to a web page and definitly lighter code wise.  The browser itself provides the playback functionality without any need for plugins like Quicktime or Flash.

Safari (version 3.1 onwards) and Firefox 3.1b2 support <video>. Opera has released experimental builds demonstrating preliminary support.

Safari plays back MPEG4 (and at least on the Mac, anything that QuickTime can play). Firefox currently only supports Ogg Theora.

This lack of (default) codec support overlap can be overcome by providing both formats in the same <video> tag:

<video controls>
<source src=”video.m4v” type=”video/mp4″ /> <!– MPEG4 for Safari –>
<source src=”video.ogm” type=”video/ogg” /> <!– Ogg Theora for Firefox 3.1b2 –>

The following attributes are available:

  • src    The gives the address of the video
  • poster:This gives the address of an image to show when video data is not available
  • autobuffer: This hints to the user agent that the content is likely to be used
  • autoplay: This auto starts the video
  • loop: This will loop the video
  • controls: Choose whether to show video controls or not
  • width: The width of the video
  • height: The height of the video
To watch a great demo about dynamic content using html5 canvas and <video> tag:  go here using Firefox 3.5 or you can watch this video:
 {flv height=”225″}blog/DCI{/flv}
How did Paul Rouget did this ? Here is his explanation:

Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a <canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element (position: absolute;) on the top of the main <canvas/> element.A canvas element provides a method named drawImage which let you inject the content of a DOM element in the canvas (like a screenshot). It works with three kinds of elements: <img/>, <canvas/> and <video/>.When you click on the <svg/> button, the Javascript code launches the main video. Then, the main javascript loop is executed each 10 milliseconds. Here are key things that occur during the main loop:

  • first, the content of the video is injected in the main canvas. That’s why
    the canvas element looks like a video element;
  • second, the position of the 2 brighter areas of the canvas are computed
    (you have access to all pixels values);
  • third, the required transformation is computed (rotation, scale,
  • fourth, the content of the selected pattern is injected in the main canvas
    following the transformation.

A little drawing:


What’s cool with this demo?

  1. It’s built with native Open Web technologies: JavaScript + DOM, CSS and HTML 5 (canvas and video) that hundreds of thousand people are already familiar with.
  2. It’s Open Source by default. You can view the source and learn from it. This is one of the very reasons why the Web is so wonderful: it’s the mother of all generative technologies.
  3. It’s just the beginning (at least we hope it is) of very cool innovations around videos and special effects. When will we see a Web-based video-editing application? Who knows what we’ll collectively be able to build?
Pretty cool !!!!    😉

Tags: , , ,


is a a San Francisco based filmmaker - Founder of Story Eyed Media LLC. He is a graduate of the International Institute of Image and Sound of Paris, France. Over the past 10 years, Cedric has worked on documentaries and news reports around the world.

Leave a comment

City: San Francisco     Cell: 415-646-6560