Video on the web has always been a bit disappointing. After all, it’s pretty much just like television, only smaller. Unlike the rest of the web, video is just as much a passive experience in your browser as it is anywhere else.
Mozilla would like to change that. The company’s effort to bring a more interactive video experience to the web is known as Popcorn.js and it recently reached 1.0 status. If you’d like to play around with Popcorn, head on over to the Mozilla site and download a copy. Popcorn uses HTML5 video features and at the moment works best in Firefox and Chrome.
At its core Popcorn is about making HTML5 web video into something more than just another television.
One Millionth Tower uses some tricks beyond Popcorn (like WebGL for some 3D elements), but most of its coolest effects — like the way the environment in the film changes based on the real-time weather conditions and time of day at the Toronto high-rises where the documentary was filmed — are all courtesy of Popcorn.
If it happens to be snowing in Toronto when you watch the film, it will begin snowing in the virtual world of One Millionth Tower. At other points in the film Popcorn pulls outside information from Flickr, Wikipedia, Google Maps and of course Yahoo Weather. Pretty much any web service with an API can be plugged into an HTML5 video in real time with Popcorn.
A more mundane, but potentially more widespread, use for Popcorn, is subtitles. Using Popcorn a set of subtitles attached to a video could be sent on to an online translation tool and converted to whatever language you wanted on the fly. Popcorn could then pipe the translation back into the video. In other words, subtitle your movie once and anyone will be able to understand it.
So how does Popcorn work? Well, Popcorn.js takes the native HTMLMediaElement properties, methods and events — collectively known as HTML5 video — and normalizes them into an API. The API has a plugin system so developers can contribute and reuse code for common tasks. In fact Popcorn already has dozens of plugins for most popular web services like Twitter, various maps, Facebook, Processing.js and of course all the services mentioned above in conjunction with One Millionth Tower.
To get started making Popcorn movies head on over to MozillaPopcorn.org, grab the source code, read the documentation, check out the plugins and try Popcorn Maker. Also note that, if you prefer, Popcorn can be checked out through GitHub.