Popcorn.js is a JavaScript library for creating browser-based events on a video timeline.

It was written by developers from Bocoup, Senecas CDOT, and Mozilla. 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 2012 OpenNews fellows. He made an interactive video for the BBC about the last movements of Ian Tomlinson before 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 simulate this piece using Popcorn Maker plus video, Popcorn Maker and Google Maps and recreate it using Popcorn.js. Start where you are most comfortable and see how far you can go! To make sure you can save and share your projects please sign up via Persona. Media: - Go to https://popcorn.webmaker.org - Here is the video made using Google Earth: YouTube: http://youtu.be/iGoY3jrCies - Here is the first image you will need to overlay: https://dl.dropbox.com/u/29645873/Popcorn/scene1.png - Here is the second image you will need to overlay: https://dl.dropbox.com/u/29645873/Popcorn/scene2.png - Here is the third image you will need to overlay: https://dl.dropbox.com/u/29645873/Popcorn/scene3.png - Here is the fourth image you will need to overlay: https://dl.dropbox.com/u/29645873/Popcorn/scene4.png - Here is the fifth image to overlay: https://dl.dropbox.com/u/29645873/Popcorn/scene5.png - And here is the last image to overlay: https://dl.dropbox.com/u/29645873/Popcorn/scene6.png ------------------------------------------------------------------------------

Non-programming track:
Popcorn Maker will only create an embeddable video so you will not have the interactive page elements seen in the BBC interactive (that requires coding, see below) but you will be adding the elements on top of the video. 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 Link URL box. - Adjust the start and end times to 0.5 and 2.5 respectively. - Now add in the rest of the images to come on a half a second after the video has stopped moving and come off a half a second before it starts again - If you hover your cursor in the video window when the image is present you can adjust the size and placing 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 last movements 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. This makes 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 Googlemap event go to the Events tab and drag the Googlemap icon onto your timeline. You can drag and expand it on the timeline or in the editor bar to the left you can change the times manually. This is where you choose your map type, enter the location for your map and for this exercise youd want to tick the FullScreen 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 top of your map by dragging the image icon from the Events tab onto a timeline layer above the layer where the map sits. Otherwise the image will be behind the map. Put the URL into the Image URL box (then hit Enter). 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 in a 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/dargo94/street-noise ---------------------------------------------------------------------------

Programming with JavaScript track:

For this hacktivity you will need a coding editor and a webserver like Apache. It may be easiest to just install MAMP. 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 that looks 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. Instead well 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. Open index.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-tovideo); In this instance we have provided you with the video but popcorn can embed YouTube and Vimeo videos by 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 the browser. 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 set the 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 in the zip folder a cue sheet. To add a Google map the formula is:

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 with the 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 you see 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 panel pagination section. You see how the pagination works? Right now it doesnt because we need you to make 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 are in the cue sheet. You need to add these to the variable paging and then jump back to them using a Popcorn method called currentTime. Your story should look (and behave) something like this. The code for it is here. For the full range of methods available check out the documentation. Youll see there is more than whats available on Popcorn Maker! --------------------------------------------------------------------Over to you: Why not make something similar. It could be about your journey to Ravensbourne. Or if you have holiday photos you can use that. You may want to give people a tour of your home town. Or search in the news for 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/v12/