Walkthrough



// ensure the web page (DOM) has loaded document.addEventListener("DOMContentLoaded", function {

// Create a popcorn instance by calling the Youtube player plugin var example = Popcorn.youtube(          '#video',           'http://youtu.be/hnQZHBodpwk' );

// add a footnote at 0 seconds, and remove it at 4 seconds example.footnote({          start: 0,           end: 3,           text: "Assassins Creed II with Annotations",           target: "footnotediv"         }); // add a footnote at 2 seconds, and remove it at 6 seconds example.footnote({          start: 4,           end: 13,           text: "See, you can change the text down here - lets see what Wikipedia says about AC",           target: "footnotediv"         }); example.wikipedia({         start: 5,          end: 13,          src: "http://en.wikipedia.org/wiki/Assassin%27s_Creed_(video_game)",          title: "Assassins Creed",          target: "wikidiv"         }); example.footnote({         start: 13,          end: 16,          text: "Assassins Creed takes place in Italy, right?",          target: "footnotediv"         }); example.googlemap({      start: 13.5,       end: 16,       type: "ROADMAP",       zoom: 5,       location: "ITALY",       target: "map"       }); example.footnote({          start: 16,           end: 20,           text: "Maybe this part is in Venice...",           target: "footnotediv"         }); example.googlemap({      start: 16,       end: 18,       type: "ROADMAP",       zoom: 0,       location: "VENICE",       target: "map"       }); example.googlemap({      start: 18.1,       end: 20,       type: "ROADMAP",       zoom: 10,       location: "VENICE",       target: "map"       }); example.googlemap({      start: 20.1,       end: 23,       type: "ROADMAP",       zoom: 14,       location: "VENICE",       target: "map"       }); example.footnote({          start: 20,           end: 23,           text: "Stop, jump back in the water",           target: "footnotediv"         });

example.footnote({          start: 24,           end: 26,           text: "Now, turn right and follow the gondola...",           target: "footnotediv"         }); example.image({      start: 24,       end: 26,       src: "turn-right.png",       target: "map"     }); example.footnote({          start: 43,           end: 48,           text: "Pull yourself in and knock that guy out!",           target: "footnotediv"         }); example.footnote({          start: 50,           end: 53,           text: "Change into a plain cape",           target: "footnotediv"         }); var pop = Popcorn( "#video" );

// play the video right away example.play;

}, false);

Popcorn JS Wikia Walkthrough Demo