Source: lib/media/video_wrapper.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  7. goog.provide('shaka.media.VideoWrapper');
  8. goog.provide('shaka.media.VideoWrapper.PlayheadMover');
  10. goog.require('goog.asserts');
  11. goog.require('shaka.log');
  12. goog.require('shaka.util.EventManager');
  13. goog.require('shaka.util.IReleasable');
  14. goog.require('shaka.util.MediaReadyState');
  15. goog.require('shaka.util.Timer');
  18. /**
  19.  * Creates a new VideoWrapper that manages setting current time and playback
  20.  * rate.  This handles seeks before content is loaded and ensuring the video
  21.  * time is set properly.  This doesn't handle repositioning within the
  22.  * presentation window.
  23.  *
  24.  * @implements {shaka.util.IReleasable}
  25.  */
  26. shaka.media.VideoWrapper = class {
  27.   /**
  28.    * @param {!HTMLMediaElement} video
  29.    * @param {function()} onSeek Called when the video seeks.
  30.    * @param {number} startTime The time to start at.
  31.    */
  32.   constructor(video, onSeek, startTime) {
  33.     /** @private {HTMLMediaElement} */
  34.     this.video_ = video;
  36.     /** @private {function()} */
  37.     this.onSeek_ = onSeek;
  39.     /** @private {number} */
  40.     this.startTime_ = startTime;
  42.     /** @private {boolean} */
  43.     this.started_ = false;
  45.     /** @private {shaka.util.EventManager} */
  46.     this.eventManager_ = new shaka.util.EventManager();
  48.     /** @private {shaka.media.VideoWrapper.PlayheadMover} */
  49.     this.mover_ = new shaka.media.VideoWrapper.PlayheadMover(
  50.         /* mediaElement= */ video,
  51.         /* maxAttempts= */ 10);
  53.     // Before we can set the start time, we must check if the video element is
  54.     // ready. If the video element is not ready, we cannot set the time. To work
  55.     // around this, we will wait for the "loadedmetadata" event which tells us
  56.     // that the media element is now ready.
  57.     shaka.util.MediaReadyState.waitForReadyState(this.video_,
  58.         HTMLMediaElement.HAVE_METADATA,
  59.         this.eventManager_,
  60.         () => {
  61.           this.setStartTime_(this.startTime_);
  62.         });
  63.   }
  66.   /** @override */
  67.   release() {
  68.     if (this.eventManager_) {
  69.       this.eventManager_.release();
  70.       this.eventManager_ = null;
  71.     }
  73.     if (this.mover_ != null) {
  74.       this.mover_.release();
  75.       this.mover_ = null;
  76.     }
  78.     this.onSeek_ = () => {};
  79.     this.video_ = null;
  80.   }
  83.   /**
  84.    * Gets the video's current (logical) position.
  85.    *
  86.    * @return {number}
  87.    */
  88.   getTime() {
  89.     return this.started_ ? this.video_.currentTime : this.startTime_;
  90.   }
  93.   /**
  94.    * Sets the current time of the video.
  95.    *
  96.    * @param {number} time
  97.    */
  98.   setTime(time) {
  99.     if (this.video_.readyState > 0) {
  100.       this.mover_.moveTo(time);
  101.     } else {
  102.       shaka.util.MediaReadyState.waitForReadyState(this.video_,
  103.           HTMLMediaElement.HAVE_METADATA,
  104.           this.eventManager_,
  105.           () => {
  106.             this.setStartTime_(this.startTime_);
  107.           });
  108.     }
  109.   }
  112.   /**
  113.    * Set the start time for the content. The given start time will be ignored if
  114.    * the content does not start at 0.
  115.    *
  116.    * @param {number} startTime
  117.    * @private
  118.    */
  119.   setStartTime_(startTime) {
  120.     // If we start close enough to our intended start time, then we won't do
  121.     // anything special.
  122.     if (Math.abs(this.video_.currentTime - startTime) < 0.001) {
  123.       this.startListeningToSeeks_();
  124.       return;
  125.     }
  127.     // We will need to delay adding our normal seeking listener until we have
  128.     // seen the first seek event. We will force the first seek event later in
  129.     // this method.
  130.     this.eventManager_.listenOnce(this.video_, 'seeking', () => {
  131.       this.startListeningToSeeks_();
  132.     });
  134.     // If the currentTime != 0, it indicates that the user has seeked after
  135.     // calling |Player.load|, meaning that |currentTime| is more meaningful than
  136.     // |startTime|.
  137.     //
  138.     // Seeking to the current time is a work around for Issue 1298. If we don't
  139.     // do this, the video may get stuck and not play.
  140.     //
  141.     // TODO: Need further investigation why it happens. Before and after
  142.     // setting the current time, video.readyState is 1, video.paused is true,
  143.     // and video.buffered's TimeRanges length is 0.
  144.     // See: https://github.com/shaka-project/shaka-player/issues/1298
  145.     this.mover_.moveTo(
  146.         this.video_.currentTime == 0 ?
  147.         startTime :
  148.         this.video_.currentTime);
  149.   }
  152.   /**
  153.    * Add the listener for seek-events. This will call the externally-provided
  154.    * |onSeek| callback whenever the media element seeks.
  155.    *
  156.    * @private
  157.    */
  158.   startListeningToSeeks_() {
  159.     goog.asserts.assert(
  160.         this.video_.readyState > 0,
  161.         'The media element should be ready before we listen for seeking.');
  163.     // Now that any startup seeking is complete, we can trust the video element
  164.     // for currentTime.
  165.     this.started_ = true;
  167.     this.eventManager_.listen(this.video_, 'seeking', () => this.onSeek_());
  168.   }
  169. };
  171. /**
  172.  * A class used to move the playhead away from its current time.  Sometimes,
  173.  * Edge ignores re-seeks. After changing the current time, check every 100ms,
  174.  * retrying if the change was not accepted.
  175.  *
  176.  * Delay stats over 100 runs of a re-seeking integration test:
  177.  *   Edge   -   0ms -   2%
  178.  *   Edge   - 100ms -  40%
  179.  *   Edge   - 200ms -  32%
  180.  *   Edge   - 300ms -  24%
  181.  *   Edge   - 400ms -   2%
  182.  *   Chrome -   0ms - 100%
  183.  *
  184.  * TODO: File a bug on Edge about this.
  185.  *
  186.  * @implements {shaka.util.IReleasable}
  187.  * @final
  188.  */
  189. shaka.media.VideoWrapper.PlayheadMover = class {
  190.   /**
  191.    * @param {!HTMLMediaElement} mediaElement
  192.    *    The media element that the mover can manipulate.
  193.    *
  194.    * @param {number} maxAttempts
  195.    *    To prevent us from infinitely trying to change the current time, the
  196.    *    mover accepts a max attempts value. At most, the mover will check if the
  197.    *    video moved |maxAttempts| times. If this is zero of negative, no
  198.    *    attempts will be made.
  199.    */
  200.   constructor(mediaElement, maxAttempts) {
  201.     /** @private {HTMLMediaElement} */
  202.     this.mediaElement_ = mediaElement;
  204.     /** @private {number} */
  205.     this.maxAttempts_ = maxAttempts;
  207.     /** @private {number} */
  208.     this.remainingAttempts_ = 0;
  210.     /** @private {number} */
  211.     this.originTime_ = 0;
  213.     /** @private {number} */
  214.     this.targetTime_ = 0;
  216.     /** @private {shaka.util.Timer} */
  217.     this.timer_ = new shaka.util.Timer(() => this.onTick_());
  218.   }
  220.   /** @override */
  221.   release() {
  222.     if (this.timer_) {
  223.       this.timer_.stop();
  224.       this.timer_ = null;
  225.     }
  227.     this.mediaElement_ = null;
  228.   }
  230.   /**
  231.    * Try forcing the media element to move to |timeInSeconds|. If a previous
  232.    * call to |moveTo| is still in progress, this will override it.
  233.    *
  234.    * @param {number} timeInSeconds
  235.    */
  236.   moveTo(timeInSeconds) {
  237.     this.originTime_ = this.mediaElement_.currentTime;
  238.     this.targetTime_ = timeInSeconds;
  240.     this.remainingAttempts_ = this.maxAttempts_;
  242.     // Set the time and then start the timer. The timer will check if the set
  243.     // was successful, and retry if not.
  244.     this.mediaElement_.currentTime = timeInSeconds;
  245.     this.timer_.tickEvery(/* seconds= */ 0.1);
  246.   }
  248.   /**
  249.    * @private
  250.    */
  251.   onTick_() {
  252.     // Sigh... We ran out of retries...
  253.     if (this.remainingAttempts_ <= 0) {
  254.       shaka.log.warning([
  255.         'Failed to move playhead from', this.originTime_,
  256.         'to', this.targetTime_,
  257.       ].join(' '));
  259.       this.timer_.stop();
  260.       return;
  261.     }
  263.     // Yay! We were successful.
  264.     if (this.mediaElement_.currentTime != this.originTime_) {
  265.       this.timer_.stop();
  266.       return;
  267.     }
  269.     // Sigh... Try again...
  270.     this.mediaElement_.currentTime = this.targetTime_;
  271.     this.remainingAttempts_--;
  272.   }
  273. };