Popcorn.js

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)!

Print | posted @ Thursday, March 01, 2012 9:12 AM

Comments on this entry:

Gravatar # re: Popcorn.js
by Graham Clark at 3/1/2012 9:25 AM

What happened to SMIL?
  
Gravatar # re: Popcorn.js
by scott at 3/1/2012 1:12 PM

@Graham: I don't know, myself. Anyone else know?
  
Gravatar # re: Popcorn.js
by David Compton at 3/1/2012 11:33 PM

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 # re: Popcorn.js
by David Compton at 3/2/2012 12:03 AM

I figured this out myself - needed to set a height and width on the div that I was using to host the map.
  
Gravatar # re: Popcorn.js
by Rick Waldron at 3/11/2012 2:34 PM

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 have been closed on this topic.
Scott Allen
Posts - 869
Comments - 4493
Stories - 14