chore: mirror player.src on the demo page using sourceset (#1071)

videojs · Feb 17, 2021 · fee7309 · fee7309
1 parent e583b26
commit fee7309
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -88,6 +88,10 @@ <h3>Options</h3>
       <input id=override-native type="checkbox" checked>
       Override Native (reloads player)
     </label>
+    <label>
+      <input id=mirror-source type="checkbox" checked>
+      Mirror sources from player.src (reloads player, uses EXPERIMENTAL sourceset option)
+    </label>
     <label>
       Preload (reloads player)
       <select id=preload>

diff --git a/scripts/index-demo-page.js b/scripts/index-demo-page.js
@@ -225,7 +225,22 @@
     representationsEl.selectedIndex = selectedIndex;
   };
 
-  ['debug', 'autoplay', 'muted', 'minified', 'sync-workers', 'liveui', 'partial', 'url', 'type', 'keysystems', 'buffer-water', 'override-native', 'preload'].forEach(function(name) {
+  [
+    'debug',
+    'autoplay',
+    'muted',
+    'minified',
+    'sync-workers',
+    'liveui',
+    'partial',
+    'url',
+    'type',
+    'keysystems',
+    'buffer-water',
+    'override-native',
+    'preload',
+    'mirror-source'
+  ].forEach(function(name) {
     stateEls[name] = document.getElementById(name);
   });
 
@@ -252,6 +267,13 @@
       window.player.autoplay(event.target.checked);
     });
 
+    stateEls['mirror-source'].addEventListener('change', function(event) {
+      saveState();
+
+      // reload the player and scripts
+      stateEls.minified.dispatchEvent(newEvent('change'));
+    });
+
     stateEls['sync-workers'].addEventListener('change', function(event) {
       saveState();
 
@@ -333,13 +355,16 @@
         videoEl.className = 'vjs-default-skin';
         fixture.appendChild(videoEl);
 
+        const mirrorSource = getInputValue(stateEls['mirror-source']);
+
         player = window.player = window.videojs(videoEl, {
           plugins: {
             httpSourceSelector: {
               default: 'auto'
             }
           },
           liveui: stateEls.liveui.checked,
+          enableSourceset: mirrorSource,
           html5: {
             vhs: {
               overrideNative: getInputValue(stateEls['override-native']),
@@ -349,6 +374,34 @@
           }
         });
 
+        player.on('sourceset', function() {
+          const source = player.currentSource();
+
+          if (source.keySystems) {
+            const copy = JSON.parse(JSON.stringify(source.keySystems));
+
+            // have to delete pssh as it will often make keySystems too big
+            // for a uri
+            Object.keys(copy).forEach(function(key) {
+              if (copy[key].hasOwnProperty('pssh')) {
+                delete copy[key].pssh;
+              }
+            });
+
+            stateEls.keysystems.value = JSON.stringify(copy, null, 2);
+          }
+
+          if (source.src) {
+            stateEls.url.value = source.src;
+          }
+
+          if (source.type) {
+            stateEls.type.value = source.type;
+          }
+
+          saveState();
+        });
+
         player.width(640);
         player.height(264);