master

分支 (4)

标签 (30)

管理

管理

master

hotfix

butter

storycamp

v1.5.11

v1.5.10

v1.5.9

v1.5.8

v1.5.7

v1.5.6

v1.5.5

v1.5.4

v1.5.3

v1.5.2

v1.5.1

v1.5.0

v1.4.0

v1.3.0

v1.3

v1.2

v1.1.1

v1.1

v1.0

v0.9

popcorn-js
/
example.html

<!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>