22 :: Adding Maps to Popcorn

I can’t remember exactly when I figured out what a JavaScript library was, but when I finally figured it out, so much more of what I reading about web development started making sense.

It can be very confusing to a newcomer. For example, Mozilla’s Popcorn Maker could easily be mistaken for just another web application that adds ‘events’ to videos. But it’s actually a little more complicated than that.  Popcorn Maker is the very friendly interface to the Popcorn.js API.  Which means that you can bypass the web interface and create the code directly to generate the same effects.

I became interested in Mozilla Popcorn Maker after watching this TED Talk by Ryan Merkley that put the site into some necessary context for me:  “Videos on the web should work like the web itself: Dynamic, full of links, maps and information that can be edited and updated live”

Just like how Leaflet.js has turned the map that was embedded into a frame on a webpage into an dynamic element that is a component up a webpage, Popcorn.js tries to do the same for video.  I can’t figure out why Popcorn.js hasn’t had more take up… although I suspect that the sheer magnitude of YouTube has something to do with it.

I’ve been meaning to look at Popcorn for perhaps instructional videos and perhaps, if I’m ambitious, for helping out with Mozilla’s Maker Party…

If you look at the docs and the demos, it all looks a little intimidating. But not to worry, that’s why there’s the web application interface for the API: Popcorn Maker! It makes video annotating easy!

I’m rubbish at video, and yet I was able to make this in about an hour or so in an afternoon:
(I made the screencast video itself with screenr.com and then supplemented it with popcorn)

(The Twitter embed doesn’t work because Twitter updated their API. According to Popcorn, there will an upgrade to correct this sometime soon).

What’s particularly compelling about Popcorn is it’s ability to “remix” other people’s videos. This is what makes this software so compelling for an educational and/or creative context.

And, just to bring this all together – that Popcorn Maker is is an HTML5 application that produces Popcorn.js, here’s the Javascript code that came out of my first video project.

Leave a Reply

Your email address will not be published. Required fields are marked *