rx-player 4.0.0-dev.2023110700 → 4.0.0-dev.2023111400

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rx-player",
   "author": "Canal+",
-  "version": "4.0.0-dev.2023110700",
+  "version": "4.0.0-dev.2023111400",
   "description": "Canal+ HTML5 Video Player",
   "main": "./dist/commonjs/index.js",
   "module": "./dist/es2017/index.js",
@@ -167,9 +167,6 @@
     "type": "git",
     "url": "git://github.com/canalplus/rx-player.git"
   },
-  "dependencies": {
-    "next-tick": "1.1.0"
-  },
   "devDependencies": {
     "@babel/core": "7.23.0",
     "@babel/plugin-transform-runtime": "7.22.15",

package/sonar-project.properties

@@ -1,7 +1,7 @@
 sonar.projectKey=rx-player
 sonar.organization=rx-player
 sonar.projectName=rx-player
-sonar.projectVersion=4.0.0-dev.2023110700
+sonar.projectVersion=4.0.0-dev.2023111400
 sonar.sources=./src,./demo,./tests
 sonar.exclusions=demo/full/bundle.js,demo/standalone/lib.js,demo/bundle.js
 sonar.host.url=https://sonarcloud.io

package/src/compat/patch_webkit_source_buffer.ts

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import nextTick from "next-tick";
 import EventEmitter from "../utils/event_emitter";
+import queueMicrotask from "../utils/queue_microtask";
 import globalScope from "./global_scope";
 import isNode from "./is_node";
 
@@ -57,7 +57,7 @@ export default function patchWebkitSourceBuffer() : void {
 
     sourceBufferWebkitProto._emitUpdate =
       function(eventName : string, val : unknown) {
-        nextTick(() => {
+        queueMicrotask(() => {
           /* eslint-disable no-invalid-this */
           this.trigger(eventName, val);
           this.updating = false;

package/src/core/api/option_utils.ts

@@ -226,6 +226,8 @@ function parseConstructorOptions(
  */
 function checkReloadOptions(options?: {
   reloadAt?: { position?: number; relative?: number };
+  keySystems?: IKeySystemOption[];
+  autoPlay?: boolean;
 }): void {
   if (options === null ||
       (typeof options !== "object" && options !== undefined)) {
@@ -243,6 +245,12 @@ function checkReloadOptions(options?: {
       options?.reloadAt?.relative !== undefined) {
     throw new Error("API: reload - Invalid 'reloadAt.relative' option format.");
   }
+  if (!Array.isArray(options?.keySystems) && options?.keySystems !== undefined) {
+    throw new Error("API: reload - Invalid 'keySystems' option format.");
+  }
+  if (options?.autoPlay !== undefined && typeof options.autoPlay !== "boolean") {
+    throw new Error("API: reload - Invalid 'autoPlay' option format.");
+  }
 }
 
 /**

package/src/core/api/public_api.ts

@@ -56,6 +56,7 @@ import {
   IBrokenRepresentationsLockContext,
   IConstructorOptions,
   IKeySystemConfigurationOutput,
+  IKeySystemOption,
   ILoadVideoOptions,
   ILockedAudioRepresentationsSettings,
   ILockedVideoRepresentationsSettings,
@@ -345,7 +346,7 @@ class Player extends EventEmitter<IPublicAPIEvent> {
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1194624
     videoElement.preload = "auto";
 
-    this.version = /* PLAYER_VERSION */"4.0.0-dev.2023110700";
+    this.version = /* PLAYER_VERSION */"4.0.0-dev.2023111400";
     this.log = log;
     this.state = "STOPPED";
     this.videoElement = videoElement;
@@ -471,6 +472,7 @@ class Player extends EventEmitter<IPublicAPIEvent> {
    */
   reload(reloadOpts?: {
     reloadAt?: { position?: number; relative?: number };
+    keySystems?: IKeySystemOption[];
     autoPlay?: boolean;
   }): void {
     const { options,
@@ -503,6 +505,13 @@ class Player extends EventEmitter<IPublicAPIEvent> {
       autoPlay = !reloadInPause;
     }
 
+    let keySystems : IKeySystemOption[] | undefined;
+    if (reloadOpts?.keySystems !== undefined) {
+      keySystems = reloadOpts.keySystems;
+    } else if (this._priv_reloadingMetadata.options?.keySystems !== undefined) {
+      keySystems = this._priv_reloadingMetadata.options.keySystems;
+    }
+
     const newOptions = { ...options,
                          initialManifest: manifest };
     if (startAt !== undefined) {
@@ -511,6 +520,9 @@ class Player extends EventEmitter<IPublicAPIEvent> {
     if (autoPlay !== undefined) {
       newOptions.autoPlay = autoPlay;
     }
+    if (keySystems !== undefined) {
+      newOptions.keySystems = keySystems;
+    }
     this._priv_initializeContentPlayback(newOptions);
   }
 
@@ -520,7 +532,7 @@ class Player extends EventEmitter<IPublicAPIEvent> {
     if (features.createDebugElement === null) {
       throw new Error("Feature `DEBUG_ELEMENT` not added to the RxPlayer");
     }
-    const canceller = new TaskCanceller() ;
+    const canceller = new TaskCanceller();
     features.createDebugElement(element, this, canceller.signal);
     return {
       dispose() {
@@ -2772,7 +2784,7 @@ class Player extends EventEmitter<IPublicAPIEvent> {
     }
   }
 }
-Player.version = /* PLAYER_VERSION */"4.0.0-dev.2023110700";
+Player.version = /* PLAYER_VERSION */"4.0.0-dev.2023111400";
 
 /** Every events sent by the RxPlayer's public API. */
 interface IPublicAPIEvent {

package/src/core/segment_buffers/implementations/text/html/__tests__/utils.test.ts

@@ -261,6 +261,21 @@ describe("HTML Text buffer utils - areNearlyEqual", () => {
   it("should return true if input number are equals", () => {
     expect(areNearlyEqual(5, 5)).toBe(true);
   });
+  it(
+    "should return false if input number are not nearly equals with delta parameter",
+    () => {
+      expect(areNearlyEqual(5, 5.1, 0.02)).toBe(false);
+    });
+  it(
+    "should return true if input number are nearly equals with delta parameter",
+    () => {
+      expect(areNearlyEqual(5, 5.01, 0.02)).toBe(true);
+    });
+  it(
+    "should return true if input number are equals with delta parameter",
+    () => {
+      expect(areNearlyEqual(5, 5, 0.02)).toBe(true);
+    });
 });
 
 describe("HTML Text buffer utils - removeCuesInfosBetween", () => {

package/src/core/segment_buffers/implementations/text/html/text_track_cues_store.ts

@@ -26,6 +26,23 @@ import {
   removeCuesInfosBetween,
 } from "./utils";
 
+/**
+ * first or last IHTMLCue in a group can have a slighlty different start
+ * or end time than the start or end time of the ICuesGroup due to parsing
+ * approximation.
+ * DELTA_CUES_GROUP defines the tolerance level when comparing the start/end
+ * of a IHTMLCue to the start/end of a ICuesGroup.
+ * Having this value too high may lead to have unwanted subtitle displayed
+ * Having this value too low may lead to have subtitles not displayed
+ */
+const DELTA_CUES_GROUP = 1e-3;
+
+/**
+ * segment_duration / RELATIVE_DELTA_RATIO = relative_delta
+ *
+ * relative_delta is the tolerance to determine if two segements are the same
+ */
+const RELATIVE_DELTA_RATIO = 5;
 /**
  * Manage the buffer of the HTMLTextSegmentBuffer.
  * Allows to add, remove and recuperate cues at given times.
@@ -72,6 +89,19 @@ export default class TextTrackCuesStore {
             ret.push(cues[j].element);
           }
         }
+        // first or last IHTMLCue in a group can have a slighlty different start
+        // or end time than the start or end time of the ICuesGroup due to parsing
+        // approximation.
+        // Add a tolerance of 1ms to fix this issue
+        if (ret.length === 0 && cues.length > 0) {
+          for (let j = 0; j < cues.length; j++) {
+            if (areNearlyEqual(time, cues[j].start, DELTA_CUES_GROUP)
+            || areNearlyEqual(time, cues[j].end, DELTA_CUES_GROUP)
+            ) {
+              ret.push(cues[j].element);
+            }
+          }
+        }
         return ret;
       }
     }
@@ -163,6 +193,11 @@ export default class TextTrackCuesStore {
   insert(cues : IHTMLCue[], start : number, end : number) : void {
     const cuesBuffer = this._cuesBuffer;
     const cuesInfosToInsert = { start, end, cues };
+    // it's preferable to have a delta depending on the duration of the segment
+    // if the delta is one fifth of the length of the segment:
+    // a segment of [0, 2] is the "same" segment as [0, 2.1]
+    // but [0, 0.04] is not the "same" segement as [0,04, 0.08]
+    const relativeDelta = Math.abs(start - end) / RELATIVE_DELTA_RATIO;
 
     /**
      * Called when we found the index of the next cue relative to the cue we
@@ -175,7 +210,7 @@ export default class TextTrackCuesStore {
     function onIndexOfNextCueFound(indexOfNextCue : number) : void {
       const nextCue = cuesBuffer[indexOfNextCue];
       if (nextCue === undefined || // no cue
-          areNearlyEqual(cuesInfosToInsert.end, nextCue.end)) // samey end
+          areNearlyEqual(cuesInfosToInsert.end, nextCue.end, relativeDelta)) // samey end
       {
         //   ours:            |AAAAA|
         //   the current one: |BBBBB|
@@ -210,8 +245,8 @@ export default class TextTrackCuesStore {
     for (let cueIdx = 0; cueIdx < cuesBuffer.length; cueIdx++) {
       let cuesInfos = cuesBuffer[cueIdx];
       if (start < cuesInfos.end) {
-        if (areNearlyEqual(start, cuesInfos.start)) {
-          if (areNearlyEqual(end, cuesInfos.end)) {
+        if (areNearlyEqual(start, cuesInfos.start, relativeDelta)) {
+          if (areNearlyEqual(end, cuesInfos.end, relativeDelta)) {
             // exact same segment
             //   ours:            |AAAAA|
             //   the current one: |BBBBB|
@@ -257,7 +292,7 @@ export default class TextTrackCuesStore {
             //   - add ours before the current one
             cuesBuffer.splice(cueIdx, 0, cuesInfosToInsert);
             return;
-          } else if (areNearlyEqual(end, cuesInfos.start)) {
+          } else if (areNearlyEqual(end, cuesInfos.start, relativeDelta)) {
             // our cue goes just before the current one:
             //   ours:            |AAAAAAA|
             //   the current one:         |BBBB|
@@ -268,7 +303,7 @@ export default class TextTrackCuesStore {
             cuesInfos.start = end;
             cuesBuffer.splice(cueIdx, 0, cuesInfosToInsert);
             return;
-          } else if (areNearlyEqual(end, cuesInfos.end)) {
+          } else if (areNearlyEqual(end, cuesInfos.end, relativeDelta)) {
             //   ours:            |AAAAAAA|
             //   the current one:    |BBBB|
             //   Result:          |AAAAAAA|
@@ -297,7 +332,7 @@ export default class TextTrackCuesStore {
         }
         // else -> start > cuesInfos.start
 
-        if (areNearlyEqual(cuesInfos.end, end)) {
+        if (areNearlyEqual(cuesInfos.end, end, relativeDelta)) {
           //   ours:              |AAAAAA|
           //   the current one: |BBBBBBBB|
           //   Result:          |BBAAAAAA|
@@ -333,6 +368,22 @@ export default class TextTrackCuesStore {
         }
       }
     }
+
+    if (cuesBuffer.length) {
+      const lastCue = cuesBuffer[cuesBuffer.length - 1];
+      if (areNearlyEqual(lastCue.end, start, relativeDelta)) {
+        // Match the end of the previous cue to the start of the following one
+        // if they are close enough. If there is a small gap between two segments
+        // it can lead to having no subtitles for a short time, this is noticeable when
+        // two successive segments displays the same text, making it diseappear
+        // and reappear quickly, which gives the impression of blinking
+        //
+        //   ours:                   |AAAAA|
+        //   the current one: |BBBBB|...
+        //   Result:          |BBBBBBBAAAAA|
+        lastCue.end  = start;
+      }
+    }
     // no cues group has the end after our current start.
     // These cues should be the last one
     cuesBuffer.push(cuesInfosToInsert);

package/src/core/segment_buffers/implementations/text/html/utils.ts

@@ -50,6 +50,21 @@ import {
  * Setting a value too high might lead to two segments targeting different times
  * to be wrongly believed to target the same time. In worst case scenarios, this
  * could lead to wanted text tracks being removed.
+ *
+ * When comparing 2 segments s1 and s2, you may want to take into account the duration
+ * of the segments:
+ *   - if s1 is [0, 2] and s2 is [0, 2.1] s1 and s2 can be considered as nearly equal as
+ *     there is a relative difference of: (2.1-2) / 2 = 5%;
+ *     Formula: (end_s1 - end_s2) / duration_s2 = relative_difference
+ *   - if s1 is [0, 0.04] and s2 is [0.04, 0.08] s1 and s2 may not considered as nearly
+ *     equal as there is a relative difference of: (0.04-0.08) / 0.04 = 100%
+ *
+ * To compare relatively to the duration of a segment you can provide and additional
+ * parameter "delta" that remplace MAX_DELTA_BUFFER_TIME.
+ * If parameter "delta" is higher than MAX_DELTA_BUFFER_TIME, MAX_DELTA_BUFFER_TIME
+ * is used instead of delta. This ensure that segments are nearly equal when comparing
+ * relatively AND absolutely.
+ *
  * @type Number
  */
 const MAX_DELTA_BUFFER_TIME = 0.2;
@@ -58,10 +73,12 @@ const MAX_DELTA_BUFFER_TIME = 0.2;
  * @see MAX_DELTA_BUFFER_TIME
  * @param {Number} a
  * @param {Number} b
+ * @param {Number} delta
  * @returns {Boolean}
  */
-export function areNearlyEqual(a : number, b : number) : boolean {
-  return Math.abs(a - b) <= MAX_DELTA_BUFFER_TIME;
+export function areNearlyEqual(
+  a : number, b : number, delta: number = MAX_DELTA_BUFFER_TIME) : boolean {
+  return Math.abs(a - b) <= Math.min(delta, MAX_DELTA_BUFFER_TIME);
 }
 
 /**

package/src/core/stream/adaptation/adaptation_stream.ts

@@ -1,4 +1,3 @@
-import nextTick from "next-tick";
 import config from "../../../config";
 import { formatError } from "../../../errors";
 import log from "../../../log";
@@ -7,6 +6,7 @@ import assertUnreachable from "../../../utils/assert_unreachable";
 import cancellableSleep from "../../../utils/cancellable_sleep";
 import noop from "../../../utils/noop";
 import objectAssign from "../../../utils/object_assign";
+import queueMicrotask from "../../../utils/queue_microtask";
 import SharedReference, {
   createMappedReference,
   IReadOnlySharedReference,
@@ -192,7 +192,7 @@ export default function AdaptationStream(
         // conditions where the inner logic would be called synchronously before
         // the next observation (which may reflect very different playback conditions)
         // is actually received.
-        return nextTick(() => {
+        return queueMicrotask(() => {
           playbackObserver.listen(() => {
             if (fnCancelSignal.isCancelled()) {
               return;

package/src/core/stream/orchestrator/stream_orchestrator.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import nextTick from "next-tick";
 import config from "../../../config";
 import { MediaError } from "../../../errors";
 import log from "../../../log";
@@ -22,6 +21,7 @@ import Manifest, {
   IDecipherabilityUpdateElement,
   Period,
 } from "../../../manifest";
+import queueMicrotask from "../../../utils/queue_microtask";
 import {
   createMappedReference,
   IReadOnlySharedReference,
@@ -351,7 +351,7 @@ export default function StreamOrchestrator(
       // Schedule micro task before checking the last playback observation
       // to reduce the risk of race conditions where the next observation
       // was going to be emitted synchronously.
-      nextTick(() => {
+      queueMicrotask(() => {
         if (orchestratorCancelSignal.isCancelled()) {
           return ;
         }
@@ -554,7 +554,7 @@ export default function StreamOrchestrator(
               // conditions where the inner logic would be called synchronously before
               // the next observation (which may reflect very different playback
               // conditions) is actually received.
-              return nextTick(() => {
+              return queueMicrotask(() => {
                 if (innerCancelSignal.isCancelled()) {
                   return;
                 }

package/src/core/stream/period/period_stream.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import nextTick from "next-tick";
 import config from "../../../config";
 import {
   formatError,
@@ -26,6 +25,7 @@ import {
   Period,
 } from "../../../manifest";
 import objectAssign from "../../../utils/object_assign";
+import queueMicrotask from "../../../utils/queue_microtask";
 import { getLeftSizeOfBufferedTimeRange } from "../../../utils/ranges";
 import SharedReference, {
   IReadOnlySharedReference,
@@ -362,7 +362,7 @@ export default function PeriodStream(
     // is actually received.
     // It can happen when `askForMediaSourceReload` is called as a side-effect of
     // the same event that triggers the playback observation to be emitted.
-    nextTick(() => {
+    queueMicrotask(() => {
       playbackObserver.listen(() => {
         if (cancelSignal.isCancelled()) {
           return;

package/src/manifest/representation.ts

@@ -188,15 +188,28 @@ class Representation {
     }
 
     this.cdnMetadata = args.cdnMetadata;
-
     this.index = args.index;
+
     if (opts.type === "audio" || opts.type === "video") {
-      const mimeTypeStr = this.getMimeTypeString();
-      const isSupported = isCodecSupported(mimeTypeStr);
-      if (!isSupported) {
-        log.info("Unsupported Representation", mimeTypeStr, this.id, this.bitrate);
+      this.isSupported = false;
+        // Supplemental codecs are defined as backwards-compatible codecs enhancing
+        // the experience of a base layer codec
+      if (args.supplementalCodecs !== undefined) {
+        const supplementalCodecMimeTypeStr =
+            `${this.mimeType ?? ""};codecs="${args.supplementalCodecs}"`;
+        if (isCodecSupported(supplementalCodecMimeTypeStr)) {
+          this.codec = args.supplementalCodecs;
+          this.isSupported = true;
+        }
+      }
+      if (!this.isSupported) {
+        const mimeTypeStr = this.getMimeTypeString();
+        const isSupported = isCodecSupported(mimeTypeStr);
+        if (!isSupported) {
+          log.info("Unsupported Representation", mimeTypeStr, this.id, this.bitrate);
+        }
+        this.isSupported = isSupported;
       }
-      this.isSupported = isSupported;
     } else {
       this.isSupported = true; // TODO for other types
     }

package/src/parsers/manifest/dash/common/__tests__/convert_supplemental_codecs.test.ts

@@ -0,0 +1,37 @@
+import { convertSupplementalCodecsToRFC6381 } from "../convert_supplemental_codecs";
+
+describe("parseSupplementalCodec", () => {
+  it("should return the codec unchanged if there is only one codec", () => {
+    expect(convertSupplementalCodecsToRFC6381("avc1.4d400d"))
+      .toEqual("avc1.4d400d");
+  });
+  it("should trim starting and ending whitespace", () => {
+    expect(
+      convertSupplementalCodecsToRFC6381("  avc1.4d400d  "))
+      .toEqual("avc1.4d400d");
+  });
+  it("should return comma-separated list if input is whitespace-separated", () => {
+    expect(
+      convertSupplementalCodecsToRFC6381("avc1.4d400d avc1.4d4015"))
+      .toEqual("avc1.4d400d, avc1.4d4015");
+  });
+  it("should return comma-separated value if input is already comma-separated", () => {
+    expect(
+      convertSupplementalCodecsToRFC6381("avc1.4d400d, avc1.4d4015"))
+      .toEqual("avc1.4d400d, avc1.4d4015");
+  });
+
+  it("should return comma-separated value if input as missplaced whitespace", () => {
+    expect(
+      convertSupplementalCodecsToRFC6381("avc1.4d400d  ,  avc1.4d4015 "))
+      .toEqual("avc1.4d400d, avc1.4d4015");
+  });
+
+  it(`should return comma-separated value if input is mix of comma and 
+    whitespace separated list`
+  , () => {
+    expect(
+      convertSupplementalCodecsToRFC6381("avc1.4d400d avc1.4d4015, avc1.4d401f"))
+      .toEqual("avc1.4d400d, avc1.4d4015, avc1.4d401f");
+  });
+});

package/src/parsers/manifest/dash/common/__tests__/flatten_overlapping_period.test.ts

@@ -139,4 +139,24 @@ describe("flattenOverlappingPeriods", function() {
     expect(mockLog).toHaveBeenCalledTimes(99);
     mockLog.mockRestore();
   });
+
+  //      [ Period 1 ][ Period 2 ]       ------>  [  Period 3  ]
+  //  [            Period 3           ]
+  it("should handle when a Period overlaps all previous periods", () => {
+    const mockLog = jest.spyOn(log, "warn").mockImplementation(jest.fn());
+
+    const periods = [
+      { id: "1", start: 40, duration: 20, adaptations: {} },
+      { id: "2", start: 60, duration: 20, adaptations: {} },
+      { id: "3", start: 20, duration: 100, adaptations: {} },
+    ];
+
+    const flattenPeriods = flattenOverlappingPeriods(periods);
+    expect(flattenPeriods.length).toBe(1);
+    expect(flattenPeriods[0].start).toBe(20);
+    expect(flattenPeriods[0].duration).toBe(100);
+    expect(flattenPeriods[0].id).toBe("3");
+    expect(mockLog).toHaveBeenCalledTimes(2);
+    mockLog.mockRestore();
+  });
 });

package/src/parsers/manifest/dash/common/convert_supplemental_codecs.ts

@@ -0,0 +1,32 @@
+import isNonEmptyString from "../../../../utils/is_non_empty_string";
+
+const supplementalCodecSeparator = /[, ]+/g;
+/**
+ * Converts SCTE 214 supplemental codec string into RFC4281 codec string
+ *
+ * The returned value is a codec string respecting RFC6381
+ *
+ * SCTE 214 defines supplemental codecs as a whitespace-separated multiple list of
+ * codec strings
+ *
+ * RFC6381 defines codecs as a comma-separated list of codec strings.
+ *
+ * This two syntax differs and this parser is used to convert SCTE214
+ * to be compliant with what MSE APIs expect
+ *
+ * @param {string} val - The codec string to parse
+ * @returns { Array.<string | undefined | null>}
+ */
+export function convertSupplementalCodecsToRFC6381(
+  val: string
+) : string {
+
+  if (isNonEmptyString(val)) {
+    return val
+      .trim()
+      .replace(supplementalCodecSeparator, ", ");
+  }
+  return "";
+}
+
+

package/src/parsers/manifest/dash/common/flatten_overlapping_periods.ts

@@ -73,6 +73,11 @@ export default function flattenOverlappingPeriods(
         // `lastFlattenedPeriod` has now a negative or `0` duration.
         // Remove it, consider the next Period in its place, and re-start the loop.
         flattenedPeriods.pop();
+        if (flattenedPeriods.length === 0) {
+          // There's no remaining Period to compare to `parsedPeriod`
+          break;
+        }
+        // Take the previous Period as reference and compare it now to `parsedPeriod`
         lastFlattenedPeriod = flattenedPeriods[flattenedPeriods.length - 1];
       }
     }

package/src/parsers/manifest/dash/common/parse_representations.ts

@@ -29,6 +29,7 @@ import {
   IScheme,
   IContentProtectionIntermediateRepresentation,
 } from "../node_parser_types";
+import { convertSupplementalCodecsToRFC6381 } from "./convert_supplemental_codecs";
 import { getWEBMHDRInformation } from "./get_hdr_information";
 import parseRepresentationIndex, {
   IRepresentationIndexContext,
@@ -120,19 +121,19 @@ export default function parseRepresentations(
   const parsedRepresentations : IParsedRepresentation[] = [];
   for (const representation of representationsIR) {
     // Compute Representation ID
-    let representationID = representation.attributes.id != null ?
+    let representationID = representation.attributes.id !== undefined ?
       representation.attributes.id :
       (String(representation.attributes.bitrate) +
-         (representation.attributes.height != null ?
+         (representation.attributes.height !== undefined ?
             (`-${representation.attributes.height}`) :
             "") +
-         (representation.attributes.width != null ?
+         (representation.attributes.width !== undefined ?
             (`-${representation.attributes.width}`) :
             "") +
-         (representation.attributes.mimeType != null ?
+         (representation.attributes.mimeType !== undefined ?
             (`-${representation.attributes.mimeType}`) :
             "") +
-         (representation.attributes.codecs != null ?
+         (representation.attributes.codecs !== undefined ?
             (`-${representation.attributes.codecs}`) :
             ""));
 
@@ -167,7 +168,7 @@ export default function parseRepresentations(
 
     // Find bitrate
     let representationBitrate : number;
-    if (representation.attributes.bitrate == null) {
+    if (representation.attributes.bitrate === undefined) {
       log.warn("DASH: No usable bitrate found in the Representation.");
       representationBitrate = 0;
     } else {
@@ -204,40 +205,52 @@ export default function parseRepresentations(
 
     // Add optional attributes
     let codecs : string|undefined;
-    if (representation.attributes.codecs != null) {
+    if (representation.attributes.codecs !== undefined) {
       codecs = representation.attributes.codecs;
-    } else if (adaptation.attributes.codecs != null) {
+    } else if (adaptation.attributes.codecs !== undefined) {
       codecs = adaptation.attributes.codecs;
     }
-    if (codecs != null) {
+    if (codecs !== undefined) {
       codecs = codecs === "mp4a.40.02" ? "mp4a.40.2" : codecs;
       parsedRepresentation.codecs = codecs;
     }
-    if (representation.attributes.frameRate != null) {
+
+    let supplementalCodecs: string | undefined;
+    if (representation.attributes.supplementalCodecs !== undefined) {
+      supplementalCodecs = representation.attributes.supplementalCodecs;
+    } else if (adaptation.attributes.supplementalCodecs !== undefined) {
+      supplementalCodecs = adaptation.attributes.supplementalCodecs;
+    }
+    if (supplementalCodecs !== undefined) {
+      parsedRepresentation.supplementalCodecs =
+        convertSupplementalCodecsToRFC6381(supplementalCodecs);
+    }
+
+    if (representation.attributes.frameRate !== undefined) {
       parsedRepresentation.frameRate =
         representation.attributes.frameRate;
-    } else if (adaptation.attributes.frameRate != null) {
+    } else if (adaptation.attributes.frameRate !== undefined) {
       parsedRepresentation.frameRate =
         adaptation.attributes.frameRate;
     }
-    if (representation.attributes.height != null) {
+    if (representation.attributes.height !== undefined) {
       parsedRepresentation.height =
         representation.attributes.height;
-    } else if (adaptation.attributes.height != null) {
+    } else if (adaptation.attributes.height !== undefined) {
       parsedRepresentation.height =
         adaptation.attributes.height;
     }
-    if (representation.attributes.mimeType != null) {
+    if (representation.attributes.mimeType !== undefined) {
       parsedRepresentation.mimeType =
         representation.attributes.mimeType;
-    } else if (adaptation.attributes.mimeType != null) {
+    } else if (adaptation.attributes.mimeType !== undefined) {
       parsedRepresentation.mimeType =
         adaptation.attributes.mimeType;
     }
-    if (representation.attributes.width != null) {
+    if (representation.attributes.width !== undefined) {
       parsedRepresentation.width =
         representation.attributes.width;
-    } else if (adaptation.attributes.width != null) {
+    } else if (adaptation.attributes.width !== undefined) {
       parsedRepresentation.width =
         adaptation.attributes.width;
     }

package/src/parsers/manifest/dash/js-parser/node_parsers/AdaptationSet.ts

@@ -300,6 +300,10 @@ function parseAdaptationSetAttributes(
         parsedAdaptation.codecs = attribute.value;
         break;
 
+      case "scte214:supplementalCodecs":
+        parsedAdaptation.supplementalCodecs = attribute.value;
+        break;
+
       case "codingDependency":
         parseValue(attribute.value, { asKey: "codingDependency",
                                       parser: parseBoolean,