Popcorn.js – All Grown Up

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/

6 responses

  1. Ken Saunders wrote on :

    I’m not seeing this in about:addons (Firefox 9.0.1), but would like to.
    Any idea as to why?

  2. Ken Saunders wrote on :

    Never mind.
    I needed to open a profile without any add-ons installed.

  3. Pingback from Popcorn Framework Usage Surprises Even Its Creators on :

    […] with an enterprising mind might want to check out this technology, there's money to be had here.Another use surprised even the people who created Popcorn.  In the accompanying video for Firefox 9's Add-Ons, […]

  4. Pingback from Popcorn Framework Usage Surprises Even Its Creators | Video Marketing Lessons on :

    […] Another use surprised even the people who created Popcorn.  In the accompanying video for Firefox 9′s Add-Ons, they were surprised that the framework was being used to show synchronized interactive content.  When the video talks about a particular add-on, the add-on shows up in a column next to the video, which can then be clicked for information and download.  When discussing wallpaper content, Personas, through my Firefox browser, the top and bottom of the page changed to that wallpaper to give a mini-preview of what it would look like. […]

  5. Ed Glazer wrote on :

    Hey, I’m sure you know about this already, but at this particular moment the images aren’t showing up because the robothaus.org is apparently down or having some other issue.

    1. secretrobotron wrote on :

      Thanks for the heads up. Fixed now.