For years, digital video has been soaring, just like still digital images 15 years earlier. It's now easy to capture video, editing it is now possible thanks to user-friendly applications and with broadband becoming more common, the pipes are now big enough to download video. The only caveat is that Web browsers have not evolved over time to include video, because the dominant browser vendor had little reason to invest in it. Proprietary plug-ins such as Flash, QuickTime or Windows Media have been until now the only way for Web developers to include video in their Web application. Unfortunately, resorting to proprietary plug-ins and patented codecs has drawbacks. I won't get into the patent and proprietary code issues and focus on the fact that resorting to plug-ins for video brings some limitations to what one can do. Plug-ins are like boxy islands of information on a page. They can do wonders by themselves, but they have a hard time being mixed with the rest of the Web content. It's hard for example to interact with a Flash video, unless you write the complete page in Flash. But all of this is now over, since Firefox 3.5 and other modern browsers support native video using the new <video> element. Now, a native video is just an element in a page that you can manipulate with the DOM, style with CSS etc.

This is why my friend Paul Rouget has written an amazing demo, which uses no Plug-in technology, juste native Web technologies such as JavaScript, DOM, and HTML 5 elements (video and canvas). If you run Firefox 3.1 Beta 3 or Firefox 3.5 Beta 4 or later, you can visit Paul's Dynamic Content Injection demo. If you want to experience it yourself, just Get your copy of Firefox 3.1/3.5 Beta, install it and visit Paul's demo. For those of my readers who are stuck with another browser for some reason (and have to use the old proprietary plug-ins), I'm made a quick screencast below:

Screencast of Paul Rouget's Dynamic content injection via canvas and video elements

(If you can't view this video for some reason, here it is in Ogg Theora format (11MB) and MPEG-4 format (31MB))

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?

Want more explanations of what happens under the hood? Just View Source (Ctrl-U)[1], read the code and head over to Paul's explanations. Then imagine what you can do with this... and build it!


[1] Try that with a Flash applet ;-)