fix: do not request manifests until play when preload is none (#1060)

Fixes #126

Author: brandonocasey

index.html

@@ -32,6 +32,9 @@
     input[type=url], select {
       min-width: 600px;
     }
+    #preload {
+      min-width: auto;
+    }
     h3 {
       margin-bottom: 5px;
     }
@@ -85,6 +88,13 @@ <h3>Options</h3>
       <input id=override-native type="checkbox" checked>
       Override Native (reloads player)
     </label>
+    <label>
+      Preload (reloads player)
+      <select id=preload>
+        <option selected>auto</option>
+        <option>none</option>
+        <option>metadata</option>
+      </select>
   </div>
 
   <h3>Load a URL</h3>

scripts/index-demo-page.js

@@ -73,6 +73,8 @@
   var getInputValue = function(el) {
     if (el.type === 'url' || el.type === 'text' || el.nodeName.toLowerCase() === 'textarea') {
       return encodeURIComponent(el.value);
+    } else if (el.type === 'select-one') {
+      return el.options[el.selectedIndex].value;
     } else if (el.type === 'checkbox') {
       return el.checked;
     }
@@ -84,6 +86,12 @@
   var setInputValue = function(el, value) {
     if (el.type === 'url' || el.type === 'text' || el.nodeName.toLowerCase() === 'textarea') {
       el.value = decodeURIComponent(value);
+    } else if (el.type === 'select-one') {
+      for (let i = 0; i < el.options.length; i++) {
+        if (el.options[i].value === value) {
+          el.options[i].selected = true;
+        }
+      }
     } else {
       // get the `value` into a Boolean.
       el.checked = JSON.parse(value);
@@ -217,7 +225,7 @@
     representationsEl.selectedIndex = selectedIndex;
   };
 
-  ['debug', 'autoplay', 'muted', 'minified', 'sync-workers', 'liveui', 'partial', 'url', 'type', 'keysystems', 'buffer-water', 'override-native'].forEach(function(name) {
+  ['debug', 'autoplay', 'muted', 'minified', 'sync-workers', 'liveui', 'partial', 'url', 'type', 'keysystems', 'buffer-water', 'override-native', 'preload'].forEach(function(name) {
     stateEls[name] = document.getElementById(name);
   });
 
@@ -251,6 +259,12 @@
       stateEls.minified.dispatchEvent(newEvent('change'));
     });
 
+    stateEls.preload.addEventListener('change', function(event) {
+      saveState();
+      // reload the player and scripts
+      stateEls.minified.dispatchEvent(newEvent('change'));
+    });
+
     stateEls.debug.addEventListener('change', function(event) {
       saveState();
       window.videojs.log.level(event.target.checked ? 'debug' : 'info');
@@ -315,6 +329,7 @@
         var videoEl = document.createElement('video-js');
 
         videoEl.setAttribute('controls', '');
+        videoEl.setAttribute('preload', stateEls.preload.options[stateEls.preload.selectedIndex].value || 'auto');
         videoEl.className = 'vjs-default-skin';
         fixture.appendChild(videoEl);
 

src/master-playlist-controller.js

@@ -279,7 +279,16 @@ export class MasterPlaylistController extends videojs.EventTarget {
     this.logger_ = logger('MPC');
 
     this.triggeredFmp4Usage = false;
-    this.masterPlaylistLoader_.load();
+    if (this.tech_.preload() === 'none') {
+      this.loadOnPlay_ = () => {
+        this.loadOnPlay_ = null;
+        this.masterPlaylistLoader_.load();
+      };
+
+      this.tech_.one('play', this.loadOnPlay_);
+    } else {
+      this.masterPlaylistLoader_.load();
+    }
   }
 
   /**
@@ -381,6 +390,9 @@ export class MasterPlaylistController extends videojs.EventTarget {
     });
 
     this.masterPlaylistLoader_.on('loadedplaylist', () => {
+      if (this.loadOnPlay_) {
+        this.tech_.off('play', this.loadOnPlay_);
+      }
       let updatedPlaylist = this.masterPlaylistLoader_.media();
 
       if (!updatedPlaylist) {
@@ -1406,6 +1418,10 @@ export class MasterPlaylistController extends videojs.EventTarget {
     this.masterPlaylistLoader_.dispose();
     this.mainSegmentLoader_.dispose();
 
+    if (this.loadOnPlay_) {
+      this.tech_.off('play', this.loadOnPlay_);
+    }
+
     ['AUDIO', 'SUBTITLES'].forEach((type) => {
       const groups = this.mediaTypes_[type].groups;
 

test/videojs-http-streaming.test.js

@@ -3718,7 +3718,7 @@ QUnit.test('switching playlists with an outstanding key request aborts request a
   );
 });
 
-QUnit.test('does not download segments if preload option set to none', function(assert) {
+QUnit.test('does not download anything until play if preload option set to none', function(assert) {
   this.player.preload('none');
   this.player.src({
     src: 'master.m3u8',
@@ -3728,19 +3728,23 @@ QUnit.test('does not download segments if preload option set to none', function(
   this.clock.tick(1);
 
   openMediaSource(this.player, this.clock);
-  // master
-  this.standardXHRResponse(this.requests.shift());
-  // media
-  this.standardXHRResponse(this.requests.shift());
   this.clock.tick(10 * 1000);
 
-  this.requests = this.requests.filter(function(request) {
-    return !(/m3u8$/).test(request.uri);
-  });
   assert.equal(this.requests.length, 0, 'did not download any segments');
 
   // verify stats
   assert.equal(this.player.tech_.vhs.stats.bandwidth, 4194304, 'default');
+
+  this.player.tech_.paused = () => false;
+  this.player.tech_.trigger('play');
+
+  // master
+  this.standardXHRResponse(this.requests.shift());
+
+  // media
+  this.standardXHRResponse(this.requests.shift());
+
+  assert.equal(this.requests.length, 1, 'requested segment');
 });
 
 // workaround https://bugzilla.mozilla.org/show_bug.cgi?id=548397