intro to interactive video with popcorn

7/30/2019 Intro to Interactive Video With Popcorn

1/4

Popcorn.js is a JavaScript library for creating browser-based events on a video timeline. It was written byRick Waldron at Bocoup. It makes video web-native and allows you to have fully interactive videos online.For those of you who do not code there is Popcorn Maker, an interactive online video editor.

A great example of how Popcorn is useful for online news comes from Laurian Gridinoc, one of the 2012OpenNews fellows. He made an interactive video for the BBC about the last movements of Ian Tomlinsonbefore he died at the G8 summit in London. You can view it here http :// www .bbc .co .uk /news /uk -18798942

To show you what can be done using Popcorn here are detailed instructions on how to recreate this pieceusing Popcorn Maker plus video, Popcorn Maker and Google Earth and making the web page usingPopcorn.js. Start where you are most comfortable and see how far you can go! To make sure you cansave and share your projects please sign up via persona.

Media:

- Here is the video made using Google Earth: http :// vimeo .com /51281762- Here is the first image you will need to overlay: https :// dl.dropbox .com /u /29645873/ Popcorn /scene 1. png- Here is the second image you will need to overlay:https :// dl.dropbox .com /u /29645873/ Popcorn /scene 2. png- Here is the third image you will need to overlay: https :// dl.dropbox .com /u /29645873/ Popcorn /scene 3. png- Here is the fourth image you will need to overlay:https :// dl.dropbox .com /u /29645873/ Popcorn /scene 4. png- Here is the fifth image to overlay: https :// dl.dropbox .com /u /29645873/ Popcorn /scene 5. png- And here is the last image to overlay: https :// dl.dropbox .com /u /29645873/ Popcorn /scene 6. png

Popcorn Maker plus video:

- In Popcorn Maker go to the Media tab and paste in the link to the video above- In the Events tab, drag the image icon onto the timeline editor - Click on the icon on the timeline editor and copy and paste the URL for the first image into the LinkURL box.- Adjust the start and end times to 1.11 and 4.21 respectively.- Now add in the rest of the images at: 9.8 - 16.8, 23.8 - 30.4, 37 - 43, 49.8 - 56, 1:02.8 - 1:10- If you hover your cursor in the video window when the image is present you can adjust the size andplacing of the image over the video using the green cross hairs and tag- Hit the Share tab, give your project a title, add yourself as an author and share!

That was easy! Youre amazing! Now lets try making the maps ourselves.

Popcorn Maker plus Google Earth:

The following is a guideline of time and media to make a map-based Popcorn interactive video of the lastmovements of Ian Tomlinson:

- To make a blank popcorn i.e. no media file, go to the Media tab and put #t=,112 into the box. Thismakes 112s of blank media for you to overlay your maps- Lay you maps. You can make it a mix up of streetview, roadmap and satellite. To add a Googlemapevent go to the Events tab and drag the Googlemap icon onto your timeline. You can drag and expand iton the timeline or in the editor bar to the left you can change the times manually. This is where you
http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://vimeo.com/51281762http://vimeo.com/51281762https://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttp://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://www.bbc.co.uk/news/uk-18798942http://vimeo.com/51281762http://vimeo.com/51281762http://vimeo.com/51281762http://vimeo.com/51281762http://vimeo.com/51281762http://vimeo.com/51281762https://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene1.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene2.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene3.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene4.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene5.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.pnghttps://dl.dropbox.com/u/29645873/Popcorn/scene6.png


2/4

choose your map type, enter the location for your map and for this exercise youd want to tick the Full-Screen box. Zoom into the level you want and pick your transition type.- Grab the image URLs from the BBC article and place them on your maps. You can add an image on topof your map by dragging the image icon from the Events tab onto a timeline layer above the layer wherethe map sits. Otherwise the image will be behind the map. Put the URL into the Image URL box (then hitEnter). Adjust the times in the editor and the size and placement of the image on the video canvas.- Why not put the text into pop-ups? Just drag a pop-up icon from the Events editor onto a timeline layer above your maps. Put the text in the Text box (hit Enter). Adjust the time and change your pop-up icon,type and transition. You can adjust the times so that the viewers have time to read it all or you can add ina pause (under Events) and then let them hit play when theyre done.- Why not add some ambience by added street noise from SoundCloud to your Media?http :// soundcloud .com /dargo 94/ street -noise

Popcorn.js:

Now lets make an interactive page rather than just a video. Youll notice that by using Popcorn Maker you can only export a video and all events you add in appears in the video frame. To make a page thatlooks and acts like the BBC article we will need to code the page using Popcorn .js .

Seeing as we dont want to get into copyright issues we will not be using the pictures or videos. Insteadwell be adding a larger view map as well as the video and the route layers.

Go to this url and a zip folder will be downloaded. Open it up where you develop web pages. Openindex.html in your browser and take a look at it in an editor. This is the skeleton for the article.

Firstly, youll need to create a popcorn instance on line 13. To do this create a variable along the lines:

var variable = Popcorn.smart(#id-of-div-you-want-the-video-in, path-to-video);

In this instance we have provided you with the video but popcorn can embed YouTube and Vimeo videosby replacing smart with youtube or vimeo and adding the link instead of the path.

Because we are adding in our own video element we need to hide the video controls that come with thebrowser. We are going to made the button that changes the text control the video. So on line 16 add:

variable.controls(false);

Next we set the video to play immediately on loading the page (note: this will not be noticeable as we setthe video to pause before we see movement). To do this on line 19 add:

variable.play();

Now we need to start adding our Popcorn elements! Those are maps, overlays, and pauses. Youll find inthe zip folder a cue sheet. To add a Google map the formula is:
http://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://popcornjs.org/http://popcornjs.org/https://dl.dropbox.com/u/29645873/Popcorn/location-based-storytelling.ziphttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://soundcloud.com/dargo94/street-noisehttp://popcornjs.org/http://popcornjs.org/http://popcornjs.org/https://dl.dropbox.com/u/29645873/Popcorn/location-based-storytelling.zip


3/4

variable.googlemap({start: number-of-seconds-from-zero-you-want-event-to-start,end: number-of-seconds-from-zero-you-want-event-to-end,target: id-of-div-you-want-map-to-go-in,type: STREETVIEW or ROADMAP or SATELLITE,zoom: level-of-zoom, # always 1 for streetview,location: name-of-location,

or lat: latitude,long: longitude,

The formula for adding an image is:

variable.image({start: number-of-seconds-from-zero-you-want-event-to-start,end: number-of-seconds-from-zero-you-want-event-to-end,target: id-of-div-you-want-image-to-go-in,src: link-to-image,

The formula for adding a pause is simply:

variable.cue(time-in-seconds-at-which-to-pause, function() {variable.pause(); });

So check the cue sheet and go ahead and add those in! To watch the video and see how it interacts withthe maps on the page at this point, comment out the pauses and load the page.

Before we deal with the navigation there is a little hairy mess we need to clean up first. The Popcorn

Image plugin keeps adding links in the overlays which we don't want. So to get rid of those, where yousee the comment you need to add:

variable.code({start: 0,end: 51,onFrame: function() { $('#overlay a').removeAttr("href"); }

});

Now lets make the video and maps change to according to our navigation. Take a look at the Info panelpagination section. You see how the pagination works? Right now it doesnt because we need you tomake the video play when next is clicked.

That was easy! Now we need the video to seek back when previous is hit. The times to seek back to arein the cue sheet. You need to add these to the variable paging and then jump back to them using aPopcorn method called currentTime .

Your story should look (and behave) something like this .

For the full range of methods available check out the documentation . Youll see there is more than whatsavailable on Popcorn Maker!
http://popcornjs.org/popcorn-docs/media-methods/#currentTimehttp://popcornjs.org/popcorn-docs/media-methods/#currentTimehttp://datamineruk.github.com/popcorn/location-based-storytelling/http://popcornjs.org/popcorn-docs/getting-started/http://popcornjs.org/popcorn-docs/media-methods/#currentTimehttp://datamineruk.github.com/popcorn/location-based-storytelling/http://popcornjs.org/popcorn-docs/getting-started/


4/4

Over to you:

Why not make something similar. It could be about your journey to Ravensbourne. Or if you have holidayphotos you can use that. You may want to give people a tour of your home town. Or search in the newsfor a suitable story, find photos and video (we won't tell if you use them, just remember copyright issues).

Showcase:http ://hyper -audio .org /r/http ://www .aljazeera .com /indepth /interactive /2012/04/20124107156511888. html http ://www .aljazeera .com /indepth /interactive /2012/10/2012101792225913980. html http ://happyworm .com /clientarea /greencorps /v 12/
http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://hyper-audio.org/r/http://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/04/20124107156511888.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://www.aljazeera.com/indepth/interactive/2012/10/2012101792225913980.htmlhttp://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/http://happyworm.com/clientarea/greencorps/v12/

intro to interactive video with popcorn

Documents