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:
<div id=’mediaspace’>This div will be replaced</div>
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:
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:
<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:
- 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
- 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?
- 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.
- 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 !!!! 😉