• 11.14.12

Popcorn Maker: A Dead-Simple Drag-and-Drop App For Remixing Web Videos

The Mozilla Foundation’s latest project aims to bring interactive multimedia remixing to the masses.

Popcorn Maker: A Dead-Simple Drag-and-Drop App For Remixing Web Videos

About a year ago, I wrote about an “HTML5 media framework” called Popcorn.js that let filmmakers build online interactivity right into their web videos. The trouble was that you needed to be (or know or hire) a coding ninja in order to use it. What Popcorn really needed was an interface that any blogger could grok. Now, with the release of Popcorn Maker, the Mozilla Foundation has granted that wish.


The teaser video for Popcorn Maker.

If Popcorn.js is the Final Cut Pro of online interactive video–a professional-grade tool for creating world-class multimedia experiences from scratch–Popcorn Maker is more like iMovie. It lets you grab almost any piece of common online media (like videos from YouTube or Vimeo, or SoundCloud audio files) and augment it with clickable interactive widgets. If you’ve ever wanted to paste “Pop Up Video”-style commentary bubbles over your favorite YouTube clip, Popcorn Maker’s drag-and-drop UI couldn’t be simpler. But you can also add more sophisticated interactivity like Google Maps, live Twitter feeds, and Wikipedia articles just as easily. Here’s an enhanced audio documentary by WNYC’s “Radio Rookies” that shows off the app’s magic powers:

Brett Gaylor, who led Popcorn Maker’s 15-person development team, tells Co.Design that they took design inspiration not only from obvious sources like Final Cut Pro and AfterEffects but also from Gmail, Flickr, and Tumblr. “We wanted users to ‘get’ Popcorn Maker right away, and to see it as a way they could easily mark up and annotate a video,” Gaylor says. “We realized that users wanted the ability to drag [interactive] events directly onto the video area, and to be able to position and re-size these events visually.”

On a common broadband Internet connection, Popcorn Maker is as responsive as any desktop app: I skimmed back and forth in the timeline and manipulated popups and other widgets with no discernable lag time. Gaylor says that this seamless user experience, driven entirely by Javascript, HTML, and CSS, “wouldn’t have been possible even two years ago.” And that seamlessness is the key to Popcorn Maker’s power. If you could remix a TED video as quickly as you can blog about it, why wouldn’t you?

And that’s the coolest thing about Popcorn Maker: All the augmentations you make to a piece of video or audio can actually travel with it, anywhere on the web. “We’re used to embedding a video on our blog, or a map, or adding a hypertext link to a blog post,” Gaylor says. “These types of experiences have been left out of video creation, however. So our effort with Popcorn Maker is to make video behave in ways we’ve become used to when we use the rest of the web.”

Granted, you can’t use Popcorn Maker to gin up something as jaw-dropping as Chris Milk’s collaborations with Google. But its toylike simplicity is exactly what makes the app as potentially disruptive as YouTube was to video and WordPress was to publishing. Popcorn Maker is so easy to use that it’s very difficult to predict what its scores of potential users will start to do with it. And that’s its most exciting design feature of all.


[Popcorn Maker]

[Image: Popcorn via SHutterstock]

About the author

John Pavlus is a writer and filmmaker focusing on science, tech, and design topics. His writing has appeared in Wired, New York, Scientific American, Technology Review, BBC Future, and other outlets.