shaka-player 4.2.6 → 4.2.8

package/lib/dash/segment_template.js

@@ -102,11 +102,23 @@ shaka.dash.SegmentTemplate = class {
       const periodEnd = context.periodInfo.duration ?
           context.periodInfo.start + context.periodInfo.duration : Infinity;
 
-      // Don't fit live content, since it might receive more segments.
-      // Unless that live content is multi-period; it's safe to fit every period
-      // but the last one, since only the last period might receive new
-      // segments.
-      const shouldFit = periodEnd != Infinity;
+      /* When to fit segments.  All refactors should honor/update this table:
+       *
+       * | dynamic | infinite | last   | should | notes                     |
+       * |         | period   | period | fit    |                           |
+       * | ------- | -------- | ------ | ------ | ------------------------- |
+       * |     F   |     F    |    X   |    T   | typical VOD               |
+       * |     F   |     T    |    X   |    X   | impossible: infinite VOD  |
+       * |     T   |     F    |    F   |    T   | typical live, old period  |
+       * |     T   |     F    |    T   |    F   | typical IPR               |
+       * |     T   |     T    |    F   |    X   | impossible: old, infinite |
+       * |     T   |     T    |    T   |    F   | typical live, new period  |
+       */
+
+      // We never fit the final period of dynamic content, which could be
+      // infinite live (with no limit to fit to) or IPR (which would expand the
+      // most recent segment to the end of the presentation).
+      const shouldFit = !(context.dynamic && context.periodInfo.isLastPeriod);
 
       if (segmentIndex) {
         if (shouldFit) {

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);
     }
@@ -2272,16 +2296,19 @@ shaka.hls.HlsParser = class {
       position = mediaSequenceNumber + skippedSegments + i;
 
       const discontinuityTag = shaka.hls.Utils.getFirstTagWithName(
-          playlist.tags, 'EXT-X-DISCONTINUITY');
+          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;
+          }
         }
       }
 
@@ -2402,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;
   }
 
@@ -2896,7 +2933,7 @@ shaka.hls.HlsParser.TEXT_EXTENSIONS_TO_MIME_TYPES_ = {
   'm4f': 'application/mp4',
   'cmft': 'application/mp4',
   'vtt': 'text/vtt',
-  'webvtt': 'txt/vtt',
+  'webvtt': 'text/vtt',
   'ttml': 'application/ttml+xml',
 };
 

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(),
@@ -865,8 +876,27 @@ shaka.media.MediaSourceEngine = class {
    * @return {!Promise}
    */
   async resync(contentType, timestampOffset) {
+    const ContentType = shaka.util.ManifestParserUtils.ContentType;
+
     goog.asserts.assert(this.sequenceMode_,
-        'resyncAudio only used with sequence mode!');
+        '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));

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');
 
 
@@ -356,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

@@ -832,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,
@@ -1155,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 &&
@@ -1660,7 +1666,9 @@ shaka.media.StreamingEngine = class {
       const lastDiscontinuitySequence =
           mediaState.lastSegmentReference ?
               mediaState.lastSegmentReference.discontinuitySequence : null;
-      if (reference.discontinuitySequence != lastDiscontinuitySequence) {
+      if (reference.discontinuitySequence != lastDiscontinuitySequence ||
+          mediaState.needsResync) {
+        mediaState.needsResync = false;
         operations.push(this.playerInterface_.mediaSourceEngine.resync(
             mediaState.type, reference.startTime));
       }
@@ -2151,6 +2159,7 @@ shaka.media.StreamingEngine.PlayerInterface;
  *   clearBufferSafeMargin: number,
  *   clearingBuffer: boolean,
  *   seeked: boolean,
+ *   needsResync: boolean,
  *   adaptation: boolean,
  *   recovering: boolean,
  *   hasError: boolean,
@@ -2196,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) {
@@ -6599,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.6-uncompiled';
+shaka.Player.version = 'v4.2.8-uncompiled';
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/polyfill/media_capabilities.js

@@ -47,6 +47,8 @@ shaka.polyfill.MediaCapabilities = class {
     // should always install polyfill for WebOS browsers.
     // Since MediaCapabilities implementation is buggy in EOS browsers, we
     // should always install polyfill for EOS browsers.
+    // Since MediaCapabilities implementation is buggy in Hisense browsers, we
+    // should always install polyfill for Hisense browsers.
     let canUseNativeMCap = true;
     if (shaka.util.Platform.isApple() ||
         shaka.util.Platform.isPS5() ||
@@ -54,7 +56,8 @@ shaka.polyfill.MediaCapabilities = class {
         shaka.util.Platform.isWebOS() ||
         shaka.util.Platform.isTizen() ||
         shaka.util.Platform.isChromecast() ||
-        shaka.util.Platform.isEOS()) {
+        shaka.util.Platform.isEOS() ||
+        shaka.util.Platform.isHisense()) {
       canUseNativeMCap = false;
     }
     if (canUseNativeMCap && navigator.mediaCapabilities) {

package/lib/text/simple_text_displayer.js

@@ -14,6 +14,7 @@ goog.provide('shaka.text.SimpleTextDisplayer');
 goog.require('goog.asserts');
 goog.require('shaka.log');
 goog.require('shaka.text.Cue');
+goog.require('shaka.text.Utils');
 
 
 /**
@@ -79,70 +80,7 @@ shaka.text.SimpleTextDisplayer = class {
    * @export
    */
   append(cues) {
-    // Flatten nested cue payloads recursively.  If a cue has nested cues,
-    // their contents should be combined and replace the payload of the parent.
-    const flattenPayload = (cue) => {
-      // Handle styles (currently bold/italics/underline).
-      // TODO add support for color rendering.
-      const openStyleTags = [];
-      const bold = cue.fontWeight >= shaka.text.Cue.fontWeight.BOLD;
-      const italics = cue.fontStyle == shaka.text.Cue.fontStyle.ITALIC;
-      const underline = cue.textDecoration.includes(
-          shaka.text.Cue.textDecoration.UNDERLINE);
-      if (bold) {
-        openStyleTags.push('b');
-      }
-      if (italics) {
-        openStyleTags.push('i');
-      }
-      if (underline) {
-        openStyleTags.push('u');
-      }
-
-      // Prefix opens tags, suffix closes tags in reverse order of opening.
-      const prefixStyleTags = openStyleTags.reduce((acc, tag) => {
-        return `${acc}<${tag}>`;
-      }, '');
-      const suffixStyleTags = openStyleTags.reduceRight((acc, tag) => {
-        return `${acc}</${tag}>`;
-      }, '');
-
-      if (cue.lineBreak) {
-        // This is a vertical lineBreak, so insert a newline.
-        return '\n';
-      } else if (cue.nestedCues.length) {
-        return cue.nestedCues.map(flattenPayload).join('');
-      } else {
-        // This is a real cue.
-        return prefixStyleTags + cue.payload + suffixStyleTags;
-      }
-    };
-
-    // 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.
-    // 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, []);
+    const flattenedCues = shaka.text.Utils.getCuesToFlatten(cues, []);
 
     // Convert cues.
     const textTrackCues = [];

package/lib/text/text_utils.js

@@ -0,0 +1,88 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+goog.provide('shaka.text.Utils');
+
+goog.require('shaka.text.Cue');
+
+
+shaka.text.Utils = class {
+  /**
+   * Flatten nested cue payloads recursively.  If a cue has nested cues,
+   * their contents should be combined and replace the payload of the parent.
+   *
+   * @param {!shaka.text.Cue} cue
+   * @return {string}
+   * @private
+   */
+  static flattenPayload_(cue) {
+    // Handle styles (currently bold/italics/underline).
+    // TODO: add support for color rendering.
+    const openStyleTags = [];
+    const bold = cue.fontWeight >= shaka.text.Cue.fontWeight.BOLD;
+    const italics = cue.fontStyle == shaka.text.Cue.fontStyle.ITALIC;
+    const underline = cue.textDecoration.includes(
+        shaka.text.Cue.textDecoration.UNDERLINE);
+    if (bold) {
+      openStyleTags.push('b');
+    }
+    if (italics) {
+      openStyleTags.push('i');
+    }
+    if (underline) {
+      openStyleTags.push('u');
+    }
+
+    // Prefix opens tags, suffix closes tags in reverse order of opening.
+    const prefixStyleTags = openStyleTags.reduce((acc, tag) => {
+      return `${acc}<${tag}>`;
+    }, '');
+    const suffixStyleTags = openStyleTags.reduceRight((acc, tag) => {
+      return `${acc}</${tag}>`;
+    }, '');
+
+    if (cue.lineBreak) {
+      // This is a vertical lineBreak, so insert a newline.
+      return '\n';
+    } else if (cue.nestedCues.length) {
+      return cue.nestedCues.map(shaka.text.Utils.flattenPayload_).join('');
+    } else {
+      // This is a real cue.
+      return prefixStyleTags + cue.payload + suffixStyleTags;
+    }
+  }
+
+  /**
+   * 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.
+   * 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.
+   *
+   * @param {!Array.<!shaka.text.Cue>} cues
+   * @param {!Array.<!shaka.text.Cue>} result
+   * @return {!Array.<!shaka.text.Cue>}
+   */
+  static getCuesToFlatten(cues, result) {
+    for (const cue of cues) {
+      if (cue.isContainer) {
+        // Recurse to find the actual text payload cues.
+        shaka.text.Utils.getCuesToFlatten(cue.nestedCues, result);
+      } else {
+        // Flatten the payload.
+        const flatCue = cue.clone();
+        flatCue.nestedCues = [];
+        flatCue.payload = shaka.text.Utils.flattenPayload_(cue);
+        result.push(flatCue);
+      }
+    }
+    return result;
+  }
+};

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;
   }
 
@@ -597,12 +617,7 @@ shaka.text.UITextDisplayer = class {
     // TODO: Implement lineAlignment of 'CENTER'.
     if (cue.line != null) {
       if (cue.lineInterpretation == Cue.lineInterpretation.PERCENTAGE) {
-        // When setting absolute positioning, you need to set x/y/width/height
-        // so the element is positioned correctly.  Set these as default and
-        // other settings will override them.
         style.position = 'absolute';
-        style.left = '0';
-        style.top = '0';
         if (cue.writingMode == Cue.writingMode.HORIZONTAL_TOP_TO_BOTTOM) {
           style.width = '100%';
           if (cue.lineAlign == Cue.lineAlign.START) {