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:

popcorn.wikipedia({
    start: 12,
    end: 14,
    target: 'wiki',
    src: 'http://en.wikipedia.org/wiki/Elizabeth_II',
    title: 'The Queen',
    numberofwords: 40
});

This pulls in the first 40 words from the Queen’s Wikipedia page into the element with an ID of wiki. It will appear on-screen at 12 seconds, and disappear at 14 seconds.

You can just as easily display a Google Map:

pop.googlemap({
    start: 10,
    end: 12,
    target: 'map',
    type: 'ROADMAP',
    location: 'England',
    zoom: 6
});

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).

A full list of the options available for the Google Maps plugin can be found on the Popcorn site.

Getting Started

Create your file structure like so:

| index.html
| css/
|   - style.css
| js/
|   - popcorn.js
|   - script.js
| img/
| vid/

HTML

Inside index.html, enter the following base template:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>A Look at Popcorn</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <section id="side">
        <div id="wiki"></div>
    </section>

    <section id="main">
        <video id="demo_video" controls autobuffer>
            <source src="vid/demo.webm" type="video/webM">
            <source src="vid/demo.mp4" type="video/mp4">
            <source src="vid/demo.ogv" type="video/ogg">
        </video>
        <section id="tags"></section>
    </section>

    <footer>
        <p>Demo created by <a href="http://danharper.me">Dan Harper</a> for <a href="http://net.tutsplus.com/author/danharper">Nettuts+</a>, using <a href="http://mozillapopcorn.org">PopcornJS</a>.</p>
    </footer>

    <script src="js/popcorn.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

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.

section#main is where the video sits: we’ve specified 3 video formats:

WebM for Chrome, Firefox and Opera
MP4 for Safari and Internet Explorer
OGV for older versions of Chrome, Firefox and Opera

Below the video is section#tags where we’ll display “tags” using Popcorn.

Directly before the closing </body> tag, we include the JavaScript files.

CSS

Inside your css/style.css file, add in the following basic styling. It’s pretty basic, and I won’t go over it for this tutorial:

body {
    font-family: sans-serif;
    color: #444;
}

a:link, a:visited {
    color: orangeRed;
    text-decoration: none;
}

a:hover, a:active {
    color: crimson;
    text-decoration: underline;
}

#main {
    width: 640px;
    float: left;
    margin: 0 0 0 10px;
}

#tags {
    border: 5px solid #eee;
    border-radius: 5px;
    padding: 5px 10px;
}

#tags a {
    line-height: 30px;
    vertical-align: top;
}

#side {
    border: 5px solid #eee;
    border-radius: 5px;
    height: 405px;
    width: 390px;
    float: left;
    overflow: hidden;
    padding: 10px;
    position: relative;
}

video, iframe {
    border-radius: 5px;
    border: 5px solid #eee;
    -webkit-background-clip: content;
}

#wiki a {
    color: #444;
    font-size: 20px;
}

#wiki a + p {
    margin: 5px 0 0;
}

#webpage {
    width: 100%;
    height: 460px;
}

#tags img {
    width: 30px;
    height: 30px;
}

footer {    
    clear: both;
    font-size: 12px;
}

Images

Save the following files into the img/ directory – we’ll be displaying them on the page with Popcorn:

(Images of the Queen and the cup of tea are in the public domain. That handsome fellow is me.)

Videos

Right-click and save the following three video files to your vid/ directory. They’re all the same video, saved into three different formats:

vids/demo.webm

vids/demo.mp4

vids/demo.ogv

Popcorn also supports videos from YouTube and Vimeo. Click the links for a demo of the plugins.

Include Popcorn

Finally, include Popcorn in your project by saving the following into js/popcorn.js:

http://popcornjs.org/code/dist/popcorn-complete.min.js

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:

document.addEventListener("DOMContentLoaded", function() {

    var pop = Popcorn('#demo_video', {
        pauseOnLinkClicked: true
    });

    pop.play();

});

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)
Href [string]: URL of the person being tagged (optional)

Below pop.play(); add the following:

pop.tagthisperson({
    start: 1,
    target: 'tags',
    person: 'Dan Harper',
    image: 'img/danharper.jpg',
    href: 'http://danharper.me'
});

Working with Popcorn is really that easy!

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:

pop.image({
    start: 2,
    end: 10,
    target: 'side',
    href: 'http://net.tutsplus.com',
    src: 'img/nettuts.jpg'
});

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:

pop.googlefeed({
    start: 4,
    end: 10,
    target: 'side',
    url: 'http://net.tutsplus.com/feed/'
});

So easy, right?

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.

The options which do concern us, however, are:

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
Type [string]: LIKE [default], LIKE-BOX, ACTIVITY, FACEPILE, LIVE-STREAM etc. (optional)
Href [string]: URL of the page to like; defaults to the current page (optional)
Action [string]: should the Like button say like [default] or recommend (optional)

Display our Like button on the page with the following:

pop.facebook({
    start: 8,
    end: 10,
    target: 'side',
    href: 'http://net.tutsplus.com'
});

Refresh the page, and the Facebook Like button should pop into existence at 8 seconds, and disappear with the RSS feed and Nettuts+ image at 10 seconds.

This is getting so easy, your grandma could do it, right?

Note: In my testing I found the Facebook button to be quite temperamental and sometimes displays before it is due to appear, or disappears early.

Step 5: On Location

At 10 seconds, we want to display a Google Map of England for 2 seconds. As you might have guessed, there’s ~~an app~~ a plugin for that!

The Google Maps plugin allows you to display any sort of map the API allows (Road, Satellite, Terrain, Hybrid or Street View). The options are as follows:

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
Location [string]: address/location to center the map on *
Lat [number]: latitude to center the map on *
Lng [number]: longitude to center the map on *
Type [string]: HYBRID [default], ROADMAP, SATELLITE, TERRAIN or STREETVIEW (optional)
Zoom [number]: zoom level, defaults to 0 (optional)
Heading [number]: orientation of camera in degrees relative to true north (Street View only) (optional)
Pitch [number]: vertical orientation of the camera (Street View only) (optional)

* You must provide either a location or a lat and lng

So let’s include the England map on the page. Add the following to your script:

pop.googlemap({
    start: 10,
    end: 12,
    target: 'side',
    type: 'ROADMAP',
    location: 'England',
    zoom: 6
});

Why not try out some different options – like zooming on a specific building in Street View? Here’s one to start with:

pop.googlemap({
    start: 10,
    end: 12,
    target: 'side',
    type: 'STREETVIEW',
    lat: 50.844537,
    lng: -1.081544,
    zoom: 2,
    heading: 145,
    pitch: 1
});

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.

Done it? Struggling? Or just too lazy? Well, here’s the answer anyway:

pop.tagthisperson({
    start: 12,
    target: 'tags',
    person: 'The Queen',
    image: 'img/queen-large.jpg',
    href: 'http://royal.gov.uk'
});

pop.image({
    start: 12,
    end: 14,
    target: 'side',
    src: 'img/queen-large.jpg'
});

Now let’s take a look at Popcorn’s Wikipedia plugin. It takes a few options to specify what content you want, and how much of it:

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 Wikipedia article to display
Title [string]: set a custom title for the article (optional)
Numberofwords [number]: the number of words to display, defaults to 200 (optional)
Lang [string]: language the article is in (defaults to english) (optional)

With these options in mind, try creating this bit yourself. The plugin name is wikipedia.

pop.wikipedia({
    start: 12,
    end: 14,
    target: 'wiki',
    src: 'http://en.wikipedia.org/wiki/Elizabeth_II',
    title: 'The Queen',
    numberofwords: 40
});

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:

pop.tagthisperson({
    start: 14,
    target: 'tags',
    person: 'Tea',
    image: 'img/cup-of-tea.jpg',
    href: 'http://en.wikipedia.org/wiki/Black_tea'
});

pop.image({
    start: 14,
    end: 16,
    target: 'side',
    href: 'http://en.wikipedia.org/wiki/Black_tea',
    src: 'img/cup-of-tea.jpg'
});

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:

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 to display in the iframe
Id [string]: the ID you want assigned to the frame (optional)

So including an iframe on the page is as simple as:

pop.webpage({
    start: 16,
    target: 'side',
    src: 'http://mozillapopcorn.org/'
});

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.

There are already a number of projects incorporating Popcorn in an innovative way. I can’t wait to see what the future holds.

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.

Other projects, as detailed on the official site, include:

Instapoppin – a user-friendly approach to creating Popcorn user experiences using only extra HTML attributes
Seriously.js – a WebGL effects library for video
Sequencer.js – chain multiple media objects to a single sequence
butter.js – the API supporting Mozilla’s Popcorn Maker app
Popcorn Kernel – a simple web server for client-server Popcorn experiences

The Plugins

A full list of Popcorn plugins can be found here, or for the lazy (I’ve marked the ones we’ve tried):

Please note: if this article is slightly dated when you’re reading this, the plugin list may have grown substantially, so check out the official site for an up-to-date list!

HIGHLIGHTS OF THE DAY