Source: lib/media/playhead.js

  1. /**
  2.  * @license
  3.  * Copyright 2016 Google Inc.
  4.  *
  5.  * Licensed under the Apache License, Version 2.0 (the "License");
  6.  * you may not use this file except in compliance with the License.
  7.  * You may obtain a copy of the License at
  8.  *
  9.  *     http://www.apache.org/licenses/LICENSE-2.0
  10.  *
  11.  * Unless required by applicable law or agreed to in writing, software
  12.  * distributed under the License is distributed on an "AS IS" BASIS,
  13.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14.  * See the License for the specific language governing permissions and
  15.  * limitations under the License.
  16.  */
  18. goog.provide('shaka.media.Playhead');
  20. goog.require('goog.asserts');
  21. goog.require('shaka.log');
  22. goog.require('shaka.media.TimeRangesUtils');
  23. goog.require('shaka.util.EventManager');
  24. goog.require('shaka.util.FakeEvent');
  25. goog.require('shaka.util.IDestroyable');
  26. goog.require('shaka.util.StreamUtils');
  30. /**
  31.  * Creates a Playhead, which manages the video's current time.
  32.  *
  33.  * The Playhead provides mechanisms for setting the presentation's start time,
  34.  * restricting seeking to valid time ranges, and stopping playback for startup
  35.  * and re- buffering.
  36.  *
  37.  * @param {HTMLMediaElement} video
  38.  * @param {shakaExtern.Manifest} manifest
  39.  * @param {shakaExtern.StreamingConfiguration} config
  40.  * @param {?number} startTime The playhead's initial position in seconds. If
  41.  *   null, defaults to the start of the presentation for VOD and the live-edge
  42.  *   for live.
  43.  * @param {function()} onSeek Called when the user agent seeks to a time within
  44.  *   the presentation timeline.
  45.  * @param {function(!Event)} onEvent Called when an event is raised to be sent
  46.  *   to the application.
  47.  *
  48.  * @constructor
  49.  * @struct
  50.  * @implements {shaka.util.IDestroyable}
  51.  */
  52. shaka.media.Playhead = function(
  53.     video, manifest, config, startTime, onSeek, onEvent) {
  54.   /** @private {HTMLMediaElement} */
  55.   this.video_ = video;
  57.   /** @private {?shakaExtern.Manifest} */
  58.   this.manifest_ = manifest;
  60.   /** @private {?shakaExtern.StreamingConfiguration} */
  61.   this.config_ = config;
  63.   /**
  64.    * The playhead's initial position in seconds, or null if it should
  65.    * automatically be calculated later.
  66.    * @private {?number}
  67.    */
  68.   this.startTime_ = startTime;
  70.   /** @private {?function()} */
  71.   this.onSeek_ = onSeek;
  73.   /** @private {?function(!Event)} */
  74.   this.onEvent_ = onEvent;
  76.   /** @private {shaka.util.EventManager} */
  77.   this.eventManager_ = new shaka.util.EventManager();
  79.   /** @private {boolean} */
  80.   this.buffering_ = false;
  82.   /** @private {number} */
  83.   this.playbackRate_ = 1;
  85.   /** @private {?number} */
  86.   this.trickPlayIntervalId_ = null;
  88.   /** @private {?number} */
  89.   this.gapJumpIntervalId_ = null;
  91.   /** @private {number} */
  92.   this.prevReadyState_ = video.readyState;
  94.   /** @private {boolean} */
  95.   this.didFireLargeGap_ = false;
  97.   /**
  98.    * The wall-clock time (in milliseconds) that the stall occurred.  This is
  99.    * used to ensure we don't flush the pipeline too often.
  100.    * @private {number}
  101.    */
  102.   this.stallWallTime_ = -1;
  104.   /**
  105.    * The playhead time where we think a stall occurred.  When the ready state
  106.    * says we don't have enough data and the playhead stops too long, we assume
  107.    * we have stalled.
  108.    * @private {number}
  109.    */
  110.   this.stallPlayheadTime_ = -1;
  112.   /**
  113.    * True if we have already flushed the pipeline at stallPlayheadTime_.
  114.    * Allows us to avoid flushing multiple times for the same stall.
  115.    * @private {boolean}
  116.    */
  117.   this.stallCorrected_ = false;
  119.   /** @private {boolean} */
  120.   this.hadSegmentAppended_ = false;
  123.   // Check if the video has already loaded some metadata.
  124.   if (video.readyState > 0) {
  125.     this.onLoadedMetadata_();
  126.   } else {
  127.     this.eventManager_.listenOnce(
  128.         video, 'loadedmetadata', this.onLoadedMetadata_.bind(this));
  129.   }
  131.   var pollGap = this.onPollGapJump_.bind(this);
  132.   this.eventManager_.listen(video, 'ratechange', this.onRateChange_.bind(this));
  133.   this.eventManager_.listen(video, 'waiting', pollGap);
  135.   // We can't trust readyState or 'waiting' events on all platforms.  So poll
  136.   // the current time and if we are in a gap, jump it.
  137.   // See: https://goo.gl/sbSHp9 and https://goo.gl/cuAcYd
  138.   this.gapJumpIntervalId_ = setInterval(pollGap, 250);
  139. };
  142. /** @override */
  143. shaka.media.Playhead.prototype.destroy = function() {
  144.   var p = this.eventManager_.destroy();
  145.   this.eventManager_ = null;
  147.   if (this.trickPlayIntervalId_ != null) {
  148.     window.clearInterval(this.trickPlayIntervalId_);
  149.     this.trickPlayIntervalId_ = null;
  150.   }
  152.   if (this.gapJumpIntervalId_ != null) {
  153.     window.clearInterval(this.gapJumpIntervalId_);
  154.     this.gapJumpIntervalId_ = null;
  155.   }
  157.   this.video_ = null;
  158.   this.manifest_ = null;
  159.   this.config_ = null;
  160.   this.onSeek_ = null;
  161.   this.onEvent_ = null;
  163.   return p;
  164. };
  167. /** @param {number} startTime */
  168. shaka.media.Playhead.prototype.setStartTime = function(startTime) {
  169.   if (this.video_.readyState > 0)
  170.     this.video_.currentTime = this.clampTime_(startTime);
  171.   else
  172.     this.startTime_ = startTime;
  173. };
  176. /**
  177.  * Gets the playhead's current (logical) position.
  178.  *
  179.  * @return {number}
  180.  */
  181. shaka.media.Playhead.prototype.getTime = function() {
  182.   if (this.video_.readyState > 0) {
  183.     // Although we restrict the video's currentTime elsewhere, clamp it here to
  184.     // ensure any timing issues (e.g., the user agent seeks and calls this
  185.     // function before we receive the 'seeking' event) don't cause us to return
  186.     // a time outside the segment availability window.
  187.     return this.clampTime_(this.video_.currentTime);
  188.   }
  190.   return this.getStartTime_();
  191. };
  194. /**
  195.  * Gets the playhead's initial position in seconds.
  196.  *
  197.  * @return {number}
  198.  * @private
  199.  */
  200. shaka.media.Playhead.prototype.getStartTime_ = function() {
  201.   if (this.startTime_) {
  202.     return this.clampTime_(this.startTime_);
  203.   }
  205.   var startTime;
  206.   var timeline = this.manifest_.presentationTimeline;
  207.   if (timeline.getDuration() < Infinity) {
  208.     // If the presentation is VOD, or if the presentation is live but has
  209.     // finished broadcasting, then start from the beginning.
  210.     startTime = timeline.getSegmentAvailabilityStart();
  211.   } else {
  212.     // Otherwise, start near the live-edge.
  213.     startTime = timeline.getSeekRangeEnd();
  214.   }
  215.   return startTime;
  216. };
  219. /**
  220.  * Stops the playhead for buffering, or resumes the playhead after buffering.
  221.  *
  222.  * @param {boolean} buffering True to stop the playhead; false to allow it to
  223.  *   continue.
  224.  */
  225. shaka.media.Playhead.prototype.setBuffering = function(buffering) {
  226.   if (buffering != this.buffering_) {
  227.     this.buffering_ = buffering;
  228.     this.setPlaybackRate(this.playbackRate_);
  229.   }
  230. };
  233. /**
  234.  * Gets the current effective playback rate.  This may be negative even if the
  235.  * browser does not directly support rewinding.
  236.  * @return {number}
  237.  */
  238. shaka.media.Playhead.prototype.getPlaybackRate = function() {
  239.   return this.playbackRate_;
  240. };
  243. /**
  244.  * Sets the playback rate.
  245.  * @param {number} rate
  246.  */
  247. shaka.media.Playhead.prototype.setPlaybackRate = function(rate) {
  248.   if (this.trickPlayIntervalId_ != null) {
  249.     window.clearInterval(this.trickPlayIntervalId_);
  250.     this.trickPlayIntervalId_ = null;
  251.   }
  253.   this.playbackRate_ = rate;
  254.   // All major browsers support playback rates above zero.  Only need fake
  255.   // trick play for negative rates.
  256.   this.video_.playbackRate = (this.buffering_ || rate < 0) ? 0 : rate;
  258.   if (!this.buffering_ && rate < 0) {
  259.     // Defer creating the timer until we stop buffering.  This function will be
  260.     // called again from setBuffering().
  261.     this.trickPlayIntervalId_ = window.setInterval(function() {
  262.       this.video_.currentTime += rate / 4;
  263.     }.bind(this), 250);
  264.   }
  265. };
  268. /**
  269.  * Called when a segment is appended by StreamingEngine, but not when a clear is
  270.  * pending.  This means StreamingEngine will continue buffering forward from
  271.  * what is buffered. So we know about any gaps before the start.
  272.  */
  273. shaka.media.Playhead.prototype.onSegmentAppended = function() {
  274.   this.hadSegmentAppended_ = true;
  275.   this.onPollGapJump_();
  276. };
  279. /**
  280.  * Handles a 'ratechange' event.
  281.  *
  282.  * @private
  283.  */
  284. shaka.media.Playhead.prototype.onRateChange_ = function() {
  285.   // NOTE: This will not allow explicitly setting the playback rate to 0 while
  286.   // the playback rate is negative.  Pause will still work.
  287.   var expectedRate =
  288.       this.buffering_ || this.playbackRate_ < 0 ? 0 : this.playbackRate_;
  290.   // Native controls in Edge trigger a change to playbackRate and set it to 0
  291.   // when seeking.  If we don't exclude 0 from this check, we will force the
  292.   // rate to stay at 0 after a seek with Edge native controls.
  293.   // https://github.com/google/shaka-player/issues/951
  294.   if (this.video_.playbackRate && this.video_.playbackRate != expectedRate) {
  295.     shaka.log.debug('Video playback rate changed to', this.video_.playbackRate);
  296.     this.setPlaybackRate(this.video_.playbackRate);
  297.   }
  298. };
  301. /**
  302.  * Handles a 'loadedmetadata' event.
  303.  *
  304.  * @private
  305.  */
  306. shaka.media.Playhead.prototype.onLoadedMetadata_ = function() {
  307.   // Move the real playhead to the start time.
  308.   var targetTime = this.getStartTime_();
  309.   if (Math.abs(this.video_.currentTime - targetTime) < 0.001) {
  310.     this.eventManager_.listen(
  311.         this.video_, 'seeking', this.onSeeking_.bind(this));
  312.     this.eventManager_.listen(
  313.         this.video_, 'playing', this.onPlaying_.bind(this));
  314.   } else {
  315.     this.eventManager_.listenOnce(
  316.         this.video_, 'seeking', this.onSeekingToStartTime_.bind(this));
  317.     this.video_.currentTime = targetTime;
  318.   }
  319. };
  322. /**
  323.  * Handles the 'seeking' event from the initial jump to the start time (if
  324.  * there is one).
  325.  *
  326.  * @private
  327.  */
  328. shaka.media.Playhead.prototype.onSeekingToStartTime_ = function() {
  329.   goog.asserts.assert(this.video_.readyState > 0,
  330.                       'readyState should be greater than 0');
  331.   this.eventManager_.listen(this.video_, 'seeking', this.onSeeking_.bind(this));
  332.   this.eventManager_.listen(this.video_, 'playing', this.onPlaying_.bind(this));
  333. };
  336. /**
  337.  * Called on a recurring timer to check for gaps in the media.  This is also
  338.  * called in a 'waiting' event.
  339.  *
  340.  * @private
  341.  */
  342. shaka.media.Playhead.prototype.onPollGapJump_ = function() {
  343.   if (this.video_.readyState == 0)
  344.     return;
  346.   // When the ready state changes, we have moved on, so we should fire the large
  347.   // gap event if we see one.
  348.   if (this.video_.readyState != this.prevReadyState_) {
  349.     this.didFireLargeGap_ = false;
  350.     this.prevReadyState_ = this.video_.readyState;
  351.   }
  353.   var smallGapLimit = this.config_.smallGapLimit;
  354.   var currentTime = this.video_.currentTime;
  355.   var buffered = this.video_.buffered;
  357.   // If seeking is not possible, clamp the playhead manually here.
  358.   var timeline = this.manifest_.presentationTimeline;
  359.   var availabilityStart = timeline.getSegmentAvailabilityStart();
  360.   if (currentTime < availabilityStart) {
  361.     // The availability window has moved past the playhead.
  362.     // Move ahead to catch up.
  363.     var targetTime = this.reposition_(currentTime);
  364.     shaka.log.info('Jumping forward ' + (targetTime - currentTime) +
  365.         ' seconds to catch up with the availability window.');
  366.     this.movePlayhead_(currentTime, targetTime);
  367.     return;
  368.   }
  370.   var gapIndex = shaka.media.TimeRangesUtils.getGapIndex(buffered, currentTime);
  372.   // The current time is unbuffered or is too far from a gap.
  373.   if (gapIndex == null) {
  374.     if (this.video_.readyState < 3 && this.video_.playbackRate > 0) {
  375.       // Some platforms/browsers can get stuck in the middle of a buffered range
  376.       // (e.g. when seeking in a background tab).  Flush the media pipeline to
  377.       // help.
  378.       //
  379.       // Flush once we have stopped for more than 1 second inside a buffered
  380.       // range.  Note that Chromecast takes a few seconds to start playing
  381.       // after any kind of seek, so wait 5 seconds between repeated flushes.
  382.       if (this.stallPlayheadTime_ != currentTime) {
  383.         this.stallPlayheadTime_ = currentTime;
  384.         this.stallWallTime_ = Date.now();
  385.         this.stallCorrected_ = false;
  386.       } else if (!this.stallCorrected_ &&
  387.                  this.stallWallTime_ < Date.now() - 1000) {
  388.         for (var i = 0; i < buffered.length; i++) {
  389.           // Ignore the end of the buffered range since it may not play any more
  390.           // on all platforms.
  391.           if (currentTime >= buffered.start(i) &&
  392.               currentTime < buffered.end(i) - 0.5) {
  393.             shaka.log.debug(
  394.                 'Flushing media pipeline due to stall inside buffered range');
  395.             this.video_.currentTime += 0.1;
  396.             this.stallPlayheadTime_ = this.video_.currentTime;
  397.             this.stallCorrected_ = true;
  398.             break;
  399.           }
  400.         }
  401.       }
  402.     }
  403.     return;
  404.   }
  405.   // If we are before the first buffered range, this could be an unbuffered
  406.   // seek.  So wait until a segment is appended so we are sure it is a gap.
  407.   if (gapIndex == 0 && !this.hadSegmentAppended_)
  408.     return;
  410.   // StreamingEngine can buffer past the seek end, but still don't allow seeking
  411.   // past it.
  412.   var jumpTo = buffered.start(gapIndex);
  413.   var seekEnd = this.manifest_.presentationTimeline.getSeekRangeEnd();
  414.   if (jumpTo >= seekEnd)
  415.     return;
  417.   var jumpSize = jumpTo - currentTime;
  418.   var isGapSmall = jumpSize <= smallGapLimit;
  419.   var jumpLargeGap = false;
  421.   if (!isGapSmall && !this.didFireLargeGap_) {
  422.     this.didFireLargeGap_ = true;
  424.     // Event firing is synchronous.
  425.     var event = new shaka.util.FakeEvent(
  426.         'largegap', {'currentTime': currentTime, 'gapSize': jumpSize});
  427.     event.cancelable = true;
  428.     this.onEvent_(event);
  430.     if (this.config_.jumpLargeGaps && !event.defaultPrevented)
  431.       jumpLargeGap = true;
  432.     else
  433.       shaka.log.info('Ignoring large gap at', currentTime);
  434.   }
  436.   if (isGapSmall || jumpLargeGap) {
  437.     if (gapIndex == 0) {
  438.       shaka.log.info(
  439.           'Jumping forward', jumpSize,
  440.           'seconds because of gap before start time of', jumpTo);
  441.     } else {
  442.       shaka.log.info(
  443.           'Jumping forward', jumpSize, 'seconds because of gap starting at',
  444.           buffered.end(gapIndex - 1), 'and ending at', jumpTo);
  445.     }
  447.     this.movePlayhead_(currentTime, jumpTo);
  448.   }
  449. };
  452. /**
  453.  * Handles a 'seeking' event.
  454.  *
  455.  * @private
  456.  */
  457. shaka.media.Playhead.prototype.onSeeking_ = function() {
  458.   goog.asserts.assert(this.video_.readyState > 0,
  459.                       'readyState should be greater than 0');
  461.   this.hadSegmentAppended_ = false;
  462.   var currentTime = this.video_.currentTime;
  463.   var targetTime = this.reposition_(currentTime);
  465.   if (Math.abs(targetTime - currentTime) > 0.001) {
  466.     this.movePlayhead_(currentTime, targetTime);
  467.     return;
  468.   }
  470.   shaka.log.v1('Seek to ' + currentTime);
  471.   this.didFireLargeGap_ = false;
  472.   this.onSeek_();
  473. };
  476. /**
  477.  * Handles a 'playing' event.
  478.  *
  479.  * @private
  480.  */
  481. shaka.media.Playhead.prototype.onPlaying_ = function() {
  482.   goog.asserts.assert(this.video_.readyState > 0,
  483.                       'readyState should be greater than 0');
  485.   var currentTime = this.video_.currentTime;
  486.   var targetTime = this.reposition_(currentTime);
  488.   if (Math.abs(targetTime - currentTime) > 0.001)
  489.     this.movePlayhead_(currentTime, targetTime);
  490. };
  493. /**
  494.  * Computes a new playhead position that's within the presentation timeline.
  495.  *
  496.  * @param {number} currentTime
  497.  * @return {number} The time to reposition the playhead to.
  498.  * @private
  499.  */
  500. shaka.media.Playhead.prototype.reposition_ = function(currentTime) {
  501.   goog.asserts.assert(this.manifest_ && this.config_, 'Must not be destroyed');
  503.   /** @type {function(number)} */
  504.   var isBuffered =
  505.       shaka.media.TimeRangesUtils.isBuffered.bind(null, this.video_.buffered);
  507.   var rebufferingGoal = shaka.util.StreamUtils.getRebufferingGoal(
  508.       this.manifest_, this.config_, 1 /* scaleFactor */);
  510.   var timeline = this.manifest_.presentationTimeline;
  511.   var start = timeline.getSafeAvailabilityStart(0);
  512.   var end = timeline.getSegmentAvailabilityEnd();
  514.   // With live content, the beginning of the availability window is moving
  515.   // forward.  This means we cannot seek to it since we will "fall" outside the
  516.   // window while we buffer.  So we define a "safe" region that is far enough
  517.   // away.  For VOD, |safe == start|.
  518.   var safe = timeline.getSafeAvailabilityStart(rebufferingGoal);
  520.   // These are the times to seek to rather than the exact destinations.  When
  521.   // we seek, we will get another event (after a slight delay) and these steps
  522.   // will run again.  So if we seeked directly to |start|, |start| would move
  523.   // on the next call and we would loop forever.
  524.   //
  525.   // Offset by 5 seconds since Chromecast takes a few seconds to start playing
  526.   // after a seek, even when buffered.
  527.   var seekStart = timeline.getSafeAvailabilityStart(5);
  528.   var seekSafe = timeline.getSafeAvailabilityStart(rebufferingGoal + 5);
  531.   if (currentTime > end) {
  532.     shaka.log.v1('Playhead past end.');
  533.     return end;
  534.   }
  536.   if (currentTime < start) {
  537.     if (isBuffered(seekStart)) {
  538.       shaka.log.v1('Playhead before start & start is buffered');
  539.       return seekStart;
  540.     } else {
  541.       shaka.log.v1('Playhead before start & start is unbuffered');
  542.       return seekSafe;
  543.     }
  544.   }
  546.   if (currentTime >= safe || isBuffered(currentTime)) {
  547.     shaka.log.v1('Playhead in safe region or in buffered region.');
  548.     return currentTime;
  549.   } else {
  550.     shaka.log.v1('Playhead outside safe region & in unbuffered region.');
  551.     return seekSafe;
  552.   }
  553. };
  556. /**
  557.  * Moves the playhead to the target time, triggering a call to onSeeking_().
  558.  *
  559.  * @param {number} currentTime
  560.  * @param {number} targetTime
  561.  * @private
  562.  */
  563. shaka.media.Playhead.prototype.movePlayhead_ = function(
  564.     currentTime, targetTime) {
  565.   shaka.log.debug('Moving playhead...',
  566.                   'currentTime=' + currentTime,
  567.                   'targetTime=' + targetTime);
  568.   this.video_.currentTime = targetTime;
  570.   // Sometimes, IE and Edge ignore re-seeks.  Check every 100ms and try
  571.   // again if need be, up to 10 tries.
  572.   // Delay stats over 100 runs of a re-seeking integration test:
  573.   // IE     -   0ms -  47%
  574.   // IE     - 100ms -  63%
  575.   // Edge   -   0ms -   2%
  576.   // Edge   - 100ms -  40%
  577.   // Edge   - 200ms -  32%
  578.   // Edge   - 300ms -  24%
  579.   // Edge   - 400ms -   2%
  580.   // Chrome -   0ms - 100%
  581.   // TODO: File a bug on IE/Edge about this.
  582.   var tries = 0;
  583.   var recheck = (function() {
  584.     if (!this.video_) return;
  585.     if (tries++ >= 10) return;
  587.     if (this.video_.currentTime == currentTime) {
  588.       // Sigh.  Try again.
  589.       this.video_.currentTime = targetTime;
  590.       setTimeout(recheck, 100);
  591.     }
  592.   }).bind(this);
  593.   setTimeout(recheck, 100);
  594. };
  597. /**
  598.  * Clamps the given time to the segment availability window.
  599.  *
  600.  * @param {number} time The time in seconds.
  601.  * @return {number} The clamped time in seconds.
  602.  * @private
  603.  */
  604. shaka.media.Playhead.prototype.clampTime_ = function(time) {
  605.   var start = this.manifest_.presentationTimeline.getSegmentAvailabilityStart();
  606.   if (time < start) return start;
  608.   var end = this.manifest_.presentationTimeline.getSegmentAvailabilityEnd();
  609.   if (time > end) return end;
  611.   return time;
  612. };