Co.Design

Popcorn.js Lets Web Filmmakers Fuse Video With Interactive Design

The open-source toolkit from Mozilla uses the power of HTML5 to let web filmmakers create innovative interactivity around their videos.

Unless you’re Chris Milk and get to regularly collaborate with Google on jaw-dropping video/interactive fusions, adding interactive design to your web filmmaking is a tall order. But it shouldn’t have to be that way--which is why Mozilla created Popcorn.js, an "HTML5 Media Framework" for fusing online video with imaginative web design. But this isn’t merely wallpaper to hang around a Vimeo window: Popcorn uses Javascript to link real-time data visualizations, social media, and supplemental media to the video playback. This online documentary used Popcorn to synchronize clickable footnotes and other factual extras alongside the video playback:


[The video depicts a fictional story, while the sidebars display real-time social and location information]

Granted, this is nowhere near as complex as, say, "The Wilderness Downtown." But it’s a hell of a lot better than those cartoony YouTube annotations. And Mozilla is pushing hard to expand Popcorn’s creative possibilities: it recently sponsored a hackathon in San Francisco teaming up marquee-name filmmakers like Steve James (who codirected "Hoop Dreams") with creative-coding partners, who built 3-D visualizations, personal Flickr feeds, and other interactive layers into the online video experience in a matter of hours using Popcorn’s simple Javascript libraries.

But even "simple Javascript libraries" might still be too advanced for some filmmakers (yours truly included), so Popcorn comes with a companion web app called Popcorn Maker, which provides a n00b-friendly graphical interface layer for Popcorn’s toolkit. It’s pretty sparse, but it’s enough to provide an on-ramp for exploring Popcorn’s basic capabilities. Once you get your appetite whetted, you’ll want to team up with a Javascript ninja of your own and really flex your web-video muscles. Because this is the future of online video: not just passive media silo’d in a low-res box onscreen, but richly integrated visuals that communicate with and affect the design and interactivity of the entire web experience they’re embedded in. Chris Milks of the future, get to work.

[See more video demonstrations of Popcorn.js; top image by D. Sharon Pruitt]

Add New Comment

2 Comments

  • v-fresh Media

    Thanks from us too, John!

    We recently joined reading fastcodesign and this article will help us in promoting our products - we are speacialized in movie production, visualizations and animations, by already giving ideas and solution to our customers how videos can be implemented in their websites based on the last web standarts.Thanks again!
     Cheers,Folks at v-fresh media.Filmproduktion und Visualisierung

  • brettgaylor

    Thanks for the article, John!  Just wanted to let folks know that Popcorn will release 1.0 next week, and we're relaunching most of our properties then. Most importantly, this includes a relaunch of Butter - we've renamed this app "Popcorn Maker", and a more accurate sneak peak can be found here: http://popcornjs.org/popcornma...