shaka-player 4.2.5 → 4.2.7

package/lib/ads/ad_manager.js

@@ -19,8 +19,8 @@ goog.require('shaka.util.IReleasable');
 
 
 /**
- * @event shaka.ads.AdManager.ADS_LOADED
- * @description Fired when an ad has started playing.
+ * @event shaka.ads.AdManager.AdsLoadedEvent
+ * @description Fired when a sequence of ads has been loaded.
  * @property {string} type
  *   'ads-loaded'
  * @property {number} loadTime

package/lib/hls/hls_parser.js

@@ -136,6 +136,14 @@ shaka.hls.HlsParser = class {
      */
     this.minSequenceNumber_ = null;
 
+    /**
+     * The lowest time value for any of the streams, as defined by the
+     * EXT-X-PROGRAM-DATE-TIME value. Measured in seconds since January 1, 1970.
+     *
+     * @private {number}
+     */
+    this.lowestSyncTime_ = Infinity;
+
     /**
      * This timer is used to trigger the start of a manifest update. A manifest
      * update is async. Once the update is finished, the timer will be restarted
@@ -446,7 +454,11 @@ shaka.hls.HlsParser = class {
         // Now adjust timestamps back to begin at 0.
         const segmentN = segmentIndex.earliestReference();
         if (segmentN) {
-          this.offsetStream_(streamInfo, -segmentN.startTime);
+          const streamOffset = -segmentN.startTime;
+          // Modify all SegmentReferences equally.
+          streamInfo.stream.segmentIndex.offset(streamOffset);
+          // Update other parts of streamInfo the same way.
+          this.offsetStreamInfo_(streamInfo, streamOffset);
         }
       }
     }
@@ -465,6 +477,10 @@ shaka.hls.HlsParser = class {
       return;
     }
 
+    if (this.lowestSyncTime_ != Infinity) {
+      return;
+    }
+
     let lowestSyncTime = Infinity;
 
     for (const streamInfo of this.uriToStreamInfosMap_.values()) {
@@ -481,28 +497,36 @@ shaka.hls.HlsParser = class {
       // Nothing to sync.
       return;
     }
+    this.lowestSyncTime_ = lowestSyncTime;
 
     shaka.log.debug('Syncing HLS streams against base time:', lowestSyncTime);
 
     for (const streamInfo of this.uriToStreamInfosMap_.values()) {
       const segmentIndex = streamInfo.stream.segmentIndex;
       if (segmentIndex != null) {
+        // A segment's startTime should be based on its syncTime vs the lowest
+        // syncTime across all streams.  The earliest segment sync time from
+        // any stream will become presentation time 0.  If two streams start
+        // e.g. 6 seconds apart in syncTime, then their first segments will
+        // also start 6 seconds apart in presentation time.
+
         const segment0 = segmentIndex.earliestReference();
         if (segment0.syncTime == null) {
           shaka.log.alwaysError('Missing EXT-X-PROGRAM-DATE-TIME for stream',
               streamInfo.verbatimMediaPlaylistUri,
               'Expect AV sync issues!');
         } else {
-          // The first segment's target startTime should be based entirely on
-          // its syncTime.  The rest of the stream will be based on that
-          // starting point.  The earliest segment sync time from any stream
-          // will become presentation time 0.  If two streams start e.g. 6
-          // seconds apart in syncTime, then their first segments will also
-          // start 6 seconds apart in presentation time.
+          // Stream metadata are offset by a fixed amount based on the
+          // first segment.
           const segment0TargetTime = segment0.syncTime - lowestSyncTime;
           const streamOffset = segment0TargetTime - segment0.startTime;
+          this.offsetStreamInfo_(streamInfo, streamOffset);
 
-          this.offsetStream_(streamInfo, streamOffset);
+          // This is computed across all segments separately to manage
+          // accumulated drift in durations.
+          for (const segment of segmentIndex) {
+            segment.syncAgainst(lowestSyncTime);
+          }
         }
       }
     }
@@ -515,13 +539,13 @@ shaka.hls.HlsParser = class {
    * @param {number} offset
    * @private
    */
-  offsetStream_(streamInfo, offset) {
-    streamInfo.stream.segmentIndex.offset(offset);
-
+  offsetStreamInfo_(streamInfo, offset) {
+    // Adjust our accounting of the maximum timestamp.
     streamInfo.maxTimestamp += offset;
     goog.asserts.assert(streamInfo.maxTimestamp >= 0,
         'Negative maxTimestamp after adjustment!');
 
+    // Update our map from sequence number to start time.
     for (const [key, value] of streamInfo.mediaSequenceToStartTime) {
       streamInfo.mediaSequenceToStartTime.set(key, value + offset);
     }
@@ -2243,12 +2267,12 @@ shaka.hls.HlsParser = class {
     /** @type {shaka.extern.HlsAes128Key|undefined} */
     let hlsAes128Key = undefined;
 
-    // We may need to look at the media itself to determine a segment start
-    // time.
+    let discontinuitySequence = shaka.hls.Utils.getFirstTagWithNameAsNumber(
+        playlist.tags, 'EXT-X-DISCONTINUITY-SEQUENCE', 0);
     const mediaSequenceNumber = shaka.hls.Utils.getFirstTagWithNameAsNumber(
         playlist.tags, 'EXT-X-MEDIA-SEQUENCE', 0);
-    const skipTag = shaka.hls.Utils.getFirstTagWithName(playlist.tags,
-        'EXT-X-SKIP');
+    const skipTag = shaka.hls.Utils.getFirstTagWithName(
+        playlist.tags, 'EXT-X-SKIP');
     const skippedSegments =
         skipTag ? Number(skipTag.getAttributeValue('SKIPPED-SEGMENTS')) : 0;
     let position = mediaSequenceNumber + skippedSegments;
@@ -2271,11 +2295,20 @@ shaka.hls.HlsParser = class {
           (i == 0) ? firstStartTime : previousReference.endTime;
       position = mediaSequenceNumber + skippedSegments + i;
 
+      const discontinuityTag = shaka.hls.Utils.getFirstTagWithName(
+          item.tags, 'EXT-X-DISCONTINUITY');
+      if (discontinuityTag) {
+        discontinuitySequence++;
+      }
+
       // Apply new AES-128 tags as you see them, keeping a running total.
       for (const drmTag of item.tags) {
-        if (drmTag.name == 'EXT-X-KEY' &&
-            drmTag.getRequiredAttrValue('METHOD') == 'AES-128') {
-          hlsAes128Key = this.parseAES128DrmTag_(drmTag, playlist);
+        if (drmTag.name == 'EXT-X-KEY') {
+          if (drmTag.getRequiredAttrValue('METHOD') == 'AES-128') {
+            hlsAes128Key = this.parseAES128DrmTag_(drmTag, playlist);
+          } else {
+            hlsAes128Key = undefined;
+          }
         }
       }
 
@@ -2308,6 +2341,8 @@ shaka.hls.HlsParser = class {
       previousReference = reference;
 
       if (reference) {
+        reference.discontinuitySequence = discontinuitySequence;
+
         if (this.config_.hls.ignoreManifestProgramDateTime &&
             this.minSequenceNumber_ != null &&
             position < this.minSequenceNumber_) {
@@ -2394,6 +2429,16 @@ shaka.hls.HlsParser = class {
       }
     }
 
+    // lowestSyncTime is a value from a previous playlist update.  Use it to
+    // set reference start times.  If this is the first playlist parse, we will
+    // skip this step, and wait until we have sync time across stream types.
+    const lowestSyncTime = this.lowestSyncTime_;
+    if (someSyncTime && lowestSyncTime != Infinity) {
+      for (const reference of references) {
+        reference.syncAgainst(lowestSyncTime);
+      }
+    }
+
     return references;
   }
 

package/lib/media/media_source_engine.js

@@ -616,6 +616,8 @@ shaka.media.MediaSourceEngine = class {
       // into extracting a timestamp for us to align text segments in sequence
       // mode.
 
+      const duration = this.mediaSource_.duration;
+
       // Timestamps can only be reliably extracted from video, not audio.
       // Packed audio formats do not have internal timestamps at all.
       // Prefer video for this when available.
@@ -659,7 +661,7 @@ shaka.media.MediaSourceEngine = class {
         // Clear the buffer.
         await this.enqueueOperation_(
             contentType,
-            () => this.remove_(contentType, 0, this.mediaSource_.duration));
+            () => this.remove_(contentType, 0, duration));
 
         // Finally, flush the buffer in case of choppy video start on HLS fMP4.
         if (contentType == ContentType.VIDEO) {
@@ -671,6 +673,10 @@ shaka.media.MediaSourceEngine = class {
 
       // Now switch to sequence mode and fall through to our normal operations.
       sourceBuffer.mode = SEQUENCE;
+
+      // When we change the buffer mode the duration is lost, so we need to set
+      // it explicitly.
+      await this.setDuration(duration);
     }
 
     if (reference && this.sequenceMode_ && contentType != ContentType.TEXT) {
@@ -705,8 +711,13 @@ shaka.media.MediaSourceEngine = class {
           bufferedBefore, bufferedAfter);
       if (newBuffered) {
         const segmentDuration = reference.endTime - reference.startTime;
-        if (Math.abs(newBuffered.start - reference.startTime) >
-            segmentDuration / 2) {
+        // Check end times instead of start times.  We may be overwriting a
+        // buffer and only the end changes, and that would be fine.
+        // Also, exclude tiny segments.  Sometimes alignment segments as small
+        // as 33ms are seen in Google DAI content.  For such tiny segments,
+        // half a segment duration would be no issue.
+        const offset = Math.abs(newBuffered.end - reference.endTime);
+        if (segmentDuration > 0.100 && offset > segmentDuration / 2) {
           shaka.log.error('Possible encoding problem detected!',
               'Unexpected buffered range for reference', reference,
               'from URIs', reference.getUris(),
@@ -856,6 +867,41 @@ shaka.media.MediaSourceEngine = class {
     ]);
   }
 
+  /**
+   * Adjust timestamp offset to maintain AV sync across discontinuities.
+   * Only used in sequence mode.
+   *
+   * @param {shaka.util.ManifestParserUtils.ContentType} contentType
+   * @param {number} timestampOffset
+   * @return {!Promise}
+   */
+  async resync(contentType, timestampOffset) {
+    const ContentType = shaka.util.ManifestParserUtils.ContentType;
+
+    goog.asserts.assert(this.sequenceMode_,
+        'resync only used with sequence mode!');
+
+    if (contentType == ContentType.TEXT) {
+      // This operation is for audio and video only.
+      return;
+    }
+
+    // Queue an abort() to help MSE splice together overlapping segments.
+    // We set appendWindowEnd when we change periods in DASH content, and the
+    // period transition may result in overlap.
+    //
+    // An abort() also helps with MPEG2-TS.  When we append a TS segment, we
+    // always enter a PARSING_MEDIA_SEGMENT state and we can't change the
+    // timestamp offset.  By calling abort(), we reset the state so we can
+    // set it.
+    this.enqueueOperation_(
+        contentType,
+        () => this.abort_(contentType));
+    await this.enqueueOperation_(
+        contentType,
+        () => this.setTimestampOffset_(contentType, timestampOffset));
+  }
+
   /**
    * @param {string=} reason Valid reasons are 'network' and 'decode'.
    * @return {!Promise}

package/lib/media/segment_index.js

@@ -183,15 +183,7 @@ shaka.media.SegmentIndex = class {
   offset(offset) {
     if (!this.immutable_) {
       for (const ref of this.references) {
-        ref.startTime += offset;
-        ref.endTime += offset;
-        ref.trueEndTime += offset;
-
-        for (const partial of ref.partialReferences) {
-          partial.startTime += offset;
-          partial.endTime += offset;
-          partial.trueEndTime += offset;
-        }
+        ref.offset(offset);
       }
     }
   }
@@ -225,8 +217,11 @@ shaka.media.SegmentIndex = class {
     // Partial segments are used for live edge, and should be removed when they
     // get older. Remove the old SegmentReferences after the first new
     // reference's start time.
+    // Use times rounded to the millisecond for filtering purposes, so that
+    // tiny rounding errors will not result in duplicate segments in the index.
+    const firstStartTime = Math.round(references[0].startTime * 1000) / 1000;
     this.references = this.references.filter((r) => {
-      return r.startTime < references[0].startTime;
+      return (Math.round(r.startTime * 1000) / 1000) < firstStartTime;
     });
 
     this.references.push(...references);

package/lib/media/segment_reference.js

@@ -8,6 +8,7 @@ goog.provide('shaka.media.InitSegmentReference');
 goog.provide('shaka.media.SegmentReference');
 
 goog.require('goog.asserts');
+goog.require('shaka.log');
 goog.require('shaka.util.ArrayUtils');
 
 
@@ -239,6 +240,9 @@ shaka.media.SegmentReference = class {
 
     /** @type {?shaka.extern.HlsAes128Key} */
     this.hlsAes128Key = hlsAes128Key;
+
+    /** @type {number} */
+    this.discontinuitySequence = 0;
   }
 
   /**
@@ -353,6 +357,44 @@ shaka.media.SegmentReference = class {
   markAsUnavailable() {
     this.status = shaka.media.SegmentReference.Status.UNAVAILABLE;
   }
+
+  /**
+   * Offset the segment reference by a fixed amount.
+   *
+   * @param {number} offset The amount to add to the segment's start and end
+   *   times.
+   * @export
+   */
+  offset(offset) {
+    this.startTime += offset;
+    this.endTime += offset;
+    this.trueEndTime += offset;
+
+    for (const partial of this.partialReferences) {
+      partial.startTime += offset;
+      partial.endTime += offset;
+      partial.trueEndTime += offset;
+    }
+  }
+
+  /**
+   * Sync this segment against a particular sync time that will serve as "0" in
+   * the presentation timeline.
+   *
+   * @param {number} lowestSyncTime
+   * @export
+   */
+  syncAgainst(lowestSyncTime) {
+    if (this.syncTime == null) {
+      shaka.log.alwaysError('Sync attempted without sync time!');
+      return;
+    }
+    const desiredStart = this.syncTime - lowestSyncTime;
+    const offset = desiredStart - this.startTime;
+    if (Math.abs(offset) >= 0.001) {
+      this.offset(offset);
+    }
+  }
 };
 
 

package/lib/media/streaming_engine.js

@@ -618,6 +618,11 @@ shaka.media.StreamingEngine = class {
    * within the presentation timeline.
    */
   seeked() {
+    if (!this.playerInterface_) {
+      // Already destroyed.
+      return;
+    }
+
     const presentationTime = this.playerInterface_.getPresentationTime();
     const ContentType = shaka.util.ManifestParserUtils.ContentType;
     const newTimeIsBuffered = (type) => {
@@ -675,7 +680,7 @@ shaka.media.StreamingEngine = class {
 
   /**
    * Clear the buffer for a given stream.  Unlike clearBuffer_, this will handle
-   * cases where a MediaState is performing an update.  After this runs, every
+   * cases where a MediaState is performing an update.  After this runs, the
    * MediaState will have a pending update.
    * @param {!shaka.media.StreamingEngine.MediaState_} mediaState
    * @private
@@ -791,9 +796,9 @@ shaka.media.StreamingEngine = class {
     for (const type of streamsByType.keys()) {
       const stream = streamsByType.get(type);
       if (!this.mediaStates_.has(type)) {
-        const state = this.createMediaState_(stream);
-        this.mediaStates_.set(type, state);
-        this.scheduleUpdate_(state, 0);
+        const mediaState = this.createMediaState_(stream);
+        this.mediaStates_.set(type, mediaState);
+        this.scheduleUpdate_(mediaState, 0);
       }
     }
   }
@@ -827,6 +832,7 @@ shaka.media.StreamingEngine = class {
       // The playhead might be seeking on startup, if a start time is set, so
       // start "seeked" as true.
       seeked: true,
+      needsResync: false,
       recovering: false,
       hasError: false,
       operation: null,
@@ -905,7 +911,7 @@ shaka.media.StreamingEngine = class {
               'mediastate.stream should not have segmentIndex yet.');
           thisStream.closeSegmentIndex();
         }
-        if (mediaState.updateTimer == null) {
+        if (!mediaState.performingUpdate && !mediaState.updateTimer) {
           this.scheduleUpdate_(mediaState, 0);
         }
         return;
@@ -1150,6 +1156,11 @@ shaka.media.StreamingEngine = class {
       shaka.log.v1(
           logPrefix, 'looking up segment from new stream endTime:', time);
 
+      // Using a new iterator means we need to resync the stream in sequence
+      // mode.  The buffered range might not align perfectly with the last
+      // segment end time, so we may end up repeating a segment.  Resyncing
+      // makes this safe to do.
+      mediaState.needsResync = true;
       mediaState.segmentIterator =
           mediaState.stream.segmentIndex.getIteratorForTime(time);
       const ref = mediaState.segmentIterator &&
@@ -1389,7 +1400,7 @@ shaka.media.StreamingEngine = class {
         // If the network slows down, abort the current fetch request and start
         // a new one, and ignore the error message.
         mediaState.performingUpdate = false;
-        mediaState.updateTimer = null;
+        this.cancelUpdate_(mediaState);
         this.scheduleUpdate_(mediaState, 0);
       } else if (mediaState.type == ContentType.TEXT &&
           this.config_.ignoreTextStreamFailures) {
@@ -1462,7 +1473,10 @@ shaka.media.StreamingEngine = class {
 
     for (const mediaState of this.mediaStates_.values()) {
       const logPrefix = shaka.media.StreamingEngine.logPrefix_(mediaState);
-      if (mediaState.hasError) {
+      // Only schedule an update if it has an error, but it's not mid-update
+      // and there is not already an update scheduled.
+      if (mediaState.hasError && !mediaState.performingUpdate &&
+          !mediaState.updateTimer) {
         shaka.log.info(logPrefix, 'Retrying after failure...');
         mediaState.hasError = false;
         this.scheduleUpdate_(mediaState, delaySeconds);
@@ -1645,6 +1659,21 @@ shaka.media.StreamingEngine = class {
       }
     }
 
+    if (this.manifest_.sequenceMode) {
+      // Across discontinuity bounds, we should resync timestamps for
+      // sequence mode playbacks.  The next segment appended should
+      // land at its theoretical timestamp from the segment index.
+      const lastDiscontinuitySequence =
+          mediaState.lastSegmentReference ?
+              mediaState.lastSegmentReference.discontinuitySequence : null;
+      if (reference.discontinuitySequence != lastDiscontinuitySequence ||
+          mediaState.needsResync) {
+        mediaState.needsResync = false;
+        operations.push(this.playerInterface_.mediaSourceEngine.resync(
+            mediaState.type, reference.startTime));
+      }
+    }
+
     await Promise.all(operations);
   }
 
@@ -1678,8 +1707,6 @@ shaka.media.StreamingEngine = class {
 
     await this.evict_(mediaState, presentationTime);
     this.destroyer_.ensureNotDestroyed();
-    shaka.log.v1(logPrefix, 'appending media segment at',
-        (reference.syncTime == null ? 'unknown' : reference.syncTime));
 
     // 'seeked' or 'adaptation' triggered logic applies only to this
     // appendBuffer() call.
@@ -1956,7 +1983,11 @@ shaka.media.StreamingEngine = class {
     shaka.log.debug(logPrefix, 'cleared buffer');
     mediaState.clearingBuffer = false;
     mediaState.endOfStream = false;
-    this.scheduleUpdate_(mediaState, 0);
+    // Since the clear operation was async, check to make sure we're not doing
+    // another update and we don't have one scheduled yet.
+    if (!mediaState.performingUpdate && !mediaState.updateTimer) {
+      this.scheduleUpdate_(mediaState, 0);
+    }
   }
 
 
@@ -2128,6 +2159,7 @@ shaka.media.StreamingEngine.PlayerInterface;
  *   clearBufferSafeMargin: number,
  *   clearingBuffer: boolean,
  *   seeked: boolean,
+ *   needsResync: boolean,
  *   adaptation: boolean,
  *   recovering: boolean,
  *   hasError: boolean,
@@ -2173,10 +2205,13 @@ shaka.media.StreamingEngine.PlayerInterface;
  *   The amount of buffer to retain when clearing the buffer after the update.
  * @property {boolean} clearingBuffer
  *   True indicates that the buffer is being cleared.
-  * @property {boolean} seeked
+ * @property {boolean} seeked
  *   True indicates that the presentation just seeked.
-  * @property {boolean} adaptation
+ * @property {boolean} adaptation
  *   True indicates that the presentation just automatically switched variants.
+ * @property {boolean} needsResync
+ *   True indicates that the stream needs to be resynced in sequence mode,
+ *   regardless of discontinuity sequence.
  * @property {boolean} recovering
  *   True indicates that the last segment was not appended because it could not
  *   fit in the buffer.

package/lib/player.js

@@ -1427,6 +1427,12 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     has.startTime = null;
     has.uri = null;
 
+    // Release the region timeline, which is created when parsing the manifest.
+    if (this.regionTimeline_) {
+      this.regionTimeline_.release();
+      this.regionTimeline_ = null;
+    }
+
     // In most cases we should have a media element. The one exception would
     // be if there was an error and we, by chance, did not have a media element.
     if (has.mediaElement) {
@@ -4140,6 +4146,7 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       return [];
     }
     const chapters = [];
+    const uniqueChapters = new Set();
     for (const chaptersTrack of chaptersTracksWithLanguage) {
       if (chaptersTrack && chaptersTrack.cues) {
         for (const cue of chaptersTrack.cues) {
@@ -4154,7 +4161,10 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
             startTime: cue.startTime,
             endTime: cue.endTime,
           };
-          chapters.push(chapter);
+          if (!uniqueChapters.has(id)) {
+            chapters.push(chapter);
+            uniqueChapters.add(id);
+          }
         }
       }
     }
@@ -6595,7 +6605,7 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @define {string} A version number taken from git at compile time.
  * @export
  */
-shaka.Player.version = 'v4.2.5-uncompiled';
+shaka.Player.version = 'v4.2.7-uncompiled';
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/text/ui_text_displayer.js

@@ -371,6 +371,25 @@ shaka.text.UITextDisplayer = class {
     }
   }
 
+  /**
+   * Compute a unique internal id:
+   * Regions can reuse the id but have different dimensions, we need to
+   * consider those differences
+   * @param {shaka.extern.CueRegion} region
+   * @private
+   */
+  generateRegionId_(region) {
+    const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
+    const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
+    const viewportAnchorUnit =
+        region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
+    const uniqueRegionId = `${region.id}_${
+      region.width}x${region.height}${heightUnit}-${
+      region.viewportAnchorX}x${region.viewportAnchorY}${viewportAnchorUnit}`;
+
+    return uniqueRegionId;
+  }
+
   /**
    * Get or create a region element corresponding to the cue region.  These are
    * cached by ID.
@@ -382,8 +401,9 @@ shaka.text.UITextDisplayer = class {
   getRegionElement_(cue) {
     const region = cue.region;
 
-    if (this.regionElements_.has(region.id)) {
-      return this.regionElements_.get(region.id);
+    const regionId = this.generateRegionId_(region);
+    if (this.regionElements_.has(regionId)) {
+      return this.regionElements_.get(regionId);
     }
 
     const regionElement = shaka.util.Dom.createHTMLElement('span');
@@ -394,7 +414,7 @@ shaka.text.UITextDisplayer = class {
     const viewportAnchorUnit =
         region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
 
-    regionElement.id = 'shaka-text-region---' + region.id;
+    regionElement.id = 'shaka-text-region---' + regionId;
     regionElement.classList.add('shaka-text-region');
 
     regionElement.style.height = region.height + heightUnit;
@@ -415,7 +435,7 @@ shaka.text.UITextDisplayer = class {
       regionElement.style.justifyContent = 'flex-end';
     }
 
-    this.regionElements_.set(region.id, regionElement);
+    this.regionElements_.set(regionId, regionElement);
     return regionElement;
   }
 

package/lib/text/web_vtt_generator.js

@@ -81,16 +81,28 @@ shaka.text.WebVttGenerator = class {
     // We don't want to modify the array or objects passed in, since we don't
     // technically own them.  So we build a new array and replace certain items
     // in it if they need to be flattened.
-    const flattenedCues = cues.map((cue) => {
-      if (cue.nestedCues.length) {
-        const flatCue = cue.clone();
-        flatCue.nestedCues = [];
-        flatCue.payload = flattenPayload(cue);
-        return flatCue;
-      } else {
-        return cue;
+    // We also don't want to flatten the text payloads starting at a container
+    // element; otherwise, for containers encapsulating multiple caption lines,
+    // the lines would merge into a single cue. This is undesirable when a
+    // subset of the captions are outside of the append time window. To fix
+    // this, we only call flattenPayload() starting at elements marked as
+    // isContainer = false.
+    const getCuesToFlatten = (cues, result) => {
+      for (const cue of cues) {
+        if (cue.isContainer) {
+          // Recurse to find the actual text payload cues.
+          getCuesToFlatten(cue.nestedCues, result);
+        } else {
+          // Flatten the payload.
+          const flatCue = cue.clone();
+          flatCue.nestedCues = [];
+          flatCue.payload = flattenPayload(cue);
+          result.push(flatCue);
+        }
       }
-    });
+      return result;
+    };
+    const flattenedCues = getCuesToFlatten(cues, []);
 
     let webvttString = 'WEBVTT\n\n';
     for (const cue of flattenedCues) {

package/lib/util/dom_utils.js

@@ -36,7 +36,9 @@ shaka.util.Dom = class {
    * @return {!HTMLButtonElement}
    */
   static createButton() {
-    return /** @type {!HTMLButtonElement} */(document.createElement('button'));
+    const button = document.createElement('button');
+    button.setAttribute('type', 'button');
+    return /** @type {!HTMLButtonElement} */ (button);
   }
 
 

package/lib/util/stream_utils.js

@@ -457,12 +457,16 @@ shaka.util.StreamUtils = class {
           if (!MediaSource.isTypeSupported(audioFullType)) {
             return false;
           }
+          // Update the codec string with the (possibly) converted codecs.
+          videoCodecs = [videoCodecs, audioCodecs].join(',');
         }
         const fullType = shaka.util.MimeUtils.getFullOrConvertedType(
             video.mimeType, videoCodecs, ContentType.VIDEO);
         if (!MediaSource.isTypeSupported(fullType)) {
           return false;
         }
+        // Update the codec string with the (possibly) converted codecs.
+        video.codecs = videoCodecs;
       }
       const audio = variant.audio;
       if (audio) {
@@ -473,6 +477,8 @@ shaka.util.StreamUtils = class {
         if (!MediaSource.isTypeSupported(fullType)) {
           return false;
         }
+        // Update the codec string with the (possibly) converted codecs.
+        audio.codecs = codecs;
       }
 
       // See: https://github.com/shaka-project/shaka-player/issues/3380