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'); s1.addParam('allowfullscreen','true'); s1.addParam('allowscriptaccess','always'); s1.addParam('wmode','opaque'); s1.addParam('flashvars','file=/videos/flvplayer.flv'); s1.write('mediaspace'); </script>
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:
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:
Adobe Flash Player not installed or older than 9.0.115!
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, translation);
fourth, the content of the selected pattern is injected in the main canvas following the transformation.
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.
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?
Hi Albert, No idea when the camera will be released, they said end of 2010 but they are usually delays... I would also consider what the other brands are baking ;-) Cheers
Thanks for information!
Any idea on when will this be officially released? I'm now having the hots for this new Panasonic camcorder. I hope this will be available on some camcorder rentals. Idaho Falls is where I usually rent camcorders and stuff and I'm looking forward to see this on their shelves once it gets released so I can try it out. It seems to be a great camcorder for independent filmmakers.