Simple buffer management algorithm

On loadedmetadata and timeupdate, check the length of content from the current playhead position to the end of the buffer. If the amount of time buffered is less than a goal size of 5 seconds, download another segment of the video. For this algorithm to work, it requires an update to the video.js swf to expose the bufferLength property on the netstream directly. Added a fix so that once all segments are downloaded, the plugin does not attempt to continue downloading segments.

@@ -10,7 +10,15 @@
 
 
 videojs.hls = {};
 videojs.hls = {};
 
 
-var init = function(options) {
+var
+  // the desired length of video to maintain in the buffer, in seconds
+  goalBufferLength = 5,
+
+  /**
+   * Initializes the HLS plugin.
+   * @param options {mixed} the URL to an HLS playlist
+   */
+  init = function(options) {
     var
     var
       mediaSource = new videojs.MediaSource(),
       mediaSource = new videojs.MediaSource(),
       segmentParser = new videojs.hls.SegmentParser(),
       segmentParser = new videojs.hls.SegmentParser(),
@@ -48,25 +56,49 @@ var init = function(options) {
         player.hls.currentMediaIndex = 0;
         player.hls.currentMediaIndex = 0;
       };
       };
 
 
-    // download a new segment if one is needed
+      /**
+       * Determines whether there is enough video data currently in the buffer
+       * and downloads a new segment if the buffered time is less than the goal.
+       */
       fillBuffer = function() {
       fillBuffer = function() {
         var
         var
+          buffered = player.buffered(),
+          bufferedTime = 0,
           xhr = new window.XMLHttpRequest(),
           xhr = new window.XMLHttpRequest(),
           segment = player.hls.currentPlaylist.segments[player.hls.currentMediaIndex],
           segment = player.hls.currentPlaylist.segments[player.hls.currentMediaIndex],
-        segmentUri = segment.uri,
+          segmentUri,
           startTime;
           startTime;
+
+        // if the video has finished downloading, stop trying to buffer
+        if (!segment) {
+          return;
+        }
+
+        if (buffered) {
+          // assuming a single, contiguous buffer region
+          bufferedTime = player.buffered().end(0) - player.currentTime();
+        }
+
+        // if there is plenty of content in the buffer, relax for awhile
+        console.log('bufferedTime:', bufferedTime);
+        if (bufferedTime >= goalBufferLength) {
+          return;
+        }
+
+        segmentUri = segment.uri;
         if (!(/^([A-z]*:)?\/\//).test(segmentUri)) {
         if (!(/^([A-z]*:)?\/\//).test(segmentUri)) {
           // the segment URI is relative to the manifest
           // the segment URI is relative to the manifest
           segmentUri = url.split('/').slice(0, -1).concat(segmentUri).join('/');
           segmentUri = url.split('/').slice(0, -1).concat(segmentUri).join('/');
         }
         }
+
+        // request the next segment
         xhr.open('GET', segmentUri);
         xhr.open('GET', segmentUri);
         xhr.responseType = 'arraybuffer';
         xhr.responseType = 'arraybuffer';
         xhr.onreadystatechange = function() {
         xhr.onreadystatechange = function() {
-        var elapsed;
           if (xhr.readyState === 4) {
           if (xhr.readyState === 4) {
             // calculate the download bandwidth
             // calculate the download bandwidth
-          elapsed = ((+new Date()) - startTime) * 1000;
-          player.hls.bandwidth =  xhr.response.byteLength / elapsed;
+            player.hls.segmentRequestTime = (+new Date()) - startTime;
+            player.hls.bandwidth = xhr.response.byteLength / player.hls.segmentRequestTime;
 
 
             // transmux the segment data from M2TS to FLV
             // transmux the segment data from M2TS to FLV
             segmentParser.parseSegmentBinaryData(new Uint8Array(xhr.response));
             segmentParser.parseSegmentBinaryData(new Uint8Array(xhr.response));
@@ -75,7 +107,6 @@ var init = function(options) {
                                                    player);
                                                    player);
             }
             }
 
 
-          // update the segment index
             player.hls.currentMediaIndex++;
             player.hls.currentMediaIndex++;
           }
           }
         };
         };
@@ -83,6 +114,7 @@ var init = function(options) {
         xhr.send(null);
         xhr.send(null);
       };
       };
       player.on('loadedmetadata', fillBuffer);
       player.on('loadedmetadata', fillBuffer);
+      player.on('timeupdate', fillBuffer);
 
 
       // download and process the manifest
       // download and process the manifest
       (function() {
       (function() {
@@ -112,7 +144,7 @@ var init = function(options) {
       src: videojs.URL.createObjectURL(mediaSource),
       src: videojs.URL.createObjectURL(mediaSource),
       type: "video/flv"
       type: "video/flv"
     });
     });
-};
+  };
 
 
 videojs.plugin('hls', function() {
 videojs.plugin('hls', function() {
   var initialize = function() {
   var initialize = function() {

@@ -20,13 +20,27 @@
     throws(block, [expected], [message])
     throws(block, [expected], [message])
   */
   */
 
 
-var player, oldXhr, oldSourceBuffer, xhrParams;
+var player, oldFlashSupported, oldXhr, oldSourceBuffer, xhrParams;
 
 
 module('HLS', {
 module('HLS', {
   setup: function() {
   setup: function() {
     var video  = document.createElement('video');
     var video  = document.createElement('video');
     document.querySelector('#qunit-fixture').appendChild(video);
     document.querySelector('#qunit-fixture').appendChild(video);
-    player = videojs(video);
+    player = videojs(video, {
+      flash: {
+        swf: '../node_modules/video.js/dist/video-js/video-js.swf',
+      },
+      techOrder: ['flash']
+    });
+
+    // force Flash support in phantomjs
+    oldFlashSupported = videojs.Flash.isSupported;
+    videojs.Flash.isSupported = function() {
+      return true;
+    };
+    player.buffered = function() {
+      return videojs.createTimeRange(0, 0);
+    };
 
 
     // make XHR synchronous
     // make XHR synchronous
     oldXhr = window.XMLHttpRequest;
     oldXhr = window.XMLHttpRequest;
@@ -56,6 +70,7 @@ module('HLS', {
     };
     };
   },
   },
   teardown: function() {
   teardown: function() {
+    videojs.Flash.isSupported = oldFlashSupported;
     window.XMLHttpRequest = oldXhr;
     window.XMLHttpRequest = oldXhr;
     window.videojs.SourceBuffer = oldSourceBuffer;
     window.videojs.SourceBuffer = oldSourceBuffer;
   }
   }
@@ -87,6 +102,9 @@ test('loads the specified manifest URL on init', function() {
 
 
 test('starts downloading a segment on loadedmetadata', function() {
 test('starts downloading a segment on loadedmetadata', function() {
   player.hls('manifest/media.m3u8');
   player.hls('manifest/media.m3u8');
+  player.buffered = function() {
+    return videojs.createTimeRange(0, 0);
+  };
   videojs.mediaSources[player.currentSrc()].trigger({
   videojs.mediaSources[player.currentSrc()].trigger({
     type: 'sourceopen'
     type: 'sourceopen'
   });
   });
@@ -96,6 +114,9 @@ test('starts downloading a segment on loadedmetadata', function() {
 
 
 test('recognizes absolute URIs and requests them unmodified', function() {
 test('recognizes absolute URIs and requests them unmodified', function() {
   player.hls('manifest/absoluteUris.m3u8');
   player.hls('manifest/absoluteUris.m3u8');
+  player.buffered = function() {
+    return videojs.createTimeRange(0, 0);
+  };
   videojs.mediaSources[player.currentSrc()].trigger({
   videojs.mediaSources[player.currentSrc()].trigger({
     type: 'sourceopen'
     type: 'sourceopen'
   });
   });
@@ -113,7 +134,6 @@ test('re-initializes the plugin for each source', function() {
   secondInit = player.hls;
   secondInit = player.hls;
 
 
   notStrictEqual(firstInit, secondInit, 'the plugin object is replaced');
   notStrictEqual(firstInit, secondInit, 'the plugin object is replaced');
-
 });
 });
 
 
 test('calculates the bandwidth after downloading a segment', function() {
 test('calculates the bandwidth after downloading a segment', function() {
@@ -125,6 +145,55 @@ test('calculates the bandwidth after downloading a segment', function() {
   ok(player.hls.bandwidth, 'bandwidth is calculated');
   ok(player.hls.bandwidth, 'bandwidth is calculated');
   ok(player.hls.bandwidth > 0,
   ok(player.hls.bandwidth > 0,
      'bandwidth is positive: ' + player.hls.bandwidth);
      'bandwidth is positive: ' + player.hls.bandwidth);
+  ok(player.hls.segmentRequestTime >= 0,
+     'saves segment request time: ' + player.hls.segmentRequestTime + 's');
+});
+
+test('does not download the next segment if the buffer is full', function() {
+  player.hls('manifest/media.m3u8');
+  player.currentTime = function() {
+    return 15;
+  };
+  player.buffered = function() {
+    return videojs.createTimeRange(0, 20);
+  };
+  videojs.mediaSources[player.currentSrc()].trigger({
+    type: 'sourceopen'
+  });
+  xhrParams = null;
+  player.trigger('timeupdate');
+
+  strictEqual(xhrParams, null, 'no segment request was made');
+});
+
+test('downloads the next segment if the buffer is getting low', function() {
+  player.hls('manifest/media.m3u8');
+  videojs.mediaSources[player.currentSrc()].trigger({
+    type: 'sourceopen'
+  });
+  player.currentTime = function() {
+    return 15;
+  };
+  player.buffered = function() {
+    return videojs.createTimeRange(0, 19.999);
+  };
+  xhrParams = null;
+  player.trigger('timeupdate');
+
+  ok(xhrParams, 'made a request');
+  strictEqual(xhrParams[1], 'manifest/00002.ts', 'made segment request');
+});
+
+test('stops downloading segments at the end of the playlist', function() {
+  player.hls('manifest/media.m3u8');
+  videojs.mediaSources[player.currentSrc()].trigger({
+    type: 'sourceopen'
+  });
+  xhrParams = null;
+  player.hls.currentMediaIndex = 4;
+  player.trigger('timeupdate');
+
+  strictEqual(xhrParams, null, 'no request is made');
 });
 });
 
 
 module('segment controller', {
 module('segment controller', {