Interactive Open Video with Popcorn.js

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

Chat Recap [May 9, 2011, 9:50 a.m.]

Thanks to everyone who could make it to the chat last week!  I've posted the full transcripts http://pastebin.com/0yvDKbme and http://pastebin.com/JZm82jZJ ; 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

https://developer.mozilla.org/es/demos/detail/gamits-parts

http://googleblog.blogspot.com/2010/08/arcade-fire-meets-html5.html

 http://www.bigspaceship.com/portfolio/hbo-voyeur/

https://hacks.mozilla.org/2011/03/nocomply/

http://vocamus.net/dave/?p=1233

http://robothaus.org/Popcorn-with-Brendan/3dpopcorn.html

 
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: http://robothaus.org/Popcorn-with-Brendan/3dpopcorn.html

 

An example of Popcorn for you to edit and work with

http://jsfiddle.net/tNhyt/6/

 

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
 
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 http://popcornjs.org/plugins
 
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 https://developer.mozilla.org/en/javascript 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)