Popcorn Simple Example

by ian_smithz

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>


<div id="footnote-container"></div>

CSS

html{font-family:arial;}

JavaScript

// Create a popcporn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#video");


// add a footnote at 2 seconds
pop.footnote({
      start: 2,
      end: 6,
      text: "This footnote is the stepping stone of progress!",
      target: "footnote-container"
    });

// play the video right away
pop.play();