Popcorn.js

Thursday, March 1, 2012

Popcorn.js is a JavaScript library for working with HTML 5 video and audio in a web page. It's part of Mozilla's Popcorn project, and it already has a bonanza of plugins available.

Part of Popcorn's job is to smooth over API differences in the <audio> and <video> programming interface, but the real strength of Popcorn and its plugins is in combining and orchestrating content associated with a video.

Popcorn is a library for storytellers.

For example, while a video is playing on a page, you want to display a welcome message from 0 to 8 seconds, and an interactive map of where the video is filmed from 10 to 20 seconds. With Popcorn this is as easy as:

var pop = Popcorn("#video")
      .footnote({ 
          "start": 0, "end": 8,
          "target": "content",
          "text": "Welcome!"
      }).googlemap({
          "start": 10.0, "end": 20,
          "target": "content",
          "type": "TERRAIN",
          "zoom": 16, 
          "lat": 39.665389,
          "long": -105.205698,
          "location": "Red Rocks"
      });
pop.play();

Other plugins provide support for YouTube, Vimeo, Twitter, Flickr photos, Twitter streams, Facebook, and more. Popcorn is easy (and fun)!


Comments
gravatar Graham Clark Thursday, March 1, 2012
What happened to SMIL?
gravatar scott Thursday, March 1, 2012
@Graham: I don't know, myself. Anyone else know?
gravatar David Compton Thursday, March 1, 2012
Hi Scott,

Thanks for the heads up on popcorn.js. Is there a secret to getting the googlemaps stuff to work. I can get footnotes, normal video, youtube etc. to work but the googlemaps stuff just refuses to play. Is there some other configuration required? I have looked at the videos on the popcorn.js site and cannot even get their googlemaps example to work.
gravatar David Compton Friday, March 2, 2012
I figured this out myself - needed to set a height and width on the div that I was using to host the map.
gravatar Rick Waldron Sunday, March 11, 2012
This is super cool - it's really exciting for me to find articles and tutorials about Popcorn.js out in the wild!

We're about to release Popcorn.js 1.2 tomorrow, there will be all kinds of goodies - watch out for the announcement here: http://mozillapopcorn.org/popcornjs/
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!