Painlessly Mix Media and Data Streams with Mozilla's New Popcorn 1.0

Mozilla recently released version 1.0 of its new JavaScript framework for HTML5 media, called Popcorn.

You may be thinking, 'I know all about HTMl5; I can interact with media just fine.' Maybe, but Popcorn looks to make HTML5 media really, really easy to use.

For example, say you were showing a documentary film (or commercial advertisement!) about New York City, and wanted your users to see current hotel prices in the neighborhood presently on screen. Youtube provides this time-keyed link functionality, but those links appear in the video itself, and then you're tied to Youtube. But timing your link requests from a video to a datastream outside the video can be tricky, or at the very least annoying.

Mozilla's Popcorn.js is designed to make this kind of mingling of media and non-media streams painless and reliable. Here's their blurb:

Popcorn.js utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API, and provides a plugin system for community contributed interactions.

Popcorn has dozens of plugins for common services and APIs, ranging from Twitter, to Maps, to media events, and more. But if it doesn’t do what you need right now, you can write your own plugins quickly and easily.

We'll get to the plugins later. But for the lazy-but-eager coder in you, here's how easy it is to key a textual footnote to a particular time-range in a video using Popcorn.js: 

   var pop = Popcorn("#ourvideo");

         // add a footnote at 2 seconds, and remove it at 6 seconds
         pop.footnote({
           start: 2,
           end: 6,
           text: "Pop!",
           target: "footnotediv"
         });

That's so short, it's less than a no-brainer. A million monkeys could write that JavaScript by accident.

But Popcorn.js opens a lot more doors than time-keyed events. To see what I mean, take a few minutes to browse the interactive documentary 'One Millionth Tower', created with Popcorn and premiered at Wired.com. The first thing to notice: the 3D model of the highrise project takes its weather from Toronto's actual weather conditions. So it's the reverse of pulling times out of a video: it's pushing weather data into a WebGL rendering. Sure, doable without Popcorn, but very simple with it.

The API is tiny but quite specific. Browse here, if you just want to develop with Popcorn. But Mozilla made the project fully open-source, and open requests for your involvement are scattered all over the Popcorn developer site -- so consider checking out the source too.

One of Popcorn's coolest features for rapid development is its already-considerable load of plugins, of which the above code's footnote is one. Other plugins currently available include:

• Openmap
• Code
• Facebook
• Googlefeed
• Linkedin
• Lowerthird
• Pause plugin
• Processing.js
• Timeline
• Tag This Person
• Lastfm
• Image
• Wikipedia
• Webpage
• Flickr
• Google Map
• Twitter
• GML
• Mustache
• Wordriver
• Attribution
• Subtitle

Some of these are very practical (Attribution), others are just flashy (Wordriver displays a periodically fading string of text). Notice that many of these plugins are specifically designed to break the ('fourth') wall between audiovisual representation of the world, and direct web access to things about the real world.

The idea isn't new, but now it's easy.

Follow the delicious buttery scent to the splash page (which includes some well-done promo videos) or the developer's site (a quiet, JavaScript-y gray). Or read the documentation raw (which, you may not be surprised to learn, does not address iOS-specific HTML5 audio/video issues) -- but maybe first run some demos to see what Popcorn can help you do.

Update: RAMP announced its official support for Popcorn.js at the Mozilla Festival in London last week. Looks like a significant endorsement from a major player in web content optimization.