Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch '313' into 0.3

  • Loading branch information...
commit d9075f481eda99d8bc3b16f44a04744004963fa6 2 parents f7c3586 + 3e17cab
@annasob annasob authored
Showing with 64 additions and 207 deletions.
  1. +64 −0 example.html
  2. +0 −42 test/demo.html
  3. +0 −165 test/demo.js
View
64 example.html
@@ -0,0 +1,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>
View
42 test/demo.html
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <title>Popcorn API Draft DEMO</title>
-
- <script src="jquery.js"></script>
- <script src="../popcorn.js"></script>
- <script src="demo.js"></script>
-</head>
-<body>
- <h1 id="qunit-header">Popcorn API Draft</h1>
-
- <style>
- /* test positioning */
-
- video {
- position: fixed;
- left: 100px;
- top: 100px;
- }
-
- </style>
-
- <div>
- <video id='video'
- controls preload='none'
- poster="http://media.w3.org/2010/05/sintel/poster.png">
-
- <source id='mp4'
- src="http://media.w3.org/2010/05/sintel/trailer.mp4"
- type='video/mp4; codecs="avc1, mp4a"'>
-
- <source id='ogv'
- src="http://media.w3.org/2010/05/sintel/trailer.ogv"
- type='video/ogg; codecs="theora, vorbis"'>
-
- <p>Your user agent does not support the HTML5 Video element.</p>
-
- </video>
- </div>
-</body>
-</html>
View
165 test/demo.js
@@ -1,165 +0,0 @@
-// EXAMPLE PLUGIN: SUBTITLER
-
-(function (Popcorn) {
-
-
-
-
-
-
- Popcorn.plugin( "complicator", (function () {
-
- //create your fucking dom elements here.
-
-
- return {
-
- start: function () {
-
- },
-
- end: function () {
-
- },
-
- timeupdate: function () {
-
- }
- };
-
-
- })()
- );
-
-
-
-
-
-
- Popcorn.plugin( "subtitler" , function ( options ) {
-
- var subtitles = [],
- context = this.video,
- div = document.getElementById("subtitle-container");
-
- // Check for existing frame
- if ( !div ) {
- // if no existing frame, create it.
- div = document.createElement("div");
- div.id = "subtitle-container";
-
- context.parentNode.appendChild(div);
-
- Popcorn.extend(div.style, {
- //border: "1px solid red",
- width: context.clientWidth + "px", //offsetWidth
- height: context.clientHeight + "px", //offsetHeight
- top: context.offsetTop + "px",
- left: context.offsetLeft + "px",
- position: "absolute",
- color: "white",
- textShadow: "black 2px 2px 6px",
- fontSize: "18px",
- fontWeight: "bold",
- textAlign: "center"
- });
-
-
- }
-
- if ( typeof options === "object" && "join" in options ) {
- subtitles = options;
- } else {
- subtitles.push(options);
- }
-
- this.listen("timeupdate", function (event) {
-
- Popcorn.forEach(subtitles, function ( subtitle ) {
-
- var temp = div.querySelectorAll( subtitle.id );
-
- if ( this.currentTime() >= subtitle.start && !temp.length ) {
- div.innerHTML = div.innerHTML + subtitle.html;
- }
-
- if ( temp.length && this.currentTime() >= subtitle.end ) {
-
- Popcorn.forEach(temp, function ( title ) {
- if ( title && title.style ) {
- title.style.display = "none";
- }
-
- });
-
- }
- }, this);
-
- });
- });
-
-})(Popcorn);
-
-
-// END EXAMPLE
-
-
-$(function () {
-
- var p = Popcorn('#video');
-
-
-
-
- p.play();
-
-
- p.subtitler({
- id: "#subtitle-a",
- start: 2, // seconds
- end: 5, // seconds
- html: '<p id="subtitle-a">Appear at 2 second mark, dissappear at 5 second mark</p>'
- });
-
- // Butter would generate the data to populate this api function call's argument
-
- p.subtitler([
- {
- id: "#stays-forever",
- start: 5,
- html: '<p id="stays-forever">Stays forever!</p>'
- },
- {
- id: "#comes-and-goes-1",
- start: 10,
- end: 12,
- html: '<p id="comes-and-goes-1">Comes and goes</p>'
- },
- {
- id: "#comes-and-goes-2",
- start: 12,
- end: 14,
- html: '<p id="comes-and-goes-2">BACK! For the second time...</p>'
- },
- {
- id: "#comes-and-goes-3",
- start: 14,
- end: 16,
- html: '<p id="comes-and-goes-3">This is the last time. I promise.</p>'
- }
-
- ]);
-
-
-
-
- p.complicator({
- start: 1,
- end: 10,
- wtf: "throws exception?"
- });
-
-
-
-
-});
Please sign in to comment.
Something went wrong with that request. Please try again.