Merge pull request #47 from voxel51/mediafragmentEndOfClipFail

Mediafragment end of clip fail

Author: kevinqi34

src/js/renderers/videorenderer.js

@@ -120,9 +120,7 @@ VideoRenderer.prototype.initPlayerControls = function() {
   if (this._boolAutoplay) {
     this.eleVideo.toggleAttribute('autoplay', true);
   }
-  if (this._boolLoop) {
-    this.eleVideo.toggleAttribute('loop', true);
-  }
+
   if (this.player._boolHasPoster) {
     this.eleVideo.setAttribute('poster', this.player._loadingPosterURL);
     if (this.player._boolForcedSize) {
@@ -169,7 +167,6 @@ VideoRenderer.prototype.initPlayerControls = function() {
     if (self._boolSingleFrame ) {
       self.eleVideo.currentTime = self._mfBeginT;
       self._frameNumber = self._mfBeginF;
-      // self.processFrame();
     }
 
     // so that we see overlay and time stamp now that we are ready
@@ -179,6 +176,37 @@ VideoRenderer.prototype.initPlayerControls = function() {
     }
   });
 
+  this.eleVideo.addEventListener('ended', function() {
+    if (self._boolLoop) {
+      self.eleVideo.play();
+    } else {
+      self._boolPlaying = false;
+      self.updateFromDynamicState();
+    }
+  });
+
+
+  this.eleVideo.addEventListener('pause', function() {
+    self.checkForFragmentReset(self.computeFrameNumber());
+    if (self._boolPlaying && !self._lockToMF && !self._boolManualSeek
+      && !self.eleVideo.ended) {
+      self.eleVideo.play();
+    }
+  });
+
+  // Update the seek bar as the video plays
+  this.eleVideo.addEventListener('timeupdate', function() {
+    // Calculate the slider value
+    const value = (100 / self.eleVideo.duration) * self.eleVideo
+        .currentTime;
+    // Update the slider value
+    self.eleSeekBar.value = value;
+  });
+
+  this.eleVideo.addEventListener('play', function() {
+    self.timerCallback();
+  }, false);
+
   this.eleVideoSource.addEventListener('error', function() {
     if (self.player._boolNotFound) {
       self.eleVideo.setAttribute('poster', self.player._notFoundPosterURL);
@@ -228,31 +256,6 @@ VideoRenderer.prototype.initPlayerControls = function() {
     }
   });
 
-  this.eleVideo.addEventListener('ended', function() {
-    self._boolPlaying = false;
-    self.updateFromDynamicState();
-  });
-
-  this.eleVideo.addEventListener('pause', function() {
-    // this is a pause that is fired from the video player itself and not from
-    // the user clicking the play/pause button.
-    // Noting the checkForFragmentReset function calls updateFromDynamicState
-    self.checkForFragmentReset(self.computeFrameNumber());
-  });
-
-  // Update the seek bar as the video plays
-  this.eleVideo.addEventListener('timeupdate', function() {
-    // Calculate the slider value
-    const value = (100 / self.eleVideo.duration) * self.eleVideo
-        .currentTime;
-    // Update the slider value
-    self.eleSeekBar.value = value;
-  });
-
-  this.eleVideo.addEventListener('play', function() {
-    self.timerCallback();
-  }, false);
-
   this.parent.addEventListener('mouseenter', function() {
     // Two different behaviors.
     // 1.  Regular Mode: show controls.
@@ -360,9 +363,6 @@ VideoRenderer.prototype.updateFromDynamicState = function() {
     return;
   }
 
-  this.eleVideo.toggleAttribute('autoplay', this._boolAutoplay);
-  this.eleVideo.toggleAttribute('loop', this._boolLoop);
-
   if (this._boolPlaying) {
     if (!this._boolSingleFrame) {
       this.eleVideo.play();
@@ -423,6 +423,7 @@ VideoRenderer.prototype.updateStateFromTimeChange = function() {
   // check if we have a media fragment and should be looping
   // if so, reset the playing location appropriately
   cfn = this.checkForFragmentReset(cfn);
+  this.updateFromDynamicState();
   if (cfn !== this._frameNumber) {
     this._frameNumber = cfn;
     this.processFrame();
@@ -451,6 +452,7 @@ isDataLoaded:  ${this._isDataLoaded}
 overlayCanBePrepared: ${this._overlayCanBePrepared}
 isOverlayPrepared: ${this._isOverlayPrepared}
 isPreparingOverlay: ${this._isPreparingOverlay}
+hasMediaFragment: ${this._hasMediaFragment}
 `;
 };
 
@@ -574,16 +576,13 @@ VideoRenderer.prototype.checkForFragmentReset = function(fn) {
     return fn;
   }
 
-  if (fn >= this._mfEndF) {
+  if (fn >= this._mfEndF || this.eleVideo.ended) {
     if (this._boolLoop) {
       this.eleVideo.currentTime = this._mfBeginT;
       fn = this._mfBeginF;
     } else {
       this._boolPlaying = false;
     }
-    // Important to only update in here since this is only the case that the
-    // state has changed.
-    this.updateFromDynamicState();
   }
 
   return fn;

src/js/videoplayer.js

@@ -99,10 +99,9 @@ VideoPlayer.prototype.autoplay = function(boolAutoplay = true) {
  * @return {bool} true if reset happens
  */
 VideoPlayer.prototype.resetToFragment = function() {
-  if (!this.renderer._hasMediaFragment) {
+  if (!this.renderer._hasMediaFragment || !this.renderer._isRendered) {
     return false;
   }
-
   this.renderer.eleVideo.currentTime = this.renderer._mfBeginT;
   this.renderer._lockToMF = true;
 

test/emptylabels.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Player51 Empty Labels Test</title>
+    <style>
+      body {
+        background: black;
+        color:#CCCCCC;
+      }
+      #test-container {
+        width: 640px;
+        height: 360px;
+        position: relative;
+      }
+
+      #test-container:hover {
+        opacity: .9;
+      }
+    </style>
+    <link rel="stylesheet" href="/src/css/player51.css">
+  </head>
+
+  <body>
+
+    <h1> Player51: Empty Labels Test</h1>
+
+    <div id="test-container" />
+
+    <script type="module">
+      import Player51 from '/src/js/player51.js';
+
+      document.addEventListener("DOMContentLoaded", () => {
+        console.log("Player51 Simple: Example code running.");
+
+        let player = new Player51(
+          {
+            src: "/test/player51-test-data/8Xxvx8V-hnc-001.mp4",
+            type: "video/mp4"
+          },
+          "/test/player51-test-data/empty.json",
+          25
+        );
+
+        console.log("Player51 created.");
+
+        player.render('test-container');
+
+        console.log("Player51 rendered and ready.");
+
+      });
+    </script>
+  </body>
+</html>

test/endOfClipLooping.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Player51 End of Clip Test</title>
+    <style>
+      body {
+        background: black;
+        color:#CCCCCC;
+      }
+      #test-container {
+        width: 640px;
+        height: 360px;
+        position: relative;
+        padding: 2rem;
+      }
+    </style>
+    <link rel="stylesheet" href="/src/css/player51.css">
+  </head>
+
+  <body>
+
+    <h1> Player51: End of Clip Test </h1>
+
+    <div id="test-container" />
+
+    <script type="module">
+      import Player51 from '/src/js/player51.js';
+
+      document.addEventListener("DOMContentLoaded", () => {
+        console.log("Player51 Simple: Example code running.");
+
+        let player = new Player51(
+          {
+            src: "/test/player51-test-data/8Xxvx8V-hnc-001.mp4#t=58,61.5",
+            type: "video/mp4"
+          },
+          "/test/player51-test-data/8Xxvx8V-hnc-001.json",
+          25
+        );
+
+        console.log("Player51 created.");
+
+        player.setBoolDrawFrameNumber(true);
+        player.setBoolDrawTimeStamp(true);
+        player.loop();
+        player.autoplay();
+        player.resetToFragment();
+
+        player.poster("https://voxel51.com/images/logo/voxel51-logo-horz-color-600dpi.png");
+        player.forceMax();  // uncomment and video will maximize to pixel resolution
+        player.render('test-container');
+
+        console.log("Player51 rendered and ready.");
+
+      });
+    </script>
+  </body>
+</html>