A Look at Popcorn

Today we’re going to take a look at Popcorn.JS, a library from Mozilla which makes it very easy to manipulate a webpage based on the current position of a video. This allows you to create rich “hypermedia” experiences around your video content.

With Popcorn, you could display information about actors currently on-screen, or show Google Street View maps of locations in the video.

Take a look at the Demo Page to see what we’ll be achieving – a mix of images, Google Maps, Wikipedia, tagging, RSS feeds, Facebook and web content – all in a 22 second video clip.

About Popcorn

Popcorn makes video work like the web. We create tools and programs to help developers and authors create interactive pages that supplement video and audio with rich web content, allowing your creations to live and grow online.

Popcorn provides a collection of plugins to easily pull in remote data to the screen. For example, to display a snippet from the Wikipedia article about the Queen, you’d use this little snippet:

This displays a Google Map of England in #map at 10 seconds, and disappears at 12. You could set the type setting to HYBRID, ROADMAP, SATELLITE, TERRAIN or STREETVIEW and display more precise maps by setting the lat and lng (and for Street View, the heading and pitch for more accurate images).

We have a simple HTML5 template, with a section#side which we’ll be using to display most of the content from Popcorn. The div#wiki will be used to display Popcorn data from Wikipedia – the only reason it gets its own element is to aid in styling.

Include Popcorn

In a production environment, it’s not really recommended to include the full Popcorn library with all the plugins, as we are doing here. Instead, use the Popcorn Build Tool to create your own version of the library with only the plugins you need.

Get Popping!

Inside js/script.js include the following to get started with Popcorn:

Here we’re creating a new Popcorn instance on #demo_video (the ID we gave our video element). We’re also passing Popcorn the pauseOnLinkClicked argument so that the video is paused when the user clicks a link.

We then call the play() method to instruct Popcorn to automatically play the video. Remove this line if you would rather wait for the user to explicitally hit ‘Play’.

Load up the page in your browser and if the video auto-plays, you’re on the right track!

Step 1: Tag “Dan Harper”

If you watch the demo video through again, you’ll notice the first Popcorn event we create is a “tag” at 1s displaying my name, link & image. Let’s create that first, and we’ll add in each event as they occur, in chronological order.

To create this tag, we’ll use Popcorn’s built-in Tag This Person plugin. If you look on the plugin page, you’ll see the plugin takes an object as an argument with the following properties as options:

Start [number]: time you want the plugin to execute

End [number]: time you want the plugin to stop

Target [string]: ID of the element to display the content

Person [string]: name of the person to tag

Image [string]: URL of the image of the person being tagged (optional)

You’ll notice we don’t explicitly specify an end time. Instead, Popcorn will stop the plugin when the video ends. (Personally I’d like the option to have the content persist after the video has ended, but Popcorn does not seem to offer this functionality yet).

Take a look at the page in your browser and you should see my tag appear at 1s.

Step 2: Display the ‘Nettuts+’ logo

At 2 seconds, the Nettuts+ logo is displayed to the side of the video, and disappears at 10 seconds. This is just as easy as tagging a person. The Image plugin allows you to display an image inside an element.

Like all Popcorn plugins, image takes an object as an argument. image accepts the following options:

Start [number]: time you want the plugin to execute

End [number]: time you want the plugin to stop

Target [string]: ID of the element to display the content

Src [string]: URL of the image to display

Href [string]: URL to make the image a link to (optional)

Text [string]: text to overlay on the image (optional)

To use this plugin; add the following below the .tagthisperson(…); event:

As you can see we’re using all the available options except for text. Refresh your browser and try it out! The logo should display in the sidebar between 2 and 10 seconds.

Step 3: Display the latest Nettuts+ posts

Googlefeed is one of the plugins which really demonstrated to me the potential of Popcorn. Give it the URL to an RSS feed, and it will display the posts in a little widget inside the element you specify.

In the demo video it displays at 4 seconds at lasts until the 10 second mark.

Googlefeed accepts the following options for customisation:

Start [number]: time you want the plugin to execute

End [number]: time you want the plugin to stop

Target [string]: ID of the element to display the content

Url [string]: URL to the RSS feed to parse

Title [string]: title to display above the feed (optional)

Orientation [string]: vertical [default] or horizontal (optional)

With these options in mind, let’s add the plugin to our Popcorn events:

Step 4: Let’s Get Social

The Facebook plugin makes it very easily to display social elements from Facebook at certain times in your video. For example, in a real-world example, you might invite your viewers to Like you on Facebook, or share their comments about the show – and have the box display on-screen in realtime; as if by magic ;)

This plugin contains a lot of options, the majority of which aren’t relevant for our needs – displaying a Like box – so for the full list of options, check out the plugin’s page on the Popcorn site.

Step 6: Meet The Queen

Next up in the demo, at 12 seconds, we add a new tag for the Queen and in the sidebar display an image of her, and include some content from Wikipedia. The image & Wikipedia content disappear at 14 seconds.

We’ve already gone over the tagthisperson and image plugins, so implementing those should be easy. Why not try doing those bits yourself? Go ahead, I’ll wait.

I’m setting a custom title for the article as I’d rather display the title ‘The Queen’ instead of ‘Elizabeth II’. Also note that we’ve set the target to #wiki – as I mentioned earlier, this is purely for cosmetic purposes.

Step 7: Tea?

One of the final pieces of interactivity in the demo is the appearance of a picture of a cup of tea and the new tag of ‘Tea’ at 14 seconds, and ending at 16 seconds.

As we’ve used both the tagthisperson and image plugins several times already, I won’t bother explaining this code:

In fact, why not try using Popcorn’s Flickr plugin to load a picture of a cup of tea, instead of loading a local one with image.

Step 8: IFrames?

Finally, at the end of the demo video we load up the official Mozilla Popcorn site in an IFrame in #side. This is, as you might expect, achieved using another one of Popcorn’s plugins – webpage. This plugin takes just a few options:

The Popcorn’s Ready!

Load up the page in your browser for the grand finale – why not grab a bag of popcorn to enjoy the show with? (ha, ha).

I really hope you find Popcorn as interesting as I do. The potential for this is incredible, and it can really push the boundaries for what we consider interactive content.

Quiz shows could use this to easily allows viewers to play along in their browser, magazine shows can invite you to join them on social media sites like Facebook, Twitter or G+. Documentaries could display additional information about what’s being shown.

Or a complex detective crime drama could use your browser as the detective’s note pad – adding clues, witnesses, victims and suspects to the screen in real-time.

Extra, Extra! Read All About It!

A number of libraries and sister projects are already cropping up in the Popcorn eco-system. Mozilla have an alpha-stage app for creating Popcorn content without having to write code, called Popcorn Maker which will be great for cutting-edge film makers wanting to venture into this new browser-based land on the web.