shaka-player 4.10.13 → 4.11.0

package/lib/player.js

@@ -38,6 +38,7 @@ goog.require('shaka.net.NetworkingUtils');
 goog.require('shaka.text.SimpleTextDisplayer');
 goog.require('shaka.text.StubTextDisplayer');
 goog.require('shaka.text.TextEngine');
+goog.require('shaka.text.Utils');
 goog.require('shaka.text.UITextDisplayer');
 goog.require('shaka.text.WebVttGenerator');
 goog.require('shaka.util.BufferUtils');
@@ -50,6 +51,7 @@ goog.require('shaka.util.Error');
 goog.require('shaka.util.EventManager');
 goog.require('shaka.util.FakeEvent');
 goog.require('shaka.util.FakeEventTarget');
+goog.require('shaka.util.Functional');
 goog.require('shaka.util.IDestroyable');
 goog.require('shaka.util.LanguageUtils');
 goog.require('shaka.util.ManifestParserUtils');
@@ -118,9 +120,9 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.DownloadHeadersReceived
  * @description Fired when the networking engine has received the headers for
- *    a download, but before the body has been downloaded.
- *    If the HTTP plugin being used does not track this information, this event
- *    will default to being fired when the body is received, instead.
+ *   a download, but before the body has been downloaded.
+ *   If the HTTP plugin being used does not track this information, this event
+ *   will default to being fired when the body is received, instead.
  * @property {!Object.<string, string>} headers
  * @property {!shaka.extern.Request} request
  * @property {!shaka.net.NetworkingEngine.RequestType} type
@@ -173,8 +175,8 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.MediaQualityChangedEvent
  * @description Fired when the media quality changes at the playhead.
- * That may be caused by an adaptation change or a DASH period transition.
- * Separate events are emitted for audio and video contentTypes.
+ *   That may be caused by an adaptation change or a DASH period transition.
+ *   Separate events are emitted for audio and video contentTypes.
  * @property {string} type
  *   'mediaqualitychanged'
  * @property {shaka.extern.MediaQualityInfo} mediaQuality
@@ -184,10 +186,19 @@ goog.requireType('shaka.media.PresentationTimeline');
  * @exportDoc
  */
 
+/**
+ * @event shaka.Player.MediaSourceRecoveredEvent
+ * @description Fired when MediaSource has been successfully recovered
+ *   after occurrence of video error.
+ * @property {string} type
+ *   'mediasourcerecovered'
+ * @exportDoc
+ */
+
 /**
  * @event shaka.Player.AudioTrackChangedEvent
  * @description Fired when the audio track changes at the playhead.
- * That may be caused by a user requesting to chang audio tracks.
+ *   That may be caused by a user requesting to chang audio tracks.
  * @property {string} type
  *   'audiotrackchanged'
  * @property {shaka.extern.MediaQualityInfo} mediaQuality
@@ -243,6 +254,8 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.TextTrackVisibilityEvent
  * @description Fired when text track visibility changes.
+ *   An app may want to look at <code>getStats()</code> or
+ *   <code>getVariantTracks()</code> to see what happened.
  * @property {string} type
  *   'texttrackvisibility'
  * @exportDoc
@@ -253,6 +266,8 @@ goog.requireType('shaka.media.PresentationTimeline');
  * @event shaka.Player.TracksChangedEvent
  * @description Fired when the list of tracks changes.  For example, this will
  *   happen when new tracks are added/removed or when track restrictions change.
+ *   An app may want to look at <code>getVariantTracks()</code> to see what
+ *   happened.
  * @property {string} type
  *   'trackschanged'
  * @exportDoc
@@ -276,9 +291,11 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.VariantChangedEvent
  * @description Fired when a call from the application caused a variant change.
- *  Can be triggered by calls to <code>selectVariantTrack()</code> or
- *  <code>selectAudioLanguage()</code>. Does not fire when an automatic
- *  adaptation causes a variant change.
+ *   Can be triggered by calls to <code>selectVariantTrack()</code> or
+ *   <code>selectAudioLanguage()</code>. Does not fire when an automatic
+ *   adaptation causes a variant change.
+ *   An app may want to look at <code>getStats()</code> or
+ *   <code>getVariantTracks()</code> to see what happened.
  * @property {string} type
  *   'variantchanged'
  * @property {shaka.extern.Track} oldTrack
@@ -290,8 +307,10 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.TextChangedEvent
  * @description Fired when a call from the application caused a text stream
- *  change. Can be triggered by calls to <code>selectTextTrack()</code> or
- *  <code>selectTextLanguage()</code>.
+ *   change. Can be triggered by calls to <code>selectTextTrack()</code> or
+ *   <code>selectTextLanguage()</code>.
+ *   An app may want to look at <code>getStats()</code> or
+ *   <code>getTextTracks()</code> to see what happened.
  * @property {string} type
  *   'textchanged'
  * @exportDoc
@@ -370,8 +389,8 @@ goog.requireType('shaka.media.PresentationTimeline');
  * @property {string} type
  *   'abrstatuschanged'
  * @property {boolean} newStatus
- *  The new status of the application. True for 'is enabled' and
- *  false otherwise.
+ *   The new status of the application. True for 'is enabled' and
+ *   false otherwise.
  * @exportDoc
  */
 
@@ -425,7 +444,8 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.StallDetectedEvent
  * @description Fired when a stall in playback is detected by the StallDetector.
- *     Not all stalls are caused by gaps in the buffered ranges.
+ *   Not all stalls are caused by gaps in the buffered ranges.
+ *   An app may want to look at <code>getStats()</code> to see what happened.
  * @property {string} type
  *   'stalldetected'
  * @exportDoc
@@ -435,7 +455,8 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.GapJumpedEvent
  * @description Fired when the GapJumpingController jumps over a gap in the
- *     buffered ranges.
+ *   buffered ranges.
+ *   An app may want to look at <code>getStats()</code> to see what happened.
  * @property {string} type
  *   'gapjumped'
  * @exportDoc
@@ -475,7 +496,7 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.FirstQuartile
  * @description Fires when the content playhead crosses first quartile.
- *     Only for VoD.
+ *   Only for VoD.
  * @property {string} type
  *   'firstquartile'
  * @exportDoc
@@ -485,7 +506,7 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.Midpoint
  * @description Fires when the content playhead crosses midpoint.
- *     Only for VoD.
+ *   Only for VoD.
  * @property {string} type
  *   'midpoint'
  * @exportDoc
@@ -495,7 +516,7 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.ThirdQuartile
  * @description Fires when the content playhead crosses third quartile.
- *     Only for VoD.
+ *   Only for VoD.
  * @property {string} type
  *   'thirdquartile'
  * @exportDoc
@@ -505,7 +526,7 @@ goog.requireType('shaka.media.PresentationTimeline');
 /**
  * @event shaka.Player.Complete
  * @description Fires when the content completes playing.
- *     Only for VoD.
+ *   Only for VoD.
  * @property {string} type
  *   'complete'
  * @exportDoc
@@ -547,10 +568,12 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
    *    When provided, the player will attach to <code>mediaElement</code>,
    *    similar to calling <code>attach</code>. When not provided, the player
    *    will remain detached.
+   * @param {HTMLElement=} videoContainer
+   *    The videoContainer to construct UITextDisplayer
    * @param {function(shaka.Player)=} dependencyInjector Optional callback
    *   which is called to inject mocks into the Player.  Used for testing.
    */
-  constructor(mediaElement, dependencyInjector) {
+  constructor(mediaElement, videoContainer = null, dependencyInjector) {
     super();
 
     /** @private {shaka.Player.LoadMode} */
@@ -560,7 +583,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     this.video_ = null;
 
     /** @private {HTMLElement} */
-    this.videoContainer_ = null;
+    this.videoContainer_ = videoContainer;
 
     /**
      * Since we may not always have a text displayer created (e.g. before |load|
@@ -790,6 +813,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     this.networkingEngine_ = this.createNetworkingEngine();
     this.networkingEngine_.setForceHTTP(this.config_.streaming.forceHTTP);
     this.networkingEngine_.setForceHTTPS(this.config_.streaming.forceHTTPS);
+    this.networkingEngine_.setMinBytesForProgressEvents(
+        this.config_.streaming.minBytesForProgressEvents);
 
     /** @private {shaka.extern.IAdManager} */
     this.adManager_ = null;
@@ -887,6 +912,9 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
           'use the attach method instead.');
       this.attach(mediaElement, /* initializeMediaSource= */ true);
     }
+
+    /** @private {?shaka.extern.TextDisplayer} */
+    this.textDisplayer_ = null;
   }
 
   /**
@@ -1410,6 +1438,11 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         this.cmsdManager_.reset();
       }
 
+      if (this.textDisplayer_) {
+        await this.textDisplayer_.destroy();
+        this.textDisplayer_ = null;
+      }
+
       if (this.video_) {
         // Remove all track nodes
         shaka.util.Dom.removeAllChildren(this.video_);
@@ -1623,6 +1656,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         preloadManager = await this.preloadInner_(
             assetUri, startTime, mimeType, /* standardLoad= */ true);
         if (preloadManager) {
+          preloadManager.markIsLoad();
           preloadManager.setEventHandoffTarget(this);
           this.stats_ = preloadManager.getStats();
           preloadManager.start();
@@ -1967,6 +2001,11 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         this.createdPreloadManagers_.push(preloadManager);
         return preloadManager;
       });
+    } else {
+      preloadManagerPromise = preloadManagerPromise.then((preloadManager) => {
+        preloadManager.markIsLoad();
+        return preloadManager;
+      });
     }
     return preloadManagerPromise;
   }
@@ -2088,7 +2127,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         let metadataType = type;
         if (type == 'com.apple.hls.interstitial') {
           metadataType = 'com.apple.quicktime.HLS';
-          /** @type {shaka.extern.Interstitial} */
+          /** @type {shaka.extern.HLSInterstitial} */
           const interstitial = {
             startTime,
             endTime,
@@ -2096,11 +2135,14 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
           };
           if (this.adManager_) {
             goog.asserts.assert(this.video_, 'Must have video');
-            this.adManager_.onInterstitialMetadata(
+            this.adManager_.onHLSInterstitialMetadata(
                 this, this.video_, interstitial);
           }
         }
         for (const payload of values) {
+          if (payload.name == 'ID') {
+            continue;
+          }
           preloadManager.addQueuedOperation(false, () => {
             this.dispatchMetadataEvent_(
                 startTime, endTime, metadataType, payload);
@@ -2109,6 +2151,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       },
       disableStream: (stream) => this.disableStream(
           stream, this.config_.streaming.maxDisabledTime),
+      addFont: (name, url) => this.addFont(name, url),
     };
     const regionTimeline =
         new shaka.media.RegionTimeline(() => this.seekRange());
@@ -2122,6 +2165,9 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       preloadManager.addQueuedOperation(false, () => {
         if (this.adManager_) {
           this.adManager_.onDashTimedMetadata(region);
+          goog.asserts.assert(this.video_, 'Must have video');
+          this.adManager_.onDASHInterstitialMetadata(
+              this, this.video_, region);
         }
       });
     });
@@ -2304,6 +2350,30 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     return false;
   }
 
+  /**
+   * @private
+   */
+  createTextDisplayer_() {
+    // When changing text visibility we need to update both the text displayer
+    // and streaming engine because we don't always stream text. To ensure
+    // that the text displayer and streaming engine are always in sync, wait
+    // until they are both initialized before setting the initial value.
+    const textDisplayerFactory = this.config_.textDisplayFactory;
+    if (textDisplayerFactory === this.lastTextFactory_) {
+      return;
+    }
+    this.textDisplayer_ = textDisplayerFactory();
+    if (this.textDisplayer_.configure) {
+      this.textDisplayer_.configure(this.config_.textDisplayer);
+    } else {
+      shaka.Deprecate.deprecateFeature(5,
+          'Text displayer w/ configure',
+          'Text displayer should have a "configure" method!');
+    }
+    this.lastTextFactory_ = textDisplayerFactory;
+    this.textDisplayer_.setTextVisibility(this.isTextVisible_);
+  }
+
   /**
    * Initializes the media source engine.
    *
@@ -2324,24 +2394,12 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
 
     this.makeStateChangeEvent_('media-source');
 
-    // When changing text visibility we need to update both the text displayer
-    // and streaming engine because we don't always stream text. To ensure
-    // that the text displayer and streaming engine are always in sync, wait
-    // until they are both initialized before setting the initial value.
-    const textDisplayerFactory = this.config_.textDisplayFactory;
-    const textDisplayer = textDisplayerFactory();
-    if (textDisplayer.configure) {
-      textDisplayer.configure(this.config_.textDisplayer);
-    } else {
-      shaka.Deprecate.deprecateFeature(5,
-          'Text displayer w/ configure',
-          'Text displayer should have a "configure" method!');
-    }
-    this.lastTextFactory_ = textDisplayerFactory;
-
+    this.createTextDisplayer_();
+    goog.asserts.assert(this.textDisplayer_,
+        'Text displayer should be created already');
     const mediaSourceEngine = this.createMediaSourceEngine(
         this.video_,
-        textDisplayer,
+        this.textDisplayer_,
         {
           getKeySystem: () => this.keySystem(),
           onMetadata: (metadata, offset, endTime) => {
@@ -2487,6 +2545,11 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
           'https://bit.ly/3clctcj for details.');
     }
 
+    if (this.cmcdManager_) {
+      this.cmcdManager_.setLowLatency(
+          this.manifest_.isLowLatency && this.config_.streaming.lowLatencyMode);
+    }
+
     shaka.Player.applyPlayRange_(this.manifest_.presentationTimeline,
         this.config_.playRangeStart,
         this.config_.playRangeEnd);
@@ -2509,7 +2572,11 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     };
 
     if (!this.config_.streaming.startAtSegmentBoundary) {
-      setupPlayhead(this.startTime_);
+      let startTime = this.startTime_;
+      if (startTime == null && this.manifest_.startTime) {
+        startTime = this.manifest_.startTime;
+      }
+      setupPlayhead(startTime);
     }
 
     // Now we can switch to the initial variant.
@@ -2522,6 +2589,9 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       if (this.config_.streaming.startAtSegmentBoundary) {
         const timeline = this.manifest_.presentationTimeline;
         let initialTime = this.startTime_ || this.video_.currentTime;
+        if (this.startTime_ == null && this.manifest_.startTime) {
+          initialTime = this.manifest_.startTime;
+        }
         const seekRangeStart = timeline.getSeekRangeStart();
         const seekRangeEnd = timeline.getSeekRangeEnd();
         if (initialTime < seekRangeStart) {
@@ -2841,6 +2911,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     }
 
     if (mediaElement.textTracks) {
+      this.createTextDisplayer_();
       this.loadEventManager_.listen(
           mediaElement.textTracks, 'addtrack', (e) => {
             const trackEvent = /** @type {!TrackEvent} */(e);
@@ -2871,6 +2942,22 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       this.loadEventManager_.listen(
           mediaElement.textTracks, 'change',
           () => this.onTracksChanged_());
+      this.loadEventManager_.listen(
+          mediaElement, 'enterpictureinpicture', () => {
+            const track = this.getFilteredTextTracks_()
+                .find((t) => t.mode !== 'disabled');
+            if (track) {
+              track.mode = 'showing';
+            }
+          });
+      this.loadEventManager_.listen(
+          mediaElement, 'leavepictureinpicture', () => {
+            const track = this.getFilteredTextTracks_()
+                .find((t) => t.mode !== 'disabled');
+            if (track) {
+              track.mode = 'hidden';
+            }
+          });
     }
 
     // By setting |src| we are done "loading" with src=. We don't need to set
@@ -2955,6 +3042,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
             });
           } else if (textTracks.length > 0) {
             this.isTextVisible_ = true;
+            this.textDisplayer_.setTextVisibility(true);
           }
 
           // If we have moved on to another piece of content while waiting for
@@ -2962,6 +3050,20 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
           if (unloaded) {
             return;
           }
+          let enabledNativeTrack = false;
+          for (const track of textTracks) {
+            if (track.mode !== 'disabled') {
+              if (!enabledNativeTrack) {
+                this.enableNativeTrack_(track);
+                enabledNativeTrack = true;
+              } else {
+                track.mode = 'disabled';
+                shaka.log.alwaysWarn(
+                    'Found more than one enabled text track, disabling it',
+                    track);
+              }
+            }
+          }
 
           this.setupPreferredTextOnSrc_();
         });
@@ -3083,55 +3185,58 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     // Hidden mode is required for the cuechange event to launch correctly
     track.mode = 'hidden';
     this.loadEventManager_.listen(track, 'cuechange', () => {
-      if (!track.activeCues) {
-        return;
-      }
+      if (track.activeCues) {
+        for (const cue of track.activeCues) {
+          this.dispatchMetadataEvent_(cue.startTime, cue.endTime,
+              cue.type, cue.value);
 
-      /** @type {!Array.<shaka.extern.Interstitial>} */
-      const interstitials = [];
-
-      for (const cue of track.activeCues) {
-        this.dispatchMetadataEvent_(cue.startTime, cue.endTime,
-            cue.type, cue.value);
-
-        if (this.adManager_) {
-          this.adManager_.onCueMetadataChange(cue.value);
-        }
-        if (cue.type == 'com.apple.quicktime.HLS' && cue.startTime != null) {
-          let interstitial = interstitials.find((i) => {
-            return i.startTime == cue.startTime && i.endTime == cue.endTime;
-          });
-          if (!interstitial) {
-            interstitial = /** @type {shaka.extern.Interstitial} */ ({
-              startTime: cue.startTime,
-              endTime: cue.endTime,
-              values: [],
-            });
-            interstitials.push(interstitial);
+          if (this.adManager_) {
+            this.adManager_.onCueMetadataChange(cue.value);
           }
-          interstitial.values.push(cue.value);
         }
       }
-      for (const interstitial of interstitials) {
-        const isValidInterstitial = interstitial.values.some((value) => {
-          return value.key == 'X-ASSET-URI' || value.key == 'X-ASSET-LIST';
-        });
-        if (!isValidInterstitial) {
-          continue;
+      if (track.cues) {
+        /** @type {!Array.<shaka.extern.HLSInterstitial>} */
+        const interstitials = [];
+
+        for (const cue of track.cues) {
+          if (cue.type == 'com.apple.quicktime.HLS' && cue.startTime != null) {
+            let interstitial = interstitials.find((i) => {
+              return i.startTime == cue.startTime && i.endTime == cue.endTime;
+            });
+            if (!interstitial) {
+              interstitial = /** @type {shaka.extern.HLSInterstitial} */ ({
+                startTime: cue.startTime,
+                endTime: cue.endTime,
+                values: [],
+              });
+              interstitials.push(interstitial);
+            }
+            interstitial.values.push(cue.value);
+          }
         }
-        if (this.adManager_) {
-          // It seems that CUE is natively omitted, by default we use CUE=ONCE
-          // to avoid repeating them.
-          interstitial.values.push({
-            key: 'CUE',
-            description: '',
-            data: 'ONCE',
-            mimeType: null,
-            pictureType: null,
+        for (const interstitial of interstitials) {
+          const isValidInterstitial = interstitial.values.some((value) => {
+            return value.key == 'X-ASSET-URI' || value.key == 'X-ASSET-LIST';
           });
-          goog.asserts.assert(this.video_, 'Must have video');
-          this.adManager_.onInterstitialMetadata(
-              this, this.video_, interstitial);
+          if (!isValidInterstitial) {
+            continue;
+          }
+          if (this.adManager_) {
+            const isPreRoll = interstitial.startTime == 0;
+            // It seems that CUE is natively omitted, by default we use CUE=ONCE
+            // to avoid repeating them.
+            interstitial.values.push({
+              key: 'CUE',
+              description: '',
+              data: isPreRoll ? 'ONCE,PRE' : 'ONCE',
+              mimeType: null,
+              pictureType: null,
+            });
+            goog.asserts.assert(this.video_, 'Must have video');
+            this.adManager_.onHLSInterstitialMetadata(
+                this, this.video_, interstitial);
+          }
         }
       }
     });
@@ -3836,6 +3941,15 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       delete config['mediaSource']['sourceBufferExtraFeatures'];
     }
 
+    // Deprecate 'manifest.hls.useSafariBehaviorForLive' configuration.
+    if (config['manifest'] && config['manifest']['hls'] &&
+        'useSafariBehaviorForLive' in config['manifest']['hls']) {
+      shaka.Deprecate.deprecateFeature(5,
+          'manifest.hls.useSafariBehaviorForLive configuration',
+          'Please Use liveSync config to keep on live Edge instead.');
+      delete config['manifest']['hls']['useSafariBehaviorForLive'];
+    }
+
     // If lowLatencyMode is enabled, and inaccurateManifestTolerance and
     // rebufferingGoal and segmentPrefetchLimit and baseDelay and
     // autoCorrectDrift and maxDisabledTime are not specified, set
@@ -3950,6 +4064,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     if (this.networkingEngine_) {
       this.networkingEngine_.setForceHTTP(this.config_.streaming.forceHTTP);
       this.networkingEngine_.setForceHTTPS(this.config_.streaming.forceHTTPS);
+      this.networkingEngine_.setMinBytesForProgressEvents(
+          this.config_.streaming.minBytesForProgressEvents);
     }
 
     if (this.mediaSourceEngine_) {
@@ -3957,18 +4073,25 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       const {segmentRelativeVttTiming} = this.config_.manifest;
       this.mediaSourceEngine_.setSegmentRelativeVttTiming(
           segmentRelativeVttTiming);
+    }
 
+    if (this.textDisplayer_) {
       const textDisplayerFactory = this.config_.textDisplayFactory;
       if (this.lastTextFactory_ != textDisplayerFactory) {
-        const displayer = textDisplayerFactory();
-        if (displayer.configure) {
-          displayer.configure(this.config_.textDisplayer);
+        const oldDisplayer = this.textDisplayer_;
+        this.textDisplayer_ = textDisplayerFactory();
+        if (this.textDisplayer_.configure) {
+          this.textDisplayer_.configure(this.config_.textDisplayer);
         } else {
           shaka.Deprecate.deprecateFeature(5,
               'Text displayer w/ configure',
               'Text displayer should have a "configure" method!');
         }
-        this.mediaSourceEngine_.setTextDisplayer(displayer);
+        this.textDisplayer_.setTextVisibility(oldDisplayer.isTextVisible());
+        oldDisplayer.destroy();
+        if (this.mediaSourceEngine_) {
+          this.mediaSourceEngine_.setTextDisplayer(this.textDisplayer_);
+        }
         this.lastTextFactory_ = textDisplayerFactory;
 
         if (this.streamingEngine_) {
@@ -3976,12 +4099,12 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
           this.streamingEngine_.reloadTextStream();
         }
       } else {
-        const displayer = this.mediaSourceEngine_.getTextDisplayer();
-        if (displayer.configure) {
-          displayer.configure(this.config_.textDisplayer);
+        if (this.textDisplayer_.configure) {
+          this.textDisplayer_.configure(this.config_.textDisplayer);
         }
       }
     }
+
     if (this.abrManager_) {
       this.abrManager_.configure(this.config_.abr);
       // Simply enable/disable ABR with each call, since multiple calls to these
@@ -4829,20 +4952,42 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       this.currentTextLanguage_ = stream.language;
     } else if (this.video_ && this.video_.src && this.video_.textTracks) {
       const textTracks = this.getFilteredTextTracks_();
-      for (const textTrack of textTracks) {
-        if (shaka.util.StreamUtils.html5TrackId(textTrack) == track.id) {
-          // Leave the track in 'hidden' if it's selected but not showing.
-          textTrack.mode = this.isTextVisible_ ? 'showing' : 'hidden';
-        } else {
-          // Safari allows multiple text tracks to have mode == 'showing', so be
-          // explicit in resetting the others.
-          textTrack.mode = 'disabled';
+      const oldTrack = textTracks.find((textTrack) =>
+        textTrack.mode !== 'disabled');
+      const newTrack = textTracks.find((textTrack) =>
+        shaka.util.StreamUtils.html5TrackId(textTrack) === track.id);
+      if (oldTrack !== newTrack) {
+        if (oldTrack) {
+          oldTrack.mode = 'disabled';
+          this.loadEventManager_.unlisten(oldTrack, 'cuechange');
+          this.textDisplayer_.remove(0, Infinity);
+        }
+        if (newTrack) {
+          this.enableNativeTrack_(newTrack);
         }
       }
       this.onTextChanged_();
     }
   }
 
+  /**
+   * @param {!TextTrack} track
+   * @private
+   */
+  enableNativeTrack_(track) {
+    this.loadEventManager_.listen(track, 'cuechange', () => {
+      // Always remove cues from the past to avoid memory grow.
+      const removeEnd = Math.max(0,
+          this.video_.currentTime - this.config_.streaming.bufferBehind);
+      this.textDisplayer_.remove(0, removeEnd);
+      const cues = Array.from(track.activeCues || [])
+          .map(shaka.text.Utils.mapNativeCueToShakaCue)
+          .filter(shaka.util.Functional.isNotNull);
+      this.textDisplayer_.append(cues);
+    });
+    track.mode = document.pictureInPictureElement ? 'showing' : 'hidden';
+  }
+
   /**
    * Select a specific variant track to play.  <code>track</code> should come
    * from a call to <code>getVariantTracks</code>. If <code>track</code> cannot
@@ -5159,20 +5304,14 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
    */
   isTextTrackVisible() {
     const expected = this.isTextVisible_;
-
-    if (this.mediaSourceEngine_ &&
-        this.loadMode_ == shaka.Player.LoadMode.MEDIA_SOURCE) {
-      // Make sure our values are still in-sync.
-      const actual = this.mediaSourceEngine_.getTextDisplayer().isTextVisible();
+    if (this.textDisplayer_) {
+      const actual = this.textDisplayer_.isTextVisible();
       goog.asserts.assert(
           actual == expected, 'text visibility has fallen out of sync');
 
       // Always return the actual value so that the app has the most accurate
       // information (in the case that the values come out of sync in prod).
       return actual;
-    } else if (this.video_ && this.video_.src && this.video_.textTracks) {
-      const textTracks = this.getFilteredTextTracks_();
-      return textTracks.some((t) => t.mode == 'showing');
     }
 
     return expected;
@@ -5301,8 +5440,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     // Hold of on setting the text visibility until we have all the components
     // we need. This ensures that they stay in-sync.
     if (this.loadMode_ == shaka.Player.LoadMode.MEDIA_SOURCE) {
-      this.mediaSourceEngine_.getTextDisplayer()
-          .setTextVisibility(newVisibility);
+      this.textDisplayer_.setTextVisibility(newVisibility);
 
       // When the user wants to see captions, we stream captions. When the user
       // doesn't want to see captions, we don't stream captions. This is to
@@ -5332,15 +5470,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         }
       }
     } else if (this.video_ && this.video_.src && this.video_.textTracks) {
-      const textTracks = this.getFilteredTextTracks_();
-      // Find the active track by looking for one which is not disabled.  This
-      // is the only way to identify the track which is currently displayed.
-      // Set it to 'showing' or 'hidden' based on newVisibility.
-      for (const textTrack of textTracks) {
-        if (textTrack.mode != 'disabled') {
-          textTrack.mode = newVisibility ? 'showing' : 'hidden';
-        }
-      }
+      this.textDisplayer_.setTextVisibility(newVisibility);
     }
 
     // We need to fire the event after we have updated everything so that
@@ -5795,7 +5925,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       vttOffset: 0,
     };
     const data = shaka.util.BufferUtils.toUint8(buffer);
-    const cues = TextParser.parseMedia(data, time, uri);
+    const cues = TextParser.parseMedia(data, time, uri, /* images= */ []);
 
     const references = [];
     for (const cue of cues) {
@@ -6062,7 +6192,8 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
         vttOffset: 0,
       };
       const data = shaka.util.BufferUtils.toUint8(buffer);
-      const cues = obj.parseMedia(data, time, /* uri= */ null);
+      const cues = obj.parseMedia(
+          data, time, /* uri= */ null, /* images= */ []);
       return shaka.text.WebVttGenerator.convert(cues, adCuePoints);
     }
     throw new shaka.util.Error(
@@ -6141,6 +6272,50 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     return this.parserFactory_;
   }
 
+  /**
+   * Gets information about the currently fetched video, audio, and text.
+   * In the case of a multi-codec or multi-mimeType manifest, this can let you
+   * determine the exact codecs and mimeTypes being fetched at the moment.
+   *
+   * @return {!shaka.extern.PlaybackInfo}
+   */
+  getFetchedPlaybackInfo() {
+    const output = /** @type {!shaka.extern.PlaybackInfo} */ ({
+      'video': null,
+      'audio': null,
+      'text': null,
+    });
+    if (this.loadMode_ != shaka.Player.LoadMode.MEDIA_SOURCE) {
+      return output;
+    }
+    const ContentType = shaka.util.ManifestParserUtils.ContentType;
+    const variant = this.streamingEngine_.getCurrentVariant();
+    const textStream = this.streamingEngine_.getCurrentTextStream();
+    const currentTime = this.video_.currentTime;
+    for (const stream of [variant.video, variant.audio, textStream]) {
+      if (!stream || !stream.segmentIndex) {
+        continue;
+      }
+      const position = stream.segmentIndex.find(currentTime);
+      const reference = stream.segmentIndex.get(position);
+      const info = /** @type {!shaka.extern.PlaybackStreamInfo} */ ({
+        'codecs': reference.codecs || stream.codecs,
+        'mimeType': reference.mimeType || stream.mimeType,
+        'bandwidth': reference.bandwidth || stream.bandwidth,
+      });
+      if (stream.type == ContentType.VIDEO) {
+        info['width'] = stream.width;
+        info['height'] = stream.height;
+        output['video'] = info;
+      } else if (stream.type == ContentType.AUDIO) {
+        output['audio'] = info;
+      } else if (stream.type == ContentType.TEXT) {
+        output['text'] = info;
+      }
+    }
+    return output;
+  }
+
   /**
    * @param {shaka.extern.Variant} variant
    * @param {boolean} fromAdaptation
@@ -6953,7 +7128,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       if (this.isTextVisible_) {
         // If the cached value says to show text, then update the text displayer
         // since it defaults to not shown.
-        this.mediaSourceEngine_.getTextDisplayer().setTextVisibility(true);
+        this.textDisplayer_.setTextVisibility(true);
         goog.asserts.assert(this.shouldStreamText_(),
             'Should be streaming text');
       }
@@ -7335,6 +7510,11 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       try {
         const ret = await this.streamingEngine_.resetMediaSource();
         fireError = !ret;
+        if (ret) {
+          const event = shaka.Player.makeEvent_(
+              shaka.util.FakeEvent.EventName.MediaSourceRecovered);
+          this.dispatchEvent(event);
+        }
       } catch (e) {
         fireError = true;
       }
@@ -7357,6 +7537,41 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     }
   }
 
+  /**
+   * Load a new font on the page. If the font was already loaded, it does
+   * nothing.
+   *
+   * @param {string} name
+   * @param {string} url
+   * @export
+   */
+  async addFont(name, url) {
+    if ('fonts' in document && 'FontFace' in window ) {
+      await document.fonts.ready;
+      if (!('entries' in document.fonts)) {
+        return;
+      }
+      const fontFaceSetIteratorToArray = (target) => {
+        const iterable = target.entries();
+        const results = [];
+        let iterator = iterable.next();
+        while (iterator.done === false) {
+          results.push(iterator.value);
+          iterator = iterable.next();
+        }
+        return results;
+      };
+      for (const fontFace of fontFaceSetIteratorToArray(document.fonts)) {
+        if (fontFace.family == name && fontFace.display == 'swap') {
+          // Font already loaded.
+          return;
+        }
+      }
+      const fontFace = new FontFace(name, `url(${url})`, {display: 'swap'});
+      document.fonts.add(fontFace);
+    }
+  }
+
   /**
    * When we fire region events, we need to copy the information out of the
    * region to break the connection with the player's internal data. We do the
@@ -7848,7 +8063,7 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @export
  */
 // eslint-disable-next-line no-useless-concat
-shaka.Player.version = 'v4.10.13' + '-uncompiled';  // x-release-please-version
+shaka.Player.version = 'v4.11.0' + '-uncompiled';  // x-release-please-version
 
 // Initialize the deprecation system using the version string we just set
 // on the player.