Bring your Media to Life with Popcorn.js

popcornPopcorn.js is a JavaScript Library that allows you to attach actions to time points in audio and video. It helps make media more web-like.

Popcorn Maker is powered by Popcorn.js and is a visual video editing tool which makes up part of the Mozilla Foundation's Webmaker initiative.

As we're aiming this tutorial at developers, we're going to concentrate on Popcorn.js. It's useful for anyone looking to create a rich interactive application based on media. You can choose from, or add to a wide selection of plugins to augment data to your media, from sources all over the web.

Rebellious Pixels

Check out Rebellious Pixel's Donald Duck cartoon remix to see what's possible.

Flavours of Popcorn.js (1.3)

  • Popcorn Core (popcorn.min.js) is the core library - (7.2 kB zipped)
  • Popcorn Complete (popcorn.complete.min.js) is popcorn.js plus most supported plugins - (86.3 kB zipped)
  • Popcorn IE8 (popcorn-ie8.js) is a patched version of popcorn core to ensure IE8 compatibility with certain popcorn players (10.1 kB zipped)

Note non-minified versions are available for debug purposes.

Popcorn Plugins

Popcorn.js has a great pluginable architecture. This means that the core can stay nice and light and you only import the plugins you need.

So lets take a brief look at the various plugins that Popcorn officially supports.

  • Attribution - add attribution to sources used
  • Code - run arbitrary code
  • Facebook - display content from Facebook
  • Flickr - display images from Flickr
  • Footnote - display additional text content
  • GML - Graffiti Markup Language
  • Googlefeed - display a feed from a specified blog url
  • Googlemap - display a Googlemap
  • Image - specify images to be displayed
  • Lastfm - display information about a LastFM artist
  • Linkedin - display content from LinkedIn
  • Lowerthird - display info in the lower-third of a video
  • Mustache - use Mustache templates
  • OpenMap - display an OpenMap
  • Processing - add a Processing.js sketch
  • Subtitle - create and display subtitles
  • Tagthisperson - tag a person
  • Timeline - display a scrolling timeline of information
  • Tumblr - display content from Tumblr
  • Twitter - display content from Twitter
  • Webpage - display a webpage in an iFrame
  • Wikipedia - displays a Wikipedia aricle
  • Wordriver - display a timed transcript as a river of words

Popping Popcorn - An Example

In this example we're going to use the footnote plugin.








Try it yourself.

What's happening here is that we are adding some JavaScript to some standard HTML5 Video markup so that content is added to a part of the web-page on the triggering of a time-based event. We could do this using the timeUpdate event but Popcorn looks after state as you move forward or backward through the media while providing an abstraction to use with various players such as the YouTube or Vimeo player.

Popcorn Players

The great thing about Popcorn is that it lets you integrate with other parts of the web with the minimum of fuss. We have the option of using the following players:

So let's try using the Vimeo player in conjunction with a Google Map and have this all work with Internet Explorer 8 (which doesn't support HTML5 audio or video).

  1. <br />
  2. <!doctype html><br />
  3. <html><br />
  4. <head><br />
  5. <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script></p>
  6. <p><script>
  7. // ensure the web page (DOM) has loaded
  8. document.addEventListener("DOMContentLoaded", function () {</p>
  9. <p> // Create a popcorn instance by calling Popcorn("#id-of-my-video")
  10. var pop = Popcorn("#ourvideo");</p>
  11. <p> // add a footnote at 2 seconds, and remove it at 6 seconds
  12. pop.footnote({
  13. start: 2,
  14. end: 6,
  15. text: "Pop!",
  16. target: "footnotediv"
  17. });
  18. });
  19. </script><br />
  20. </head></p>
  21. <p><body><br />
  22. <video id="ourvideo" controls ><br />
  23. <source src="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"><br />
  24. <source src="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/ogg"><br />
  25. </video></p>
  26. <div id="footnotediv"></div>
  27. <p></body></p>
  28. <p></html><br />
  29.  

Try it yourself.

Here we use the Vimeo player with the GoogleMap plugin to synchronise the display of locations on the map with the video playback. The GoogleMap plugin is very comprehensive, allowing you a series of views and even animation. Definitely worth checking out.

So that's the basics of how to use Popcorn.js - hopefully you can see that it's pretty straightforward to use and it really is worth trying at if you're looking at adding another dimension to your audio or video.

If you want to find out more you can try out a more complete series of tutorials over at Happyworm.com

This article has been written by Mark Boas

Mark makes, writes about and promotes new and open web technologies. Co-founder of Happyworm - a small web agency and makers of the jPlayer media framework, he enjoys pushing the limits of the browser using HTML5 and JavaScript. Though a generalist at heart, Mark spends much of his time playing with web based media and real-time communications and is actively involved in helping news organisations world-wide as part of the Knight-Mozilla OpenNews initiative. A lover of all things audio, his passion often drives his work and is currently enjoying the challenge of taking audio ‘somewhere new’ with his Hyperaudio experiments. You can follow Mark on Twitter.

Single Post Navigation

Comments are closed.

About Us | Contact Us | Developer | Terms of Use | Privacy Policy

Copyright © 2013 Dada Entertainment, LLC. All rights reserved.