This course will become read-only in the near future. Tell us at if that is a problem.

Chat Recap

Thanks to everyone who could make it to the chat last week!  I've posted the full transcripts and ; I put together some of the main ideas here.  This is a wiki page and you can edit and add your own ideas, too.

What's going on?


13:31 humph I think the best way to think about the web and popcorn is that you have a canvas where you can put rectangles, and you can stack them on top of each other, hide them, move them, etc. and time any of that to things in the video
those rectangles can contain anything the web can contain: whole web pages, images, data from twitter, maps from google, whatever


Ideas for Collaboration


deimidis I was very interested in popcorn since I read about it. I'm trying to figure out interesting ways to use videos in the web. And maybe help a friend with his muscial shows
my first intro into what HTML5 could do with video was that incredible Arcade Fire google earth experience that Chris Milk did for google chrome...beyond that I've just been seeing some of the great new possibilities that you're doing with popcorn.js recently...
13:23 humph one of the things I'm excited about is mixing video, 3D (WebGL), 2D animations, live web content, etc
I'm excited by the idea of mixng media types on the web, and popcorn can be used to do this really well
13:29 secretrobotron popcorn-in-the-planetarium is a good clash of web technologies with an educational purpose
13:35 humph we have something called player plugins
these allow us, or you, to create new types of media backends for popcorn.js to use
13:34 ndoiron on the YouTube/Flash question... Popcorn has HTML5, YouTube, and Vimeo players, plus Popcorn is open to non-video items being players too
like an animated graffiti or a Google Earth tour
22:20 blujconcepts as the web progresses and browsers are updating the media tags are becoming heavily interactive, my goal is to implement a podcast type interaction that links in with Google Maps API

Real examples of Interactive Open Video

On cool (but advanced) projects using 3D



13:26 ndoiron WebGL is cool but has a steep learning curve... is it possible for there to be a simple example that just makes the video screen and lets us move it around in 3D space?
that'd be a good starting point to hack on it
13:28 humph I agree webgl stuff is not the right place to start
you can do a ton without needing 3D
13:28 secretrobotron ndoiron:


An example of Popcorn for you to edit and work with


13:40 ndoiron I made a simple example where it shows an image partway through the video - sort of a "Hello World" example - which you can edit and take in different directions
the really interesting part of this example is in the JavaScript section (bottom left)
I send Popcorn the location of the <video> tag...
13:43 humph where location is the ID (unique name) of the element in the page  [ the HTML section, in the top left, you can see <video id="video"> and that's the ID used  ]
13:45 humph are people familar with JavaScript's object notation?
{start: 1, end: 10...} ?
ndoiron these are properties that I send to Popcorn's image plugin
start and end are pretty straightforward - they're when the image appears and disappears
src is the URL / link to the image that will appear
13:49 Deiren great thanks - yes made changes and it's running them
do my changes affect everyone?
ndoiron: changes only appear to you. Click run to test, and when you're done click Update and get a shareable URL
13:54 ndoiron and like it says on that example, you can get more short videos at Wikimedia Commons
14:07 justinstoller I have a quick question, I don't see image in the docs
14:07 humph deimidis: being written now
14:16 Deiren could anyone suggest a good starting point resource(s) where I can get some javascript basics down over the next week?
14:16 Boozeniges is always a good start for the syntax
14:20 secretrobotron: in general, if you're curious about any aspect of javascript/html, search for it on google along with the acronym "mdc"
it's a great resource for developers (i use it all the time)

Task Discussion