• Introduction
• Overview
• How to Use the Open Video Workbook
• Help Create More Open Video Modules
• Subtitling
• Terms & Techniques: Subtitling
• Case Study: Into the Fire
• Hands-On: Creating Subtitles with Amara
• Resources: Subtitling
• Creating a DVD
• Case Study: Straight-to-DVD Distribution
• Hands-On: DVD Authoring
• Resources: DVDs and Free Software
• Online Distribution
• Case Study: Engage Media
• Hands-On: Uploading a Video with Plumi
• Resources: Online Video Distribution
• Create an Open Video file
• Terms & Techniques: Open Video Files
• Hands-On: Creating Open Video Files with FireFogg
• Hands-On: Creating Open Video Files with Miro Converter
• Resources: Making the Case for Open Video
• Expanding Web Video
• Terms & Techniques: Expanding Web Video
• Case Study: Popcorn Maker
• Hands-On: Popcorn Maker Tutorial
• Hands-On: Crafting your own Popcorn Maker experience
• Hands-On: Matching Events in Popcorn Maker and Popcorn.js
• Case Study: Popcorn.js
• Hands-On: Getting started with visual content in HTML
• Hands-On: Including video in HTML5
• Hands-On: Adding a time-based footnote with popcorn.js
• Resources: Taking Popcorn Further
• Projection
• Terms & Techniques: Video Projection
• Case Study: Projection
• Hands-On: Video Projection Mapping with LPMT
• Resources: Projection
• Editing Video
• Case Study: Video Editing for The Record
• Hands-On: Editing an Interview with Kdenlive
• Transcoding and Video Codecs
• Hands-On: Transcoding Files with FFmpeg
• Hands-On: Using a Graphical User Interface vs Command Line
• Streaming
• Hands-On: Streaming Video with VLC
• Resources: Streaming
• Resources: Open Video Codecs
• Train the Trainer
• Teaching Open Video
• Appendix
• About the Open Video Workbook
• Outlook: The Politics of Code
• Glossary

Hands-On: Matching Events in Popcorn Maker and Popcorn.js

Objectives

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

Task

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.

[TODO]