muxinc · Jerricho93 · Feb 17, 2026 · Feb 16, 2026 · Feb 17, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/shaka-video-element/index.html b/packages/shaka-video-element/index.html
@@ -32,11 +32,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"
+        "media-tracks": "https://cdn.jsdelivr.net/npm/media-tracks@0.3/+esm",
+        "shaka-player": "https://cdn.jsdelivr.net/npm/shaka-player@4.15/+esm"
       }
     }
   </script>
+  <script type="module" src="./shaka-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>
 </head>
 <body>
   <h1>&lt;shaka-video&gt;</h1>
@@ -56,7 +59,7 @@ <h2>On-demand</h2>
 
   <nav>
     <nav>
-      <button id="loadbtn">Load new clip</button>
+  <button id="loadbtn">Load new clip</button>
     </nav>
     <nav>
       <input id="qualityselected" value="N/A" readonly size="5">
@@ -169,6 +172,9 @@ <h2>With <a href="https://github.com/muxinc/media-chrome" target="_blank">Media
     >
       <track default kind="metadata" label="thumbnails" src="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/storyboard.vtt">
     </shaka-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>
@@ -178,6 +184,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>

diff --git a/packages/shaka-video-element/package.json b/packages/shaka-video-element/package.json
@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "custom-media-element": "^1.4.5",
+    "media-tracks": "^0.3.3",
     "shaka-player": "~4.15.4"
   },
   "devDependencies": {

diff --git a/packages/shaka-video-element/shaka-video-element.js b/packages/shaka-video-element/shaka-video-element.js
@@ -1,4 +1,5 @@
 import { CustomVideoElement } from 'custom-media-element';
+import { MediaTracksMixin } from 'media-tracks';
 import './server-safe-globals.js';
 import shaka from 'shaka-player';
 
@@ -12,14 +13,16 @@ function onError(error) {
   console.error('Error code', error.code, 'object', error);
 }
 
-class ShakaVideoElement extends CustomVideoElement {
+class ShakaVideoElement extends MediaTracksMixin(CustomVideoElement) {
   static shadowRootOptions = { ...CustomVideoElement.shadowRootOptions };
 
   static getTemplateHTML = (attrs) => {
     const { src, ...rest } = attrs; // eslint-disable-line no-unused-vars
     return CustomVideoElement.getTemplateHTML(rest);
   };
 
+  #hasTracksInit = false;
+
   constructor() {
     super();
 
@@ -58,6 +61,106 @@ class ShakaVideoElement extends CustomVideoElement {
     }
   }
 
+  #removeAllMediaTracks = () => {
+    for (const videoTrack of this.videoTracks) {
+      this.removeVideoTrack(videoTrack);
+    }
+    for (const audioTrack of this.audioTracks) {
+      this.removeAudioTrack(audioTrack);
+    }
+  };
+
+  #addMediaTracks() {
+    this.#removeAllMediaTracks();
+
+    const variantTracks = this.api.getVariantTracks();
+
+    let videoTrack = this.videoTracks.getTrackById('main');
+    if (!videoTrack) {
+      videoTrack = this.addVideoTrack('main');
+      videoTrack.id = 'main';
+      videoTrack.selected = true;
+    }
+
+    // Deduplicate variants by video properties since Shaka returns one
+    // entry per audio+video combination.
+    const seen = new Set();
+    for (const [index, variant] of variantTracks.entries()) {
+      if (!variant.width && !variant.height) continue;
+      const key = `${variant.width}x${variant.height}@${variant.videoBandwidth ?? variant.bandwidth}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+
+      const rendition = videoTrack.addRendition(
+        variant.originalVideoId ?? `${variant.id}`,
+        variant.width,
+        variant.height,
+        variant.videoCodec,
+        variant.videoBandwidth ?? variant.bandwidth
+      );
+      rendition.id = `${index}`;
+      rendition.label = `${variant.height}p`;
+    }
+
+    // Set up audio tracks.
+    const audioLanguages = this.api.getAudioLanguagesAndRoles();
+    for (let [id, audio] of audioLanguages.entries()) {
+      const kind = id === 0 ? 'main' : 'alternative';
+      const audioTrack = this.addAudioTrack(kind, audio.language, audio.language);
+      audioTrack.id = `${id}`;
+      if (id === 0) {
+        audioTrack.enabled = true;
+      }
+    }
+  }
+
+  #initTracksListeners() {
+    if (this.#hasTracksInit) return;
+    this.#hasTracksInit = true;
+
+    const switchRendition = () => {
+      const selectedIndex = this.videoRenditions.selectedIndex;
+
+      if (selectedIndex >= 0) {
+        const variantTracks = this.api.getVariantTracks();
+        const variantTrack = variantTracks[selectedIndex];
+        if (variantTrack) {
+          this.api.configure({ abr: { enabled: false } });
+          this.api.selectVariantTrack(variantTrack, true);
+        }
+      } else {
+        this.api.configure({ abr: { enabled: true } });
+      }
+    };
+
+    this.videoRenditions?.addEventListener('change', switchRendition);
+
+    this.audioTracks.addEventListener('change', () => {
+      const enabledTrack = [...this.audioTracks].find((t) => t.enabled);
+      if (enabledTrack) {
+        const audioLanguages = this.api.getAudioLanguagesAndRoles();
+        const audio = audioLanguages[+enabledTrack.id];
+        if (audio) {
+          this.api.selectAudioLanguage(audio.language, audio.role);
+        }
+      }
+    });
+
+    this.api.addEventListener('trackschanged', () => {
+      const videoTrack = this.videoTracks[this.videoTracks.selectedIndex ?? 0];
+      if (!videoTrack) return;
+
+      const variantTracks = this.api.getVariantTracks();
+      const variantIds = variantTracks.map((_, i) => `${i}`);
+
+      for (const rendition of this.videoRenditions) {
+        if (rendition.id && !variantIds.includes(rendition.id)) {
+          videoTrack.removeRendition(rendition);
+        }
+      }
+    });
+  }
+
   async load() {
     if (!this.api) return;
 
@@ -67,6 +170,7 @@ class ShakaVideoElement extends CustomVideoElement {
     await this.api.attach(this.nativeEl);
 
     if (!this.src) {
+      this.#removeAllMediaTracks();
       this.api.unload();
     } else {
       // Try to load a manifest.
@@ -76,7 +180,18 @@ class ShakaVideoElement extends CustomVideoElement {
       } catch (e) {
         // onError is executed if the asynchronous load fails.
         onError(e);
+        return;
       }
+
+      // If the video is set to autoplay, start playback.
+      if (this.nativeEl.autoplay && this.nativeEl.paused) {
+        this.nativeEl.play().catch((err) => {
+          console.warn('Autoplay failed:', err);
+        });
+      }
+
+      this.#addMediaTracks();
+      this.#initTracksListeners();
     }
   }
 }