This morning (Dec 22), CDOT student and Mozilla hacker, Jon Buckley discovered that the Firefox 9 Addons About Page uses Popcorn.js to augment a tutorial video about Firefox addons by adding apropos content to the page while the video plays.

Of course it’s great to see another example of Popcorn in the wild, but this is a use case we had never before considered. Using Popcorn.js to show synchronized interactive content, the page explains addons, what kinds of addons there are, and how a user can use them in Firefox.

Being Sherlock

Such an elegant use of the library deserves a little investigatory work. Since the authors of the many pieces of user-facing Firefox content do such a good job, it may not be immediately obvious that the addons about page is made of the web. Nevertheless, because it is indeed a webpage, I can right click to learn more, and open up the page in a new tab to isolate it.

Without flirting too much with a tangent about the merits of the Web Console, finding out that the page contains an instance of Popcorn is pretty easy:

1. Press Ctrl, Shift and K altogether to bring up the Web Console.
2. Type in Popcorn — which should auto-complete even before you have typed Pop — and press Enter.

Right away, without digging through HTML for a script tag, we can see that Popcorn.js is included on the page somewhere. But, we can do more than that:

1. After starting the video, try typing Popcorn.instances into the Web Console. It should report back with a large blob of text, which is actually an array containing Popcorn objects.
2. You can see the events that are going to occur during the video by typing Popcorn.instances[0].getTrackEvents(), which should return another blob — an array of Popcorn events.
3. Similarly, by trying commands like Popcorn.instances[0].getTrackEvents()[0].start, or Popcorn.instances[0].getTrackEvents()[0]._natives.type you can see when the first event will start, and what plugin type it is respectively. Feel free to copy & paste.

By poking around in a similar fashion, I was able to discover that the addons page makes use of the code plugin to add and remove CSS classes from elements on the page. This approach lets the video change the visibility and interactivity properties of the information bar’s constituent elements.

If this bit of detective work caught your attention, we’re only where the rabbit hole begins. In fact, there’s a whole API to discover and play with (recent documentation update courtesy of another CDOT student and Mozilla hacker, David Seifried).

Feeling the Effects

Needless to say, it was surprising seeing comparatively excessive usage stats on the popcornjs.org server, as throngs of people visited the addons about page:

Luckily, Jon Buckley, and Rick Waldron (another passionate Popcorn contributor from Bocoup) were able to advise the people managing the addons website to pull the server out of accidental DOS territory.

Article source: http://blog.robothaus.org/2011/12/22/popcorn-dot-js-all-grown-up/