Bringing Firefox Alive with Popcorn.js

For most people who work with computers for a living, holidays are a time for family… and providing endless tech support. As I was huddled over a half working computer, someone asked what an add-on was. I spend most of my time working with and on add-ons — so the concept seems obvious to me. As I found out this past Christmas, it’s not to everyone. My otherwise-fairly-computer-literate family had a hard time understanding where the browser ended and websites such as Facebook or Google started — so explaining the concept of add-ons was not nearly as easy as I thought it would be.

While over 85% of people using Firefox have at least one add-on installed, most people still don’t really know what an add-on is or the possibilities they provide. To fix this, the add-ons group teamed up with Mozilla Creative and an outside firm, Poke, to create a short video explaining what add-ons are and what they can do.

After seeing the video, we knew we had to do something awesome with Popcorn.js.

Watch The Video
On the page, click “Learn More” to play the video.

I recommend watching it in Firefox, since we interact with the browser in ways we couldn’t with Chrome. You can also view the video directly inside Firefox, by going to Tools > Add-ons > Get Add-ons > Click “Learn More” / “Learn More About Add-ons”.

Popcorn.js

For anyone unfamiliar, Mozilla’s Popcorn.js makes it easy to interact with video online using JavaScript. For anyone who has worked with jQuery or a similar library, it’s a breeze to pick up. Popcorn.js is the code part of Mozilla’s Popcorn, which is a larger project that aims to supplement video and audio with rich web content.

Setting up Popcorn.js is incredibly simple:

var pop = Popcorn('#promo-video');

Popcorn.js has a plugin called code, which lets you run arbitrary code when the video hits certain points.

pop.code({'start': start, 'end': end, 'onStart': function(){…}, 'onEnd': function(){…});

That’s basically all you need to know to get started with Popcorn.js. Everything else we did used regular JavaScript.

Like I mentioned, we only used one of the many plugins. Popcorn.js is incredibly powerful, and our video barely scratched the surface of what Popcorn.js plugins can do.

Showing Add-ons

We started by making add-ons fade in on the right side of the video when they are mentioned.

Note: You will only see this in the video if your browser window is wide enough.

Previewing Personas

We’re off to a good start. So far, we have add-ons showing up when they’re mentioned in the video. Now, wouldn’t it be cool if the video could interact with Firefox?

At one point the video talks about Personas, which are basically skins or backgrounds for Firefox. Since it would be incredibly annoying if any site you visited had the ability to skin your Firefox, the ability to trigger a preview is whitelisted to just the Mozilla add-ons sites.

Note: You can add other sites to this whitelist by going into Preferences > Security > Exceptions.

We thought it would be fun to style the browser with the Persona being mentioned — especially since we’re the only site that is allowed by the browser to do this. We simply fire an event when the video hits a certain point. To make sure the Personas are displayed instantly, we pre-load the Personas when you first click “Play”.

Blown Away

Later in the video, we see a plane fly across the screen. The papers and other items on the desk start to blow away as this happens. If you scroll down a bit, the add-ons below the video also start to flutter and are eventually caught in a JavaScript-y wind and blown away.

This is done using -moz-animation and -moz-transform: matrix(). Each add-on is given a class of “flutter” (starting at a staggered interval), and the add-ons flutter back and forth until they eventually “blow away”.

This isn’t Firefox-only; I just left out the Webkit code in the example for the sake of brevity.

In the next scene, both the backdrop in the video and the add-ons on the site drop back into place.

Other Things to Watch For

During the scene with the cameras, the page flashes as though a picture with a flash was being taken. The elements are simply hidden, then faded back in.

When the video talks about how add-ons can translate a page, some of the text on the page is translated along with the text in the video. (Note: This only works if you have fewer than three add-ons installed or you watch using this link. Otherwise, the top bar is not displayed.)

Uh-oh

We learned a few things along the way. We used popcorn-complete.js, which we didn’t realize loaded a few CSS, JS and SWF files off of popcornjs.org’s servers when the file was loaded. We mistakenly DOS’d popcornjs.org, which in turn made the add-ons site load slowly. Thanks to Jon Buckley and Rick Waldron, we were able to figure out what was going on and push a fix fairly quickly.

I also owe Chris and Krupa a big hug when I get back to the Mozilla office — they helped me out a ton by finding and fixing a bunch of bugs as we were pushing to production, since I was an unfortunate 30,000 feet in the air as the video was going live.

Looking Ahead

I have no doubt that Popcorn.js is going to become huge as HTML5 video takes off. News sites will use it to show relevant links and tweets, fashion sites will link to online stores as a celebrity is shown wearing a dress or shirt, video sites will provide closed captioning and annotations, media sites will use it to sync viewing across multiple computers — the possibilities are endless. I cannot wait to see what Popcorn powered videos people make next.

 Watch The Video
On the page, click “Learn More” to play the video.

Since the add-ons site is open source, be sure to view the code if you’re interested.

As for my family: not all is lost. The next morning I got an excited text from my cousin, who had watched the video. “Guess what I just did! I installed one of those picture addons on the top!” Sure, it pains me a bit that a Justin Bieber Persona now graces her Firefox — but hey, it’s a step in the right direction.

 


11 responses

  1. Ajay Gupta wrote on :

    Awesome video!

  2. Nathan Samson wrote on :

    Ironiccaly enough the “Learn More” button works better in chrome than in firefox?

    In Firefox the button opens a new tab to the site “https://addons.mozilla.org/en-US/firefox/”
    while chrome does the “right” thing and tries to play a video. (Nevermind the text “Your browser does not support the video tag” that is completely wrong because Chromium does support it (I have Chromium 15)

    I waited a day because maybe a broken version was pushed at some point and I was thinking I could be hitting an old version of the page with firefox (although I disabled the cache and refreshed), but the problem still occurs.

  3. Gregory Koberger wrote on :

    @Nathan That’s weird it’s not working. What version of Firefox? What OS? Any JavaScript errors? Clearing your cache could help, although you said it doesn’t. What happens with a new profile? Is there a “film strip” background on the button in Firefox?

    The link will go to the add-ons site if it doesn’t think it will be able to play the video for some reason.

  4. Nathan Samson wrote on :

    @Gregory

    No their is no film strip (If You mean the play movie image on the button “Learn more”)
    Weirdly enough their is also a huge space between the block “What are Add-ons?” and “Featured Add-ons” in Firefox. In chrome this space is taken by the block “First time with Add-ons?” which is not visible in Firefox.
    Also the right upper block “Thanks for using Firefox…” is not visible in Firefox.

    Firefox 9, running on linux (recent one, Fedora 16)
    Tried in a clean profile, even with safe mode, has the same results.

    Errors:
    Fout: uncaught exception: [Exception… “Component returned failure code: 0x80570016 (NS_ERROR_XPC_GS_RETURNED_FAILURE) [nsIJSCID.getService]” nsresult: “0x80570016 (NS_ERROR_XPC_GS_RETURNED_FAILURE)” location: “JS frame :: resource:///components/OpenWebapps.js :: OpenWebapps :: line 50” data: no]
    Fout: z.button is undefined
    Bronbestand: https://static-ssl-cdn.addons.mozilla.net/en-US/firefox/addons/buttons.js?b=01ad944
    Regel: 13
    Fout: $(“.install”).installButton is not a function
    Bronbestand: https://static-ssl-cdn.addons.mozilla.net/media/js/zamboni/discovery-min.js?build=01ad944
    Regel: 4

  5. Gregory Koberger wrote on :

    Okay, I have two possibilities!

    First: The JS error seems like it’s the same as bug 713468. If there’s a JS error, it wouldn’t continue loading the video stuff. https://bugzilla.mozilla.org/show_bug.cgi?id=713468

    Secondly (and less likely): I noticed you seem to be using Dutch as a locale. The video is en-US only. We detect your locale based on the URL, so as long as the URL included en-US it will work.

  6. Nathan Samson wrote on :

    Clearly I’m hit by the fedora / firefox bug. I guess I have to wait until that one is fixed.

    The URL contains en-US already so that is clearly not the problem.

    Thanks for the help

  7. Larry wrote on :

    Just watched the video…. AWESOME!!!

  8. skierpage wrote on :

    That is really excellent, and a straightforward compelling example of this popcorn.js about which Mozillians have been nattering.
    “If you scroll down a bit, the add-ons below the video also start to flutter…”
    I missed this too. The “intro” box should be slimmed so that more of the “featured-addons” box is above the fold so more viewers will see the effect.

    In general, the vertical alignment in all the rounded boxes is all over the map, “Thanks for using Firefox” is closer to the top than “What are Add-ons?” so there’s wasted space. I think you need to drop the logo-addons.png next to “What are add-ons?”: it prevents that header from horizontally aligning with “First time with Add-ons?” and “Featured add-ons” headings below, it takes up vertical space, it doesn’t match the feel or palette of the background image behind “First time with Add-ons?”, and the imagery of the floating box of goggles doesn’t match anything else addon-related in the browser or on addons.mozilla.org. I hope this helps, I’ll file a bug.

  9. Gregory Koberger wrote on :

    @skierpage Thanks for the feedback! If you file a bug against me (gkoberger@mozilla.com) with screen shots of what you’re seeing (and if you’re looking to get creative, what you think it should look like), we can try to figure something out 🙂

  10. Ryan Doherty wrote on :

    Wow, that is one of the coolest things I’ve seen in a long time. Good work!

  11. e-ticaret wrote on :

    Clearly I’m hit by the fedora / firefox bug. I guess I have to wait until that one is fixed.

    The URL contains en-US already so that is clearly not the problem.

    Thanks for the help