Using Mozilla Popcorn Maker to Create an Interactive Video

I’ll be teaching a workshop on Mozilla Popcorn Maker soon and, as is my habit, I created this step-by-step tutorial. Here’s the tutorial in handout form as a PDF, and here it is in Word, in case you’d like to modify it.

Mozilla Popcorn Maker allows you to enrich a video with interactive maps, images, and webpages. 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

media_1377032206856.png

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 your email address.)

Choose a video to serve as the basis of your project

media_1377032624314.png

With Popcorn Maker, you layer media on top of sound or video, which can come from a number of places. As the icons indicate, you can easily use video from YouTube, Vimeo, or SoundCloud, just by pasting in the link. Somewhat less obviously, 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.

Grab a video from the Internet Archive

media_1377033641185.png

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

Drag your video from the Media Gallery to the timeline

media_1377034042670.png

Drag it to Layer 0.

Explore your options

media_1377034195604.png

Once you’ve dragged your video to the timeline, you’ll see the Clip Editor in the Events 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 version.
  2. By default, Popcorn Maker includes the first 30 seconds of your clip in your project. 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’d like.
  3. If you’d like, you can turn the video portion of your clip off.
  4. … and you can do the same thing with the audio, as well as turn the volume down.
  5. Here’s where you can change the title of your clip.
  6. Here, you can specify that you’d like time in your project before or after your video ends.

Making sense of the timeline

media_1377042421900.png

This image shows what a timeline from a completed project — with a number of different 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.

Add some text to your video

media_1377035418217.png

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

Explore your options

media_1377038465471.png

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 around on 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 the font and color.

Add an article from Wikipedia

media_1377042159149.png

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

Add a map

media_1377040954484.png

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.

Add a popup

media_1377039002129.png

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.

Add an image

media_1377041451401.png

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

Replay snippets with a loop

media_1377041618953.png

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

Pause for as long as you want.

media_1377041964268.png

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

Save and share your project

media_1377043833783.png

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 to embed 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

media_1377044042227.png

Completed projects include a remix button, with which anyone on the Internet can use your content to create a new version of your project.

11 thoughts to “Using Mozilla Popcorn Maker to Create an Interactive Video”

  1. Hi:

    I am interested to create a site to exhibit scroll paintings. Can you give some suggestion on how to build such a site using HTML5?

    Thanks.
    John

  2. Thanks for the detailed tutorial, will surely point my students here next time I introduce Popcorn – -and what a treat to know you can bring in Internet Archive video, since its not easy to embed from the main site.

    The thing about Popcorn is (a mistake I made on the first [disasterous] assignment I gave) that it is not a substitute for a video editor– if you go beyond one maybe two video clips, you will experience a lot more stuttering and mis aligned transitions (Popcorn needs to preload all video). I’ve done a few that have worked with one video as audio only, but once you start tossing video clips in the timeline, it really chokes.

    It’s better to think of it as you have shown here, to augment and remix a video.

    Thanks again.

  3. Is there a way to create a project and have it play offline? As a stand alone project, that is. If not, any suggestions as to what I may use for that sort of thing?

Leave a Reply

Your email address will not be published.