added example.html and removed test/demo.js and demo.html [mozilla#313 …

…state:peer-review-requested]
walterShen · Feb 8, 2011 · ec6d6d8 · ec6d6d8
1 parent 614f102
commit ec6d6d8
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 207 deletions.
diff --git a/example.html b/example.html
@@ -0,0 +1,65 @@
+<!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
+      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 the first subtitle of 2011'
+      } )
+      // make the video play right automatically 
+      .play();
+    }, false);
+
+  </script>
+</head>
+<body>
+  <h1 id="qunit-header">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 the first subtitle of 2011" appear at 1 sec away</p>
+  <div>
+	<!-- You need a video element with an id -->
+    <video id='video' 
+      controls preload='none' 
+      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> 
+  </div>
+  <!-- this is needed for the footnote plugin -->
+  <div id="footnotediv"></div>
+</body>
+</html>
diff --git a/test/demo.html b/test/demo.html
diff --git a/test/demo.js b/test/demo.js