Skip to content
This repository
Anna Sobiepanek annasob
file 64 lines (61 sloc) 2.253 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
<!DOCTYPE html>
<html>
<head>
  <title>Popcorn Simple Demo</title>
  <!-- You muct include the popcorn.js file. Ensure the path is correct -->
  <script src="popcorn.js"></script>
 
  <!-- You must include each plug-in needed for the demo individually. Ensure the path is correct -->
  <!-- Footnote Plugin -->
  <script src="plugins/footnote/popcorn.footnote.js"></script>
  <!-- Subtitle Plugin -->
  <script src="plugins/subtitle/popcorn.subtitle.js"></script>
  
  <!-- Link popcorn-js to the video by uing the id of the video element -->
  <!-- You need to tell popcorn when you want each plugin to execute -->
  <script>
    // wait for DOM to load
    document.addEventListener('DOMContentLoaded', function () {
      // popcorn events are chainable this means that you can also do:
      // p.play(); or p.footnote{};
      // Make a popcorn instance, passing the id of the video element.
      // notice the <video id='video' ... > at the bottom of the page.
      var p = Popcorn('#video')
      // use the footnote plugin
      // notice the <div id='footnotediv'> tag at the bottom of the page
      .footnote({
        start: 0, // seconds
        end: 15, // seconds
        text: 'This video made exclusively for drumbeat.org',
        target: 'footnotediv'
      } )
      // use the subtitle plugin
      .subtitle({
        start: 1, // seconds
        end: 15, // seconds
        text: 'this is a subtitle'
      } )
      // make the video play automatically
      .play();
    }, false);

  </script>
</head>
<body>
  <h1>Popcorn Simple Demo</h1>
  <p>You should see a footnote "This video made exclusively for drumbeat.org" appear right away</p>
  <p>You should see a subtitle "this is a subtitle" appear at 1 sec away</p>
  <!-- You need a video element with an id -->
  <video id='video'
    controls
    width= '250px'
    poster="test/poster.png">
    <source id='mp4'
      src="test/trailer.mp4"
      type='video/mp4; codecs="avc1, mp4a"'>
    <source id='ogv'
      src="test/trailer.ogv"
      type='video/ogg; codecs="theora, vorbis"'>
    <p>Your user agent does not support the HTML5 Video element.</p>
  </video>
  <!-- this is needed for the footnote plugin -->
  <div id="footnotediv"></div>
</body>
</html>
Something went wrong with that request. Please try again.