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