FLOSS Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Open Video Production Workbook

Hands on - Using Popcorn Maker

The Popcorn Maker Tutorial


Get a feel of the Popcorn Maker editor and understand how timelines, media clips and events work.


On the Popcorn Webmaker site there's a great tutorial to get started. The tutorial is easy to understand and gives a clear overview of what it does and gives some hands on examples of enhancing video with elements from across the web. 

Visit https://popcorn.webmaker.org/ and click 'Take a Tutorial'.

Crafting your own Popcorn Maker experience

Express your creativity in Popcorn Maker by making your own enhanced video experience.


Had a look at the Popcorn Maker tutorial? Great! Now let's get creative! In this task you'll create your own dynamic and interactive time-based video experience.

Go to the Popcorn Maker home page and click 'Start a project':
This gives your a fresh blank timeline to be filled with video and time-based web elements:
Choose a video about a recent event that is hosted somewhere online, either YouTube, Vimeo or somewhere where you have access to the source file (like you're own server or www.archive.org). Add it as a media clip to the Popcorn Maker editor and enhance it with at least 3 different kinds of events.
If you're unsure about how to use the different components of the editor, play around and try things out or have another look at the Popcorn Maker tutorial.

Matching Events in Popcorn Maker and Popcorn.js


Understand how events you've created in Popcorn Maker, correspond to events in the underlying Popcorn.js JavaScript code.


Take a project you've created in Popcorn Maker that includes at least 3 different types of events. Save your project (you need a free Mozilla Persona account for this). Now go to the 'Project' tab (next to the 'Events' tab). This is where you can adjust settings, share your creation, embed your project or view your project's source. This is what we're doing in this task.

Select 'View Source'. This opens up a new window that contains all the underlying HTML and JavaScript code that powers the project you have just created. Looking at the source code for the Popcorn Maker project allows us to start to think about coding Popcorn ourselves. For now, try to identify the parts of code that represent the 3 different events you have created in Popcorn Maker. Which types of event are they? Have a look at their parameters (like 'start' and 'stop' time code), do they match those of the events in the Popcorn Maker editor?


There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.