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?
- It's built with native Open Web technologies: JavaScript + DOM, CSS and HTML 5 (
canvasandvideo) 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?
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!
Notes
[1] Try that with a Flash applet 
19 réactions
1 De davidb - 15/04/2009, 17:01
Thanks for this post. Innovation here has huge potential for making things more accessible, and huge potential for making things less accessible. The road ahead will be exciting and challenging.
2 De Laura - 15/04/2009, 17:07
Hi Tristan,
Do you have any ideas for innovations to provide accessibility for this demo? Or ideas for the canvas and video element's accessibility in general? Canvas and multimedia accessibility has been an ongoing discussion in the HTML5 WG and WAI PFWG.
Thanks,
Laura
3 De Boris - 15/04/2009, 17:55
What's not cool with this demo:
1) Sniffs for Firefox, not Gecko
2) Gets even that sniffing wrong (doesn't detect m-c builds correctly, for example).
It's a pretty perfect example of everything that's wrong with browser sniffing.
4 De Jadd - 15/04/2009, 18:30
I remember when Håkon Wium Lie presented the idea (and a prototype) of the video tag to the world at a gathering of representatives from Microsoft, Mozilla and Opera. It's cool that the idea caught on and that standards can evolve and include innovation when competitors cooperate.
5 De Matt - 15/04/2009, 18:32
Nice screencast. The video element is gonna rock and the canvas element rocks already!
"It's open-source by default"
Javascript can be obfuscated, just like Google does with Google Docs or Gmail...
http://www.gnu.org/philosophy/javas...
6 De Paul - 15/04/2009, 18:35
@Boris: fixed
7 De Tristan - 15/04/2009, 18:36
@Boris: I totally agree with the fact that the sniffer is terrible. Paul Rouget was asked to whip up one *after* the demo was posted, because it's busted in some nightly builds. Paul's working on it as I write this.
On a general note, sniffing is almost 100% of the times wrong, as one should actually test for the feature he wants to use rather than rely on UA sniffing. But in this case, it would not work.
8 De Jadd - 15/04/2009, 18:38
I just had a though: will audio be just as cool as well? Will will be able to play an audio file in a web page without any plugins?
9 De hopeful - 15/04/2009, 19:06
The HTML 5 wg seems to operate a snail's pace - when can we expect to see that spec actually completed and out there and have support in browswers?
10 De Tristan - 15/04/2009, 19:16
@Jadd : Audio seems promising. See https://developer.mozilla.org/En/HT... for more details about what Firefox 3.5 will enable you to do with this element...
@Hopeful: specs always take a long time... At Mozilla we do what we can to implement the parts of the spec where there is consensus. Video, Audio, Canvas are good examples. Other browser vendors also try pretty hard. See Safari, Chrome and Opera's latest progress on HTML 5. Now for Internet Explorer, I don't know. Send a letter to Steve Ballmer!
Seriously, Microsoft will move forward if the other browser vendors put enough competitive pressure and Web authors use HTML 5 to provide a better user experience.
11 De Paul - 15/04/2009, 19:23
@Jadd: yes
12 De Matt May - 15/04/2009, 19:32
"1 Try that with a Flash applet ;-)"
Actually, adding a View Source to a Flex app is as easy as adding a viewSourceURL attribute:
http://marxsoftware.blogspot.com/20...
13 De Tristan - 15/04/2009, 19:38
@David Bolter : indeed. We need to make sure that the Web remains accessible, even while we move from a document model (HTML and SVG style) to an application model (where JavaScript and programmatic stuff gain importance).
@Laura: a couple of weeks ago nobody on this planet had seen something like this based on Open Web technologies. No surprise that the content of this demo is inaccessible for now. We're in the very early days of this stuff, and no one has yet thought about it. Now the good news is that the
videoandcanvaselements are being discussed inside the HTML WG and have built-in alternatives for User Agents used by people with specific needs... So there is possibility to work on accessibility of these elements. On the other hand, the "hackable" nature of these Open technologies are wonderful when it comes to accessibility. Paul Rouget is working on other video-based demos that could foster accessibility. See for example his motion-tracking demo: http://www.mozbox.org/pub/tracker/ (needs Fx3.1Beta3). This is just the beginning14 De Tristan - 15/04/2009, 19:44
@Matt May: the article you mentioned says "
viewSourceURLcan point at any link regardless of any on no relationship of the linked to content to the application". On the other hand, Open Web technologies are "Open Source by default" (and yes, I've heard about JS obfuscation, but it's an exception.)15 De Laura - 15/04/2009, 21:30
Hi Tristan,
Yes. It is good to start thinking about accessibility from the onset to find solutions.
Thanks for the links. I've added the examples to the Issue Wiki Page.
16 De Alexis - 15/04/2009, 22:12
Tristant, don't you think that opening source should be the developer decision ?
17 De art2code - 15/04/2009, 23:02
excellent!
18 De Lampard - 16/04/2009, 08:11
Really cool screencast. Thanks for shring.
19 De John Drinkwater - 16/04/2009, 20:04
Paul, if you’re listening, the Dynamic Content Injection page really needs a linked SVG as well as embedded SVG, maybe for Firefox’s logo. Also, how about a duplicate of the canvas pong demo in SVG with Gecko’s new SMIL support?