All posts tagged popcorn

HTML Webmaker Slides Driven by Popcorn

Earlier this month I was kindly invited to talk at Hack de Overheid, a very well-organized hackathon in Amsterdam for building apps around open data sets.

There were 20-odd governmental organizations and civic institutions pitching their datasets. The content ranged from cultural data from museums and archives to open API calls from the fire department.

You even receive a coveted coffee cup when you release a dataset, based on the five-star Linked Data scheme by Tim Berners-Lee.

Below are the slides I made for the talk, based on Mark Surman’s Personal Democracy Forum keynote.

I enjoyed making these slides because:

  • I learned to hack together a new webmaker theme
  • It uses Popcorn.js to drive the slide transitions (thanks, Ben!)
  • It’s very easy and fun to change the images in HTML slides.

Please feel free to download, reuse and remix the files!

Mozilla Popcorn Learning Lab in London

Next up in the round of event recipes, Brett & I wrote up a Popcorn learning lab.

Since publishing the Popcorn hack jams how-to, we’ve been in touch with film festivals, coder communities, and video labs from all over about running events about Popcorn.

Skill up the community

At the moment, we’re still in a resource-crunch. Even though we can help event organizers to plan and facilitate their hack jam, there’s a shortage of people who know how to use Popcorn.

The options we currently have are:

  • fly around Team Popcorn, based primarily in North America
  • or, skill up web developers the world over, empower them to code and facilitate, and reward core contributors with trips to cool places like Cannes and Cape Town.

The more we can train the trainers, the more we can scale these open projects.

Test Round in London

To test out the recipe and grow the European community, we’re throwing a learning lab on Sunday, March 25 in London.

We’re looking for Javascript developers and filmmakers bold enough to dabble with code. Drinks, code, and good ideas are in the mix at this one-day event led by the Mozilla Popcorn team. Please sign up to join!

Want to know what we’ll do in London, or how to host your own Popcorn learning lab? Read our howto.

HowTo: Mozilla Popcorn Learning Lab

Popcorn Learning Lab

A Mozilla Popcorn Learning Lab is an event to introduce developers and filmmakers to Popcorn.js, an HTML5 javascript library that integrates the web into media production.

Participants will create plugins, hack templates, and code a demo that easily remixes web content into video, using open tools and collaborative design.

You can organize a learning lab with this guide! (A huge shout-out to Julia for translating this into French)

Why Popcorn?

Well, besides it being fun Javascript library to play with, it’s a powerful tool to create web-enabled video. Christian Heilmann did a great job describing its strengths and opportunities:

  • Video is typically hard to edit and change
  • Video is often a black, unindexed hole on the web
  • Separation allow for easier maintenance, enhancement, accessibility, and discovery
  • HTML5 video is just another page element
  • The timestamp is the glue
  • Tap into the real-time web using Popcorn.js

Demos also speak loudly about Popcorn’s possibilities. Take a look!


Participants will get their hands dirty by sharing hacks and peer-reviewing projects. Demos from the Popcorn community provide inspiration and running code to build from.

The motto: Learn by sharing and making!

Learning Labs can be hosted in partnership with Mozilla, who provides facilitation experience and extensive knowledge of the software, and by community members versed in Popcorn.

Mozilla will work with partners to ensure participants leave with a deeper understanding of Popcorn’s possibilities and how to teach others.

Learning Labs can also be self-organized following this handy guide!


Teams consist of:

  • Web developers skilled in Javascript
  • Bold filmmakers wanting to play with cod
  • Experienced Popcorn.js contributors

Small teams of web developers are paired with experienced contributors. Facilitators and web designers are also key roles at the learning lab.


Pre-Learning Lab Engagement

Mozilla and partners contact Popcorn community members, Javascript developers, and filmmakers in the area. Through lightweight interviews with sampling of participants, the organizers calibrate the skill levels and interests of the group, fine-tuning the agenda around what people want to learn and make.


All the participants and facilitators meet for a group demo. Popcorn contributors walk through the basics of the Javascript framework, highlighting use cases and possible avenues of development.

In the first hacking session, depending on technical skill, participants choose to:

  • play with Popcorn Maker — an authoring environment for interactive video — and turn a video interactive.
  • or dive into coding a plugin, a powerful way to bring in another service, like Flickr, OpenStreetMap, DocumentCloud or many others, to respond to video.

After busting a hack, the group shares back what they made. Participants give feedback, file bugs, offer help, and note ways to improve the experience.

In the second hacking session, you can:

Participants code their project, giving feedback and checking in with more experienced contributors if they get stuck.

At the end of the day, a screening and party is held. Each group demos their final code, evaluates the process, and celebrates all the hard work.

Afterward, participants sign up for activities they’re interested in: joining upcoming events, contributing code to Popcorn.js, teaching other developers, or just staying informed about the project.


  • At least one computer per team.
  • Video-editing software as well as a fast, modern browser.
  • Popcorn.js installed.
  • Video files for each demo.
  • Reliable wifi.
  • Power outlets.
  • Projector with suitable adapters
  • Meals – events should be catered
  • Amenities such as coffee, water, and snacks.
  • Travel support to the learning lab, where needed.

Case Studies of Popcorn Events

Independent Television Service (ITVS) + Mozilla, San Francisco. Video:

“ButterCamp”, NYC, March 2011.

Mozilla Festival, London. November 2011.

Photos: CC BY-NC-SA by Jonathan Mcintosh