feat:: Enable multiple renditions in dash video element (#148)

• Use the Dash.js API (getRepresentationsByType('video')) to fetch available video renditions.
• Adds to a videoTrack the renditions to be available for Media Chrome Rendition Menu.
• Adds logic to respond to selection changes in , toggling between manual rendition selection and automatic adaptive bitrate (ABR).

Author: ronald-urbina

packages/dash-video-element/dash-video-element.js

@@ -1,6 +1,7 @@
 import { CustomVideoElement } from 'custom-media-element';
+import { MediaTracksMixin } from 'media-tracks';
 
-class DashVideoElement extends CustomVideoElement {
+class DashVideoElement extends MediaTracksMixin(CustomVideoElement) {
   static shadowRootOptions = { ...CustomVideoElement.shadowRootOptions };
 
   static getTemplateHTML = (attrs) => {
@@ -21,19 +22,46 @@ class DashVideoElement extends CustomVideoElement {
   }
 
   async load() {
+    if (this.#apiInit) {
+      this.api.attachSource(this.src);
+      return;
+    }
 
-    if (!this.#apiInit) {
-      this.#apiInit = true;
+    this.#apiInit = true;
 
-      const Dash = await import('dashjs');
+    const Dash = await import('dashjs');
+    this.api = Dash.MediaPlayer().create();
+    this.api.initialize(this.nativeEl, this.src, this.autoplay);
 
-      this.api = Dash.MediaPlayer().create();
-      this.api.initialize(this.nativeEl, this.src, this.autoplay);
+    this.api.on(Dash.MediaPlayer.events.STREAM_INITIALIZED, () => {
+      const bitrateList = this.api.getRepresentationsByType('video');
 
-    } else {
+      let videoTrack = this.videoTracks.getTrackById('main');
+      if (!videoTrack) {
+        videoTrack = this.addVideoTrack('main');
+        videoTrack.id = 'main';
+        videoTrack.selected = true;
+      }
 
-      this.api.attachSource(this.src);
-    }
+      bitrateList.forEach((rep) => {
+        const bitrate =
+          rep.bandwidth ?? rep.bitrate ?? (Number.isFinite(rep.bitrateInKbit) ? rep.bitrateInKbit * 1000 : undefined);
+
+        const rendition = videoTrack.addRendition(rep.id, rep.width, rep.height, rep.mimeType ?? rep.codec, bitrate);
+        rendition.id = rep.id;
+      });
+
+      this.videoRenditions.addEventListener('change', () => {
+        const selected = this.videoRenditions[this.videoRenditions.selectedIndex];
+
+        if (selected?.id) {
+          this.api.updateSettings({ streaming: { abr: { autoSwitchBitrate: { video: false } } } });
+          this.api.setRepresentationForTypeById('video', selected.id, true);
+        } else {
+          this.api.updateSettings({ streaming: { abr: { autoSwitchBitrate: { video: true } } } });
+        }
+      });
+    });
   }
 }
 

packages/dash-video-element/index.html

@@ -20,12 +20,14 @@
   {
     "imports": {
       "custom-media-element": "https://cdn.jsdelivr.net/npm/custom-media-element@1.2/+esm",
+      "media-tracks": "https://cdn.jsdelivr.net/npm/media-tracks@0.3/+esm",
       "dashjs": "https://cdn.jsdelivr.net/npm/dashjs@5.0/dist/modern/esm/dash.all.min.js"
     }
   }
 </script>
 <script type="module" src="./dash-video-element.js"></script>
 <script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome/menu/+esm"></script>
 
 <h1>&lt;dash-video&gt;</h1>
 <br>
@@ -117,6 +119,9 @@ <h2>With <a href="https://github.com/muxinc/media-chrome" target="_blank">Media
   >
     <track label="thumbnails" default kind="thumbnails" src="https://image.mux.com/r4rOE02cc95tbe3I00302nlrHfT023Q3IedFJW029w018KxZA/storyboard.vtt"></track>
   </dash-video>
+  <media-rendition-menu anchor="auto" hidden>
+    <div slot="header">Quality</div>
+  </media-rendition-menu>
   <media-loading-indicator slot="centered-chrome" no-auto-hide></media-loading-indicator>
   <media-control-bar>
     <media-play-button></media-play-button>
@@ -126,6 +131,7 @@ <h2>With <a href="https://github.com/muxinc/media-chrome" target="_blank">Media
     <media-volume-range></media-volume-range>
     <media-time-range></media-time-range>
     <media-time-display show-duration remaining></media-time-display>
+    <media-rendition-menu-button></media-rendition-menu-button>
     <media-playback-rate-button></media-playback-rate-button>
     <media-pip-button></media-pip-button>
     <media-fullscreen-button></media-fullscreen-button>

packages/dash-video-element/package.json

@@ -53,7 +53,8 @@
   },
   "dependencies": {
     "custom-media-element": "^1.4.5",
-    "dashjs": "^5.0.3"
+    "dashjs": "^5.0.3",
+    "media-tracks": "^0.3.3"
   },
   "devDependencies": {
     "build-react-wrapper": "^0.2.2",