Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8 />
    <title>My Web Page 3</title>
    
    <!-- load in the popcorn.js library -->
    <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
    
    <script>
      // ensure the web page (DOM) has loaded
      document.addEventListener("DOMContentLoaded", function () {
 
         // Create a popcorn instance by calling Popcorn("#id-of-my-video")
         var pop = Popcorn("#ourvideo");
 
         // add a footnote at 2 seconds, and remove it at 6 seconds
         pop.footnote({
           start: 2,
           end: 6,
           text: "Pop!",
           target: "footnotediv"
         });
         
         // play the video right away
         pop.play();
 
      }, false);
    </script>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>This is my web page, featuring a popped video using the footnote plugin.</p>
    <video height="180" width="300" id="ourvideo" controls>
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
      <source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
    </video>
    <div id="footnotediv"></div>
    
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
phillchillpro
0viewers