Adding a plugin: Video(s) can be set to stop when a link is clicked

edsfault · May 1, 2011 · a13a19d · a13a19d
1 parent 5a54f78
commit a13a19d
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 0 deletions.
diff --git a/plugins/pause/popcorn.pause.html b/plugins/pause/popcorn.pause.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Popcorn Pause Demo</title>
+
+  <script src="../../popcorn.js"></script>
+  <script src="popcorn.pause.js"></script>
+  <script>
+   var output;
+
+   document.addEventListener('DOMContentLoaded', function () {
+     var p = Popcorn( '#video' , { pauseOnLinkClicked : true } )
+             .play();
+    }, false);
+  </script>
+</head>
+<body>
+  <h1 id="qunit-header">Popcorn Code Plugin Demo</h1>
+  <p>The video pauses when links (anchor elements) are clicked</p>
+  <div>
+    <video id="video"
+      autobuffer="autobuffer"
+      preload="auto"
+      controls="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>
+  </div>
+  <div style="width:700px">
+    <a href="../../index.html" target="_blank">Home page</a><br />
+    <a href="http://www.mozilla.org/" target="_blank">Mozila</a><br />
+    <a href="http://webmademovies.lighthouseapp.com/" target="_blank">
+      Popcorn.js on Lighthouse
+    </a><br />
+    <a href="#anchorOnPage">
+      An another in this page
+      (check the url after you click)
+    </a><br />
+    <a name="anchorOnPage" />
+  </div>
+</body>
+</html>
diff --git a/plugins/pause/popcorn.pause.js b/plugins/pause/popcorn.pause.js
@@ -0,0 +1,32 @@
+/**
+* Pause Popcorn Plug-in
+*
+* When this plugin is used, links on the webpage, when clicked, will pause
+* popcorn videos that especified 'pauseOnLinkClicked' as an option. Links may
+* cause a new page to display on a new window, or may cause a new page to
+* display in the current window, in which case the videos won't be available
+* anymore. It only affects anchor tags. It does not affect objects with click
+* events that act as anchors.
+*
+* Example:
+ var p = Popcorn('#video', { pauseOnLinkClicked : true } )
+   .play();
+*
+*/
+
+document.addEventListener( "click", function( event ) {
+  //Consider I.E.
+  var targetElement = event.target;
+  if ( window.event ) {
+    targetElement = window.event.srcElement;
+  }
+
+  //Some browsers use an element as the target, some use the text node inside
+  if ( targetElement.tagName === "A" || targetElement.parentNode.tagName === "A" ) {
+    Popcorn.instances.forEach( function( video ) {
+      if ( video.options.pauseOnLinkClicked ) {
+        video.pause();
+      }
+    });
+  }
+}, false );
diff --git a/plugins/pause/popcorn.pause.unit.html b/plugins/pause/popcorn.pause.unit.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Popcorn API</title>
+  <link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
+  <script src="../../test/qunit/qunit.js"></script>
+  <!--
+    do not move - this must be called immediately prior to
+    popcorn-api-draft.js
+  -->
+
+  <script src="../../popcorn.js"></script>
+  <script src="../code/popcorn.code.js"></script>
+  <script src="popcorn.pause.js"></script>
+  <script src="popcorn.pause.unit.js"></script>
+</head>
+<body>
+
+  <h1 id="qunit-header">Popcorn Pause Plugin</h1>
+  <h2 id="qunit-banner"></h2>
+  <div id="qunit-testrunner-toolbar"></div>
+  <h2 id="qunit-userAgent"></h2>
+  <ol id="qunit-tests"></ol>
+  <div id="qunit-fixture">  </div>
+
+  <video id='video'
+    autobuffer="autobuffer"
+    preload="auto"
+    controls="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>
+  <video id="video2"
+    autobuffer="autobuffer"
+    preload="auto"
+    controls="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>
+  <p>
+    <a id="anchorA" target="_blank" href="../../example.html">Anchor A</a>
+    <a id="anchorB" href="#test2">Anchor B</a>
+    <a name="test2"></a>
+  </p>
+</body>
+</html>
diff --git a/plugins/pause/popcorn.pause.unit.js b/plugins/pause/popcorn.pause.unit.js
@@ -0,0 +1,63 @@
+test('Popcorn Pause Plugin', function () {
+
+  var expectedTests = 3 ,
+      anchorA = document.getElementById( 'anchorA' ),
+      anchorB = document.getElementById( 'anchorB' ),
+      tolerance = 0.250 ;
+
+  var simulateClickOn = function ( paramElement ) {
+
+    if ( typeof paramElement.click == "Function" ) {
+      paramElement.click() ;
+      return ;
+    }
+
+    var evt = document.createEvent("MouseEvents");
+
+    evt.initMouseEvent(
+      "click", true, true, window, 
+      0, 0, 0, 0, 0, false, false,
+      false, false, 0, null
+    ); 
+
+    paramElement.dispatchEvent(evt);
+  };
+
+  var otherVideo = Popcorn('#video2' , { pauseOnLinkClicked : true } )
+    .play() ;
+
+  var popped = Popcorn('#video' , { pauseOnLinkClicked : true } )
+    .code ({
+      start: 2.000,
+      end: 4,
+      onStart: function ( options ) {
+        var currentTime = popped.currentTime() ;
+        simulateClickOn( anchorA ) ;
+        ok (
+          ( currentTime + tolerance >= 2 ) && ( currentTime - tolerance <= 2 ) ,
+          'Video successfully stopped with a click on an anchor at ' +
+          'second 2 approximately (' + currentTime + ')'
+        ) ;
+        //Continue playing
+        popped.play() ;
+      }
+    })
+    .code ({
+      start: 5.561,
+      end : 7,
+      onStart: function ( options ) {
+        var currentTime = popped.currentTime() ;
+        simulateClickOn( anchorB ) ;
+        ok (
+          ( currentTime + tolerance >= 5.561 ) && ( currentTime - tolerance <= 5.561 ) ,
+          'Video successfully stopped with a click on an anchor at ' +
+          'second 5.561 approximately (' + currentTime + ')'
+        ) ;
+        start() ;
+      }
+    });
+
+  popped.volume(0);
+  popped.play();
+  stop() ;
+});