{"id":2327,"date":"2011-12-27T13:04:05","date_gmt":"2011-12-27T21:04:05","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=2327"},"modified":"2011-12-28T07:33:57","modified_gmt":"2011-12-28T15:33:57","slug":"popcornjs_is_a-maize-ing","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2011\/12\/27\/popcornjs_is_a-maize-ing\/","title":{"rendered":"Bringing Firefox Alive with Popcorn.js"},"content":{"rendered":"

For most people who work with computers for a living, holidays are a time for family\u2026 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 \u2014 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 \u2014 so explaining the concept of add-ons was not nearly as easy as I thought it would be.<\/p>\n

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

After seeing the video, we knew we had to do something awesome with Popcorn.js.<\/p>\n

Watch The Video<\/strong><\/a>
\nOn the page, click “Learn More” to play the video.<\/em><\/p>\n

I recommend watching it in Firefox, since we interact with the browser in ways we couldn\u2019t 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”<\/em>.<\/p>\n

Popcorn.js<\/strong><\/h2>\n

For anyone unfamiliar, Mozilla\u2019s Popcorn.js<\/a> 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<\/a>, which is a larger project that aims to supplement video and audio with rich web content.<\/p>\n

Setting up Popcorn.js is incredibly simple:<\/p>\n

var pop = Popcorn('#promo-video');<\/code><\/p>\n

Popcorn.js has a plugin called code<\/em>, which lets you run arbitrary code when the video hits certain points.<\/p>\n

pop.code({'start': start, 'end': end, 'onStart': function(){\u2026}, 'onEnd': function(){\u2026});<\/code><\/p>\n

That\u2019s basically all you need to know to get started with Popcorn.js. Everything else we did used regular JavaScript.<\/p>\n

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<\/a>.<\/p>\n

Showing Add-ons<\/h2>\n

We started by making add-ons fade in on the right side of the video when they are mentioned.<\/p>\n

Note: You will only see this in the video if your browser window is wide enough.<\/em><\/p>\n

<\/p>\n

Previewing Personas<\/h2>\n

We\u2019re off to a good start. So far, we have add-ons showing up when they\u2019re mentioned in the video. Now, wouldn\u2019t it be cool if the video could interact with Firefox?<\/p>\n

At one point the video talks about Personas<\/a>, 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.<\/p>\n

Note: You can add other sites to this whitelist by going into Preferences > Security > Exceptions.<\/em><\/p>\n

We thought it would be fun to style the browser with the Persona being mentioned \u2014 especially since we\u2019re 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 \u201cPlay\u201d.<\/p>\n

<\/p>\n

Blown Away<\/h2>\n

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.<\/p>\n

This is done using -moz-animation<\/a><\/em> and -moz-transform: matrix()<\/a><\/em>. Each add-on is given a class of \u201cflutter\u201d (starting at a staggered interval), and the add-ons flutter back and forth until they eventually \u201cblow away\u201d.<\/p>\n