Using Mozilla Popcorn Maker to Create an
Interactive Video
Mozilla Popcorn Maker allows you to enrich a video with interactive maps,
webpages, and tweetstreams. Your video could be different every time it's
"played," because it pulls in dynamic content and allows your "viewer" to interact
with it. Here, we learn how to use it to enhance an archival video.

Sign up for an account

Go to popcorn.webmaker.org. You can work on a Mozilla Popcorn Maker project
without logging in, but you can't save it. So go ahead and sign up for an account.
(Mozilla uses the identity manager Persona, so you may only need to enter youremail address.)

Using Mozilla Popcorn Maker to Create an Interactive Video - 1

Miriam Posner | CC-BY

Choose a video to serve as the basis of your projectWith Popcorn Maker, you layer media on top of sound or video, which can comefrom a number of places. As the icons indicate, you can easily use video fromYouTube, Vimeo, or SoundCloud, just by pasting in the link. Somewhat lessobviously, you can use video from a place like the Internet Archive, which uses
HTML5 to display its video. Let's look at how to do this.

Using Mozilla Popcorn Maker to Create an Interactive Video - 2

Miriam Posner | CC-BY

Grab a video from the Internet Archive

Once you've found a video you like on the Internet Archive, copy the link byright-clicking on the Ogg Video link and selecting Copy Link Address from thecontext menu. Then paste the link into your Popcorn Maker project and click on
Create Clip.

Using Mozilla Popcorn Maker to Create an Interactive Video - 3

Miriam Posner | CC-BY

Drag your video from the Media Gallery to the timeline

Drag it to Layer 0.

Using Mozilla Popcorn Maker to Create an Interactive Video - 4

Miriam Posner | CC-BY

Explore your options

Once you've dragged your video to the timeline, you'll see the Clip Editor in theEvents pane.
1. Fallback is where you can list another URL in case the browser you're using
doesn't support HTML5. For Internet Archive videos, you can insert the URL
for the MP4 version of your video in the same way you selected the .ogv

Using Mozilla Popcorn Maker to Create an Interactive Video - 5

Miriam Posner | CC-BY

2.

3.
4.
5.
6.

version.
By default, Popcorn Maker includes the first 30 seconds of your clip in yourproject. You can extend this time or shorten it by using this scrubber. It's not a
full-fledged editing tool, but you can select only a portion of your video if you'dlike.
If you'd like, you can turn the video portion of your clip off.
... and you can do the same thing with the audio, as well as turn the volume
down.
Here's where you can change the title of your clip.
Here, you can specify that you'd like time in your project before or after yourvideo ends.

Making sense of the timeline

This image shows what a timeline from a completed project — with a number ofdifferent media assets — might look like.
1. You assemble your project in layers. Layers with lower numbers appear
above layers with a higher number. So layer one appears on top of layer two.
2. You can zoom in on part of your timeline by using this scrubber. This makes it
easier to work with events of shorter duration.

Using Mozilla Popcorn Maker to Create an Interactive Video - 6

Miriam Posner | CC-BY

Add some text to your video

If you click on the Events tab, you'll see that you have the option to add some text
to your video.

Using Mozilla Popcorn Maker to Create an Interactive Video - 7

Miriam Posner | CC-BY

Explore your options

Once you start typing your text, you'll see that you have a number of different
options. You can change the time when your text starts and ends, move it aroundon the canvas, and change the way it transitions on and off the page. You can also
provide a link for the viewer to click. Under the Advanced tab, you can change thefont and color.

Using Mozilla Popcorn Maker to Create an Interactive Video - 8

Miriam Posner | CC-BY

Add an article from Wikipedia

You can also add a Wikipedia article, which the viewer can interact with as thevideo plays. Be sure to give the viewer enough time to explore the article.

Add a map

You can also add a Google map, which your viewers can interact with as the video
plays. As I write this, choosing any of the Stamen map options causes Popcorn
Maker to crash, so be sure to save your work before you select this option.

Using Mozilla Popcorn Maker to Create an Interactive Video - 9

Miriam Posner | CC-BY

Add a popup

A popup is a bit of text you can position on the page, kind of like VH1's Pop-Up
Videos. You can customize the popup's look and feel with icons and transitions.

Using Mozilla Popcorn Maker to Create an Interactive Video - 10

Miriam Posner | CC-BY

Add an image

Add an image by dragging it from your desktop. You can also specify a Flickslideshow, which will display images that are either tagged with a word you specify
or from a specific URL.

Using Mozilla Popcorn Maker to Create an Interactive Video - 11

Miriam Posner | CC-BY

Replay snippets with a loop

With a loop, you can specify that you'd like part of your video to repeat.

Pause for as long as you want.

Once the pause is complete, your video will pick up where it left off.

Using Mozilla Popcorn Maker to Create an Interactive Video - 12

Miriam Posner | CC-BY

Save and share your project

If you click on the Project tab, you'll see that you can add descriptive information
about your project, tweet the link, share it on Google Plus, or get the code toembed it on a website. Because your project is authored in HTML5, you can also
see all its source code. Click on the green arrow button to see what your project
looks like in its completed state.

Other people can remix your work

Completed projects include a remix button, with which anyone on the Internet canuse your content to create a new version of your project.
Using Mozilla Popcorn Maker to Create an Interactive Video - 13

Miriam Posner | CC-BY