I’ve been writing some automated tests for the new <video> work in Firefox 3.5 and it’s been incredibly fun. I spent some time in the trenches at Real Networks and dealt with accessing embedded video in the browser so I really appreciate how much nicer <video> is than embedded players like Real and Flash.
People talk a lot about embedded plugins being *”stuck in a box”* and while this is partially true I don’t think it’s descriptive enough. Embedded players like RealPlayer and Flash open up methods that can be called from javascript, so you do have some ways of interacting with the box, but it’s limited to somewhat rigid pre-defined interfaces. It’s also worth noting that using these interfaces just doesn’t **feel** like web development the way doing regular JavaScript and DOM feels. It’s not dynamic and you’re limited to only doing **what the plugin authors have already thought of**. The beautiful thing about the browser as a platform is that it enables usage far beyond what the original creators have intended.
Using <video> **feels** like the web. You resize it by setting size attributes the same way you would an interface node. You seek by setting the currentTime attribute, you can listen for the time changes to create your own interface by adding a listener for “timeupdate” events. You can write interfaces around <video> without switching contexts because it’s not a foreign technology jammed in to the browser. Here is some javascript that implements a few video controls.
var v = document.getElementById("v1"); document.getElementById("playDiv").onclick = function(e) {v.play()} document.getElementById("pauseDiv").onclick = function(e) {v.pause()} document.getElementById("reloadDiv").onclick = function(e) {v.load()} document.getElementById("seekDiv").onclick = function(e) { v.currentTime = document.getElementById('seekField').value; }
Isn’t that beautiful! Maybe I’m overly excited because I’ve had to deal with this using older technologies but this just **feels** good, and if it feels good then I know people are going to get excited about it and build cool stuff.
Why not this:
document.getElementById(”playDiv”).onclick = v.play;
The browser/plugin APIs do offer predefined messaging, but also support arbitrary messaging. Real Networks had their own chrome, true, but with Flash anyone can roll their own chrome (and control APIs).
Most of the “Plugin Prison” effect is due to how greatly the browsers vary in what little integration they offer to third-party cross-browser rendering. I’d like to see browser vendors open up more here.
Here’s a good introduction to the range of JavaScript control over video supported by the current range of major browsers:
http://labs.adobe.com/wiki/index.php/Flash-Ajax_Video_Component
jd/adobe
@John Dowdell: Let’s see… Free and open or “commercially available” and closed… Tough choice! But I’ll keep my money, save myself the trouble of learning actionscript and be able to deploy without compiling ;P
I too like the deeper integration that the Video tag provides, especially around mixing it more deeply into the UI of the page using CSS effects, SVG effects, etc. John is right though that Flash offers pretty deep integration abilities currently, especially when you use the ExternalInterface API to bridge between Flash and JavaScript. One cool thing that AIR has is the ability to take a ’snapshot’ of what is being rendered by the browser (Webkit in its case) and then manipulate this using Flash effects; this is not supported by the Flash plugin however. SVG can do something similar with the foreignObject tag (which Firefox, Safari, and Opera now support).