Add autoplay support & fix startTime bug

terrill · terrill · commit 32d0462c59b7 · 2014-12-18T05:57:04.000-08:00
diff --git a/README.md b/README.md
@@ -166,6 +166,7 @@ The following attributes are supported on both the \<audio\> and \<video\> eleme
 -   **id** - required; any unique ID
 -   **data-able-player** - required 
 -   **data-start-time** - optional; time at which you want the audio to start playing (in seconds)
+-   **autoplay** - optional; play media automatically when page loads. For accessibility reasons, this is *not* recommended unless user is sure to *expect* media to automatically start. For example, autoplay could reasonably be used in conjunction with data-start-time in a media search application.   
 -   **data-transcript-div** - optional; id of an external div in which to display the interactive transcript. 
     The transcript is generated automatically if captions and/or descriptions are available. 
     If this attribute is not provided the transcript will be displayed in its default container  
diff --git a/build/ableplayer.js b/build/ableplayer.js
@@ -62,6 +62,13 @@
       return;
     }
 
+    if ($(media).attr('autoplay') !== undefined && $(media).attr('autoplay') !== "false") { 
+      this.autoplay = true; 
+    }
+    else { 
+      this.autoplay = false;
+    }
+    
     // override defaults with values of data-* attributes 
     
     var includeTranscript = media.data('include-transcript');
@@ -184,6 +191,13 @@
         if (thisObj.countProperties(thisObj.tt) > 50) { 
           // close enough to ensure that most text variables are populated 
           thisObj.setup();
+          if (thisObj.startTime > 0 && !thisObj.autoplay) { 
+            // scrub ahead to startTime, but don't start playing 
+            // can't do this in media event listener   
+            // because in some browsers no media events are fired until media.play is requested 
+            // even if preload="auto" 
+            thisObj.onMediaUpdateTime();            
+          }          
         } 
         else { 
           // can't continue loading player with no text
@@ -199,9 +213,8 @@
   AblePlayer.prototype.setup = function() {
     var thisObj = this;
     if (this.debug && this.startTime > 0) {
-      console.log('Will start media at ' + startTime + ' seconds');
+      console.log('Will start media at ' + this.startTime + ' seconds');
     }
-    
     this.reinitialize().then(function () {
       if (!thisObj.player) {
         // No player for this media, show last-line fallback.
@@ -3960,14 +3973,14 @@
 })();
 (function () {
   AblePlayer.prototype.seekTo = function (newTime) { 
-      // TODO: How do we want startTime functionality to work?
 
     if (this.player === 'html5') {
       var seekable;
   
       this.startTime = newTime;
       // Check HTML5 media "seekable" property to be sure media is seekable to startTime
       seekable = this.media.seekable;
+      
       if (seekable.length > 0 && this.startTime >= seekable.start(0) && this.startTime <= seekable.end(0)) { 
         this.media.currentTime = this.startTime;
       } 
@@ -4244,7 +4257,7 @@
     else if (this.player === 'youtube') {
       this.youtubePlayer.playVideo();
     }
-    this.startedPlaying = true;
+    this.startedPlaying = true;    
   };
 
   // Right now, update the seekBar values based on current duration and time.
@@ -4508,7 +4521,6 @@
     else {
       this.pauseMedia();
     }
-
     this.refreshControls();
   };
 
@@ -5359,12 +5371,28 @@
 (function () {
   // Media events
   AblePlayer.prototype.onMediaUpdateTime = function () {
-    if (this.startTime && !this.startedPlaying) { 
-      // try seeking again, if seeking failed on canplay or canplaythrough
-      this.seekTo(this.startTime);
-      this.playMedia();
-    }       
-
+    if (!this.startedPlaying) {
+      if (this.startTime) { 
+        if (this.startTime === this.media.currentTime) { 
+          // media has already scrubbed to start time
+          if (this.autoplay) { 
+            this.playMedia();
+          }          
+        }
+        else { 
+          // continue seeking ahead until currentTime == startTime 
+          this.seekTo(this.startTime);
+        }
+      }
+      else { 
+        // autoplay should generally be avoided unless a startTime is provided 
+        // but we'll trust the developer to be using this feature responsibly 
+        if (this.autoplay) {
+          this.playMedia();
+        } 
+      }       
+    }
+    
     // show highlight in transcript 
     if (this.prefHighlight === 1) {
       this.highlightTranscript(this.getElapsed()); 
@@ -5659,11 +5687,17 @@
         thisObj.onMediaNewSourceLoad();
       })
       .on('canplay',function() { 
+        if (thisObj.debug) {
+          console.log('canplay event');  
+        }
         if (thisObj.startTime && !thisObj.startedPlaying) { 
           thisObj.seekTo(thisObj.startTime);
         }
       })
       .on('canplaythrough',function() { 
+        if (thisObj.debug) {
+          console.log('canplaythrough event');  
+        }
         if (thisObj.startTime && !thisObj.startedPlaying) { 
           // try again, if seeking failed on canplay
           thisObj.seekTo(thisObj.startTime);
@@ -5678,7 +5712,7 @@
       .on('progress', function() {
         thisObj.refreshControls();
       })
-      .on('waiting',function() { 
+      .on('waiting',function() {
         thisObj.refreshControls();
       })
       .on('durationchange',function() { 
diff --git a/scripts/ableplayer-base.js b/scripts/ableplayer-base.js
@@ -62,6 +62,13 @@
       return;
     }
 
+    if ($(media).attr('autoplay') !== undefined && $(media).attr('autoplay') !== "false") { 
+      this.autoplay = true; 
+    }
+    else { 
+      this.autoplay = false;
+    }
+    
     // override defaults with values of data-* attributes 
     
     var includeTranscript = media.data('include-transcript');
@@ -184,6 +191,13 @@
         if (thisObj.countProperties(thisObj.tt) > 50) { 
           // close enough to ensure that most text variables are populated 
           thisObj.setup();
+          if (thisObj.startTime > 0 && !thisObj.autoplay) { 
+            // scrub ahead to startTime, but don't start playing 
+            // can't do this in media event listener   
+            // because in some browsers no media events are fired until media.play is requested 
+            // even if preload="auto" 
+            thisObj.onMediaUpdateTime();            
+          }          
         } 
         else { 
           // can't continue loading player with no text
@@ -199,9 +213,8 @@
   AblePlayer.prototype.setup = function() {
     var thisObj = this;
     if (this.debug && this.startTime > 0) {
-      console.log('Will start media at ' + startTime + ' seconds');
+      console.log('Will start media at ' + this.startTime + ' seconds');
     }
-    
     this.reinitialize().then(function () {
       if (!thisObj.player) {
         // No player for this media, show last-line fallback.
diff --git a/scripts/control.js b/scripts/control.js
@@ -1,13 +1,13 @@
 (function () {
   AblePlayer.prototype.seekTo = function (newTime) { 
-      // TODO: How do we want startTime functionality to work?
 
     if (this.player === 'html5') {
       var seekable;
   
       this.startTime = newTime;
       // Check HTML5 media "seekable" property to be sure media is seekable to startTime
       seekable = this.media.seekable;
+      
       if (seekable.length > 0 && this.startTime >= seekable.start(0) && this.startTime <= seekable.end(0)) { 
         this.media.currentTime = this.startTime;
       } 
@@ -284,7 +284,7 @@
     else if (this.player === 'youtube') {
       this.youtubePlayer.playVideo();
     }
-    this.startedPlaying = true;
+    this.startedPlaying = true;    
   };
 
   // Right now, update the seekBar values based on current duration and time.
@@ -548,7 +548,6 @@
     else {
       this.pauseMedia();
     }
-
     this.refreshControls();
   };
 
diff --git a/scripts/event.js b/scripts/event.js
@@ -1,12 +1,28 @@
 (function () {
   // Media events
   AblePlayer.prototype.onMediaUpdateTime = function () {
-    if (this.startTime && !this.startedPlaying) { 
-      // try seeking again, if seeking failed on canplay or canplaythrough
-      this.seekTo(this.startTime);
-      this.playMedia();
-    }       
-
+    if (!this.startedPlaying) {
+      if (this.startTime) { 
+        if (this.startTime === this.media.currentTime) { 
+          // media has already scrubbed to start time
+          if (this.autoplay) { 
+            this.playMedia();
+          }          
+        }
+        else { 
+          // continue seeking ahead until currentTime == startTime 
+          this.seekTo(this.startTime);
+        }
+      }
+      else { 
+        // autoplay should generally be avoided unless a startTime is provided 
+        // but we'll trust the developer to be using this feature responsibly 
+        if (this.autoplay) {
+          this.playMedia();
+        } 
+      }       
+    }
+    
     // show highlight in transcript 
     if (this.prefHighlight === 1) {
       this.highlightTranscript(this.getElapsed()); 
@@ -301,11 +317,17 @@
         thisObj.onMediaNewSourceLoad();
       })
       .on('canplay',function() { 
+        if (thisObj.debug) {
+          console.log('canplay event');  
+        }
         if (thisObj.startTime && !thisObj.startedPlaying) { 
           thisObj.seekTo(thisObj.startTime);
         }
       })
       .on('canplaythrough',function() { 
+        if (thisObj.debug) {
+          console.log('canplaythrough event');  
+        }
         if (thisObj.startTime && !thisObj.startedPlaying) { 
           // try again, if seeking failed on canplay
           thisObj.seekTo(thisObj.startTime);
@@ -320,7 +342,7 @@
       .on('progress', function() {
         thisObj.refreshControls();
       })
-      .on('waiting',function() { 
+      .on('waiting',function() {
         thisObj.refreshControls();
       })
       .on('durationchange',function() { 
diff --git a/tests/test2.html b/tests/test2.html
@@ -23,15 +23,16 @@
 <h1>Able Player Test #2:<br/>Audio player with non-zero start time</h1>
 
 <p>This player is initialized to start automatically, at 2:20 into the track (just prior to the guitar solo). 
-This can be used to start the media from search results or an interactive transcript.
+This can be used to start the media from search results or an interactive transcript. 
+In order to play the media automatically at the target start time, the media element must also include the <em>autoplay</em> attribute.
 </p>
 
 <p>For additional tests see the <a href="index.html">Index of <em>Able Player</em> Tests</a>.</p>
 
 <!-- use the following markup for each media element -->
-<audio id="audio1" preload="auto" data-able-player data-start-time="140">
+<audio id="audio1" preload="auto" data-able-player data-start-time="140" autoplay>
   <source type="audio/ogg" src="../media/smallf.ogg"/>
-	<source type="audio/mpeg" src="../media/smallf.ogg"/>
+	<source type="audio/mpeg" src="../media/smallf.mp3"/>
 </audio>
 
 </body>
