Reorganized videojs-hls.js to make it a bit more readable and set it up for further simplification

@@ -16,6 +16,7 @@
   <script src="src/videojs-hls.js"></script>
   <script src="src/videojs-hls.js"></script>
 
 
   <!-- segment handling -->
   <!-- segment handling -->
+  <script src="src/xhr.js"></script>
   <script src="src/flv-tag.js"></script>
   <script src="src/flv-tag.js"></script>
   <script src="src/exp-golomb.js"></script>
   <script src="src/exp-golomb.js"></script>
   <script src="src/h264-stream.js"></script>
   <script src="src/h264-stream.js"></script>

 /*
 /*
- * video-js-hls
+ * videojs-hls
  *
  *
- *
- * Copyright (c) 2013 Brightcove
+ * Copyright (c) 2014 Brightcove
  * All rights reserved.
  * All rights reserved.
  */
  */
 
 
@@ -10,206 +9,28 @@
 'use strict';
 'use strict';
 
 
 var
 var
-
   // a fudge factor to apply to advertised playlist bitrates to account for
   // a fudge factor to apply to advertised playlist bitrates to account for
   // temporary flucations in client bandwidth
   // temporary flucations in client bandwidth
   bandwidthVariance = 1.1,
   bandwidthVariance = 1.1,
+  resolveUrl;
 
 
-  /**
-   * A comparator function to sort two playlist object by bandwidth.
-   * @param left {object} a media playlist object
-   * @param right {object} a media playlist object
-   * @return {number} Greater than zero if the bandwidth attribute of
-   * left is greater than the corresponding attribute of right. Less
-   * than zero if the bandwidth of right is greater than left and
-   * exactly zero if the two are equal.
-   */
-  playlistBandwidth = function(left, right) {
-    var leftBandwidth, rightBandwidth;
-    if (left.attributes && left.attributes.BANDWIDTH) {
-      leftBandwidth = left.attributes.BANDWIDTH;
-    }
-    leftBandwidth = leftBandwidth || window.Number.MAX_VALUE;
-    if (right.attributes && right.attributes.BANDWIDTH) {
-      rightBandwidth = right.attributes.BANDWIDTH;
-    }
-    rightBandwidth = rightBandwidth || window.Number.MAX_VALUE;
-
-    return leftBandwidth - rightBandwidth;
-  },
-
-  /**
-   * A comparator function to sort two playlist object by resolution (width).
-   * @param left {object} a media playlist object
-   * @param right {object} a media playlist object
-   * @return {number} Greater than zero if the resolution.width attribute of
-   * left is greater than the corresponding attribute of right. Less
-   * than zero if the resolution.width of right is greater than left and
-   * exactly zero if the two are equal.
-   */
-  playlistResolution = function(left, right) {
-    var leftWidth, rightWidth;
-
-    if (left.attributes && left.attributes.RESOLUTION && left.attributes.RESOLUTION.width) {
-      leftWidth = left.attributes.RESOLUTION.width;
-    }
-
-    leftWidth = leftWidth || window.Number.MAX_VALUE;
-
-    if (right.attributes && right.attributes.RESOLUTION && right.attributes.RESOLUTION.width) {
-      rightWidth = right.attributes.RESOLUTION.width;
-    }
-
-    rightWidth = rightWidth || window.Number.MAX_VALUE;
-
-    // NOTE - Fallback to bandwidth sort as appropriate in cases where multiple renditions
-    // have the same media dimensions/ resolution
-    if (leftWidth === rightWidth && left.attributes.BANDWIDTH && right.attributes.BANDWIDTH) {
-      return left.attributes.BANDWIDTH - right.attributes.BANDWIDTH;
-    } else {
-      return leftWidth - rightWidth;
-    }
-  },
-
-  xhr,
-
-  /**
-   * TODO - Document this great feature.
-   *
-   * @param playlist
-   * @param time
-   * @returns int
-   */
-  getMediaIndexByTime = function(playlist, time) {
-    var index, counter, timeRanges, currentSegmentRange;
-
-    timeRanges = [];
-    for (index = 0; index < playlist.segments.length; index++) {
-      currentSegmentRange = {};
-      currentSegmentRange.start = (index === 0) ? 0 : timeRanges[index - 1].end;
-      currentSegmentRange.end = currentSegmentRange.start + playlist.segments[index].duration;
-      timeRanges.push(currentSegmentRange);
-    }
-
-    for (counter = 0; counter < timeRanges.length; counter++) {
-      if (time >= timeRanges[counter].start && time < timeRanges[counter].end) {
-        return counter;
-      }
-    }
-
-    return -1;
-
-  },
-
-  /**
-   * Determine the media index in one playlist that corresponds to a
-   * specified media index in another. This function can be used to
-   * calculate a new segment position when a playlist is reloaded or a
-   * variant playlist is becoming active.
-   * @param mediaIndex {number} the index into the original playlist
-   * to translate
-   * @param original {object} the playlist to translate the media
-   * index from
-   * @param update {object} the playlist to translate the media index
-   * to
-   * @param {number} the corresponding media index in the updated
-   * playlist
-   */
-  translateMediaIndex = function(mediaIndex, original, update) {
-    var
-      i,
-      originalSegment;
-
-    // no segments have been loaded from the original playlist
-    if (mediaIndex === 0) {
-      return 0;
-    }
-    if (!(update && update.segments)) {
-      // let the media index be zero when there are no segments defined
-      return 0;
-    }
-
-    // try to sync based on URI
-    i = update.segments.length;
-    originalSegment = original.segments[mediaIndex - 1];
-    while (i--) {
-      if (originalSegment.uri === update.segments[i].uri) {
-        return i + 1;
-      }
-    }
-
-    // sync on media sequence
-    return (original.mediaSequence + mediaIndex) - update.mediaSequence;
-  },
-
-  /**
-   * Calculate the duration of a playlist from a given start index to a given
-   * end index.
-   * @param playlist {object} a media playlist object
-   * @param startIndex {number} an inclusive lower boundary for the playlist.
-   * Defaults to 0.
-   * @param endIndex {number} an exclusive upper boundary for the playlist.
-   * Defaults to playlist length.
-   * @return {number} the duration between the start index and end index.
-   */
-  duration = function(playlist, startIndex, endIndex) {
-    var dur = 0,
-        segment,
-        i;
-
-    startIndex = startIndex || 0;
-    endIndex = endIndex !== undefined ? endIndex : (playlist.segments || []).length;
-    i = endIndex - 1;
-
-    for (; i >= startIndex; i--) {
-      segment = playlist.segments[i];
-      dur += segment.duration || playlist.targetDuration || 0;
-    }
-
-    return dur;
-  },
-
-  /**
-   * Calculate the total duration for a playlist based on segment metadata.
-   * @param playlist {object} a media playlist object
-   * @return {number} the currently known duration, in seconds
-   */
-  totalDuration = function(playlist) {
-    if (!playlist) {
-      return 0;
-    }
-
-    // if present, use the duration specified in the playlist
-    if (playlist.totalDuration) {
-      return playlist.totalDuration;
-    }
-
-    // duration should be Infinity for live playlists
-    if (!playlist.endList) {
-      return window.Infinity;
-    }
-
-    return duration(playlist);
-  },
-
-  resolveUrl,
-
-  initSource = function(player, mediaSource, srcUrl) {
+videojs.Hls = videojs.Flash.extend({
+  init: function(player, options, ready) {
     var
     var
-      segmentParser = new videojs.Hls.SegmentParser(),
-      settings = videojs.util.mergeOptions({}, player.options().hls),
-      segmentBuffer = [],
-
-      lastSeekedTime,
-      segmentXhr,
-      fillBuffer,
-      drainBuffer,
-      updateDuration;
+      source = options.source,
+      settings = player.options();
 
 
+    player.hls = this;
+    delete options.source;
+    options.swf = settings.flash.swf;
+    videojs.Flash.call(this, player, options, ready);
+    options.source = source;
+    this.bytesReceived = 0;
 
 
-    player.hls.currentTime = function() {
-      if (lastSeekedTime) {
-        return lastSeekedTime;
+    // TODO: After video.js#1347 is pulled in move these to the prototype
+    this.currentTime = function() {
+      if (this.lastSeekedTime_) {
+        return this.lastSeekedTime_;
       }
       }
       // currentTime is zero while the tech is initializing
       // currentTime is zero while the tech is initializing
       if (!this.el() || !this.el().vjs_getProperty) {
       if (!this.el() || !this.el().vjs_getProperty) {
@@ -217,8 +38,7 @@ var
       }
       }
       return this.el().vjs_getProperty('currentTime');
       return this.el().vjs_getProperty('currentTime');
     };
     };
-
-    player.hls.setCurrentTime = function(currentTime) {
+    this.setCurrentTime = function(currentTime) {
       if (!(this.playlists && this.playlists.media())) {
       if (!(this.playlists && this.playlists.media())) {
         // return immediately if the metadata is not ready yet
         // return immediately if the metadata is not ready yet
         return 0;
         return 0;
@@ -226,384 +46,422 @@ var
 
 
       // save the seek target so currentTime can report it correctly
       // save the seek target so currentTime can report it correctly
       // while the seek is pending
       // while the seek is pending
-      lastSeekedTime = currentTime;
+      this.lastSeekedTime_ = currentTime;
 
 
       // determine the requested segment
       // determine the requested segment
-      this.mediaIndex =
-          getMediaIndexByTime(this.playlists.media(), currentTime);
+      this.mediaIndex = videojs.Hls.getMediaIndexByTime(this.playlists.media(), currentTime);
 
 
       // abort any segments still being decoded
       // abort any segments still being decoded
       this.sourceBuffer.abort();
       this.sourceBuffer.abort();
 
 
       // cancel outstanding requests and buffer appends
       // cancel outstanding requests and buffer appends
-      if (segmentXhr) {
-        segmentXhr.abort();
+      if (this.segmentXhr_) {
+        this.segmentXhr_.abort();
       }
       }
 
 
       // clear out any buffered segments
       // clear out any buffered segments
-      segmentBuffer = [];
+      this.segmentBuffer_ = [];
 
 
       // begin filling the buffer at the new position
       // begin filling the buffer at the new position
-      fillBuffer(currentTime * 1000);
+      this.fillBuffer(currentTime * 1000);
     };
     };
 
 
-    /**
-     * Update the player duration
-     */
-    updateDuration = function(playlist) {
-      var oldDuration = player.duration(),
-          newDuration = totalDuration(playlist);
+    videojs.Hls.prototype.src.call(this, options.source && options.source.src);
+  }
+});
 
 
-      // if the duration has changed, invalidate the cached value
-      if (oldDuration !== newDuration) {
-        player.trigger('durationchange');
-      }
-    };
+// Add HLS to the standard tech order
+videojs.options.techOrder.unshift('hls');
 
 
-    /**
-     * Chooses the appropriate media playlist based on the current
-     * bandwidth estimate and the player size.
-     * @return the highest bitrate playlist less than the currently detected
-     * bandwidth, accounting for some amount of bandwidth variance
-     */
-    player.hls.selectPlaylist = function () {
-      var
-        effectiveBitrate,
-        sortedPlaylists = player.hls.playlists.master.playlists.slice(),
-        bandwidthPlaylists = [],
-        i = sortedPlaylists.length,
-        variant,
-        bandwidthBestVariant,
-        resolutionBestVariant;
-
-      sortedPlaylists.sort(playlistBandwidth);
-
-      // filter out any variant that has greater effective bitrate
-      // than the current estimated bandwidth
-      while (i--) {
-        variant = sortedPlaylists[i];
-
-        // ignore playlists without bandwidth information
-        if (!variant.attributes || !variant.attributes.BANDWIDTH) {
-          continue;
-        }
-
-        effectiveBitrate = variant.attributes.BANDWIDTH * bandwidthVariance;
-
-        if (effectiveBitrate < player.hls.bandwidth) {
-          bandwidthPlaylists.push(variant);
-
-          // since the playlists are sorted in ascending order by
-          // bandwidth, the first viable variant is the best
-          if (!bandwidthBestVariant) {
-            bandwidthBestVariant = variant;
-          }
-        }
-      }
+// the desired length of video to maintain in the buffer, in seconds
+videojs.Hls.GOAL_BUFFER_LENGTH = 30;
 
 
-      i = bandwidthPlaylists.length;
-
-      // sort variants by resolution
-      bandwidthPlaylists.sort(playlistResolution);
-
-      // iterate through the bandwidth-filtered playlists and find
-      // best rendition by player dimension
-      while (i--) {
-        variant = bandwidthPlaylists[i];
-
-        // ignore playlists without resolution information
-        if (!variant.attributes ||
-            !variant.attributes.RESOLUTION ||
-            !variant.attributes.RESOLUTION.width ||
-            !variant.attributes.RESOLUTION.height) {
-          continue;
-        }
-
-        // since the playlists are sorted, the first variant that has
-        // dimensions less than or equal to the player size is the
-        // best
-        if (variant.attributes.RESOLUTION.width <= player.width() &&
-            variant.attributes.RESOLUTION.height <= player.height()) {
-          resolutionBestVariant = variant;
-          break;
-        }
-      }
+videojs.Hls.prototype.src = function(src) {
+  var
+    self = this,
+    mediaSource,
+    source;
 
 
-      // fallback chain of variants
-      return resolutionBestVariant || bandwidthBestVariant || sortedPlaylists[0];
-    };
+  if (src) {
+    this.src_ = src;
 
 
-    /**
-     * Abort all outstanding work and cleanup.
-     */
-    player.hls.dispose = function() {
-      if (segmentXhr) {
-        segmentXhr.onreadystatechange = null;
-        segmentXhr.abort();
-      }
-      if (this.playlists) {
-        this.playlists.dispose();
-      }
-      videojs.Flash.prototype.dispose.call(this);
+    mediaSource = new videojs.MediaSource();
+    source = {
+      src: videojs.URL.createObjectURL(mediaSource),
+      type: "video/flv"
     };
     };
+    this.mediaSource = mediaSource;
+    
+    this.segmentBuffer_ = [];
+    this.segmentParser_ = new videojs.Hls.SegmentParser();
 
 
-    /**
-     * 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.
-     * @param offset (optional) {number} the offset into the downloaded segment
-     * to seek to, in milliseconds
-     */
-    fillBuffer = function(offset) {
-      var
-        buffered = player.buffered(),
-        bufferedTime = 0,
-        segment,
-        segmentUri,
-        startTime;
-
-      // if there is a request already in flight, do nothing
-      if (segmentXhr) {
-        return;
-      }
+    // load the MediaSource into the player
+    this.mediaSource.addEventListener('sourceopen', videojs.bind(this, this.handleSourceOpen));
 
 
-      // if no segments are available, do nothing
-      if (player.hls.playlists.state === "HAVE_NOTHING" ||
-          !player.hls.playlists.media().segments) {
+    this.player().ready(function() {
+      // do nothing if the tech has been disposed already
+      // this can occur if someone sets the src in player.ready(), for instance
+      if (!self.el()) {
         return;
         return;
       }
       }
+      self.el().vjs_src(source.src);
+    });
+  }
+};
 
 
-      // if the video has finished downloading, stop trying to buffer
-      segment = player.hls.playlists.media().segments[player.hls.mediaIndex];
-      if (!segment) {
-        return;
-      }
+videojs.Hls.prototype.handleSourceOpen = function() {
+  // construct the video data buffer and set the appropriate MIME type
+  var
+    player = this.player(),
+    settings = player.options().hls || {},
+    sourceBuffer = this.mediaSource.addSourceBuffer('video/flv; codecs="vp6,aac"'),
+    oldMediaPlaylist;
 
 
-      if (buffered) {
-        // assuming a single, contiguous buffer region
-        bufferedTime = player.buffered().end(0) - player.currentTime();
-      }
+  this.sourceBuffer = sourceBuffer;
+  sourceBuffer.appendBuffer(this.segmentParser_.getFlvHeader());
 
 
-      // if there is plenty of content in the buffer and we're not
-      // seeking, relax for awhile
-      if (typeof offset !== 'number' &&
-          bufferedTime >= videojs.Hls.GOAL_BUFFER_LENGTH) {
-        return;
-      }
+  this.mediaIndex = 0;
+  this.playlists = new videojs.Hls.PlaylistLoader(this.src_, settings.withCredentials);
 
 
-      // resolve the segment URL relative to the playlist
-      if (player.hls.playlists.media().uri === srcUrl) {
-        segmentUri = resolveUrl(srcUrl, segment.uri);
-      } else {
-        segmentUri = resolveUrl(resolveUrl(srcUrl, player.hls.playlists.media().uri || ''),
-                                segment.uri);
-      }
+  this.playlists.on('loadedmetadata', videojs.bind(this, function() {
+    oldMediaPlaylist = this.playlists.media();
 
 
-      startTime = +new Date();
-
-      // request the next segment
-      segmentXhr = xhr({
-        url: segmentUri,
-        responseType: 'arraybuffer',
-        withCredentials: settings.withCredentials
-      }, function(error, url) {
-        var tags;
-
-        // the segment request is no longer outstanding
-        segmentXhr = null;
-
-        if (error) {
-          // if a segment request times out, we may have better luck with another playlist
-          if (error === 'timeout') {
-            player.hls.bandwidth = 1;
-            return player.hls.playlists.media(player.hls.selectPlaylist());
-          }
-          // otherwise, try jumping ahead to the next segment
-          player.hls.error = {
-            status: this.status,
-            message: 'HLS segment request error at URL: ' + url,
-            code: (this.status >= 500) ? 4 : 2
-          };
-
-          // try moving on to the next segment
-          player.hls.mediaIndex++;
-          return;
-        }
-
-        // stop processing if the request was aborted
-        if (!this.response) {
-          return;
-        }
-
-        // calculate the download bandwidth
-        player.hls.segmentXhrTime = (+new Date()) - startTime;
-        player.hls.bandwidth = (this.response.byteLength / player.hls.segmentXhrTime) * 8 * 1000;
-        player.hls.bytesReceived += this.response.byteLength;
-
-        // transmux the segment data from MP2T to FLV
-        segmentParser.parseSegmentBinaryData(new Uint8Array(this.response));
-        segmentParser.flushTags();
-
-        // package up all the work to append the segment
-        // if the segment is the start of a timestamp discontinuity,
-        // we have to wait until the sourcebuffer is empty before
-        // aborting the source buffer processing
-        tags = [];
-        while (segmentParser.tagsAvailable()) {
-          tags.push(segmentParser.getNextTag());
-        }
-        segmentBuffer.push({
-          mediaIndex: player.hls.mediaIndex,
-          playlist: player.hls.playlists.media(),
-          offset: offset,
-          tags: tags
-        });
-        drainBuffer();
-
-        player.hls.mediaIndex++;
-
-        // figure out what stream the next segment should be downloaded from
-        // with the updated bandwidth information
-        player.hls.playlists.media(player.hls.selectPlaylist());
-      });
-    };
+    // periodically check if new data needs to be downloaded or
+    // buffered data should be appended to the source buffer
+    this.fillBuffer();
+    player.on('timeupdate', videojs.bind(this, this.fillBuffer));
+    player.on('timeupdate', videojs.bind(this, this.drainBuffer));
+    player.on('waiting', videojs.bind(this, this.drainBuffer));
 
 
-    drainBuffer = function(event) {
-      var
-        i = 0,
-        mediaIndex,
-        playlist,
-        offset,
-        tags,
-        segment,
+    player.trigger('loadedmetadata');
+  }));
 
 
-        ptsTime,
-        segmentOffset;
+  this.playlists.on('error', videojs.bind(this, function() {
+    player.error(this.playlists.error);
+  }));
 
 
-      if (!segmentBuffer.length) {
-        return;
-      }
+  this.playlists.on('loadedplaylist', videojs.bind(this, function() {
+    var updatedPlaylist = this.playlists.media();
 
 
-      mediaIndex = segmentBuffer[0].mediaIndex;
-      playlist = segmentBuffer[0].playlist;
-      offset = segmentBuffer[0].offset;
-      tags = segmentBuffer[0].tags;
-      segment = playlist.segments[mediaIndex];
-
-      event = event || {};
-      segmentOffset = duration(playlist, 0, mediaIndex) * 1000;
-
-      // abort() clears any data queued in the source buffer so wait
-      // until it empties before calling it when a discontinuity is
-      // next in the buffer
-      if (segment.discontinuity) {
-        if (event.type !== 'waiting') {
-          return;
-        }
-        player.hls.sourceBuffer.abort();
-        // tell the SWF where playback is continuing in the stitched timeline
-        player.hls.el().vjs_setProperty('currentTime', segmentOffset * 0.001);
-      }
+    if (!updatedPlaylist) {
+      // do nothing before an initial media playlist has been activated
+      return;
+    }
 
 
-      // if we're refilling the buffer after a seek, scan through the muxed
-      // FLV tags until we find the one that is closest to the desired
-      // playback time
-      if (typeof offset === 'number') {
-        ptsTime = offset - segmentOffset + tags[0].pts;
+    this.updateDuration(this.playlists.media());
+    this.mediaIndex = videojs.Hls.translateMediaIndex(this.mediaIndex, oldMediaPlaylist, updatedPlaylist);
+    oldMediaPlaylist = updatedPlaylist;
+  }));
 
 
-        while (tags[i].pts < ptsTime) {
-          i++;
-        }
+  this.playlists.on('mediachange', function() {
+    player.trigger('mediachange');
+  });
+};
 
 
-        // tell the SWF where we will be seeking to
-        player.hls.el().vjs_setProperty('currentTime', (tags[i].pts - tags[0].pts + segmentOffset) * 0.001);
+videojs.Hls.prototype.duration = function() {
+  var playlists = this.playlists;
+  if (playlists) {
+    return videojs.Hls.getPlaylistTotalDuration(playlists.media());
+  }
+  return 0;
+};
 
 
-        tags = tags.slice(i);
+/**
+ * Update the player duration
+ */
+videojs.Hls.prototype.updateDuration = function(playlist) {
+  var player = this.player(),
+      oldDuration = player.duration(),
+      newDuration = videojs.Hls.getPlaylistTotalDuration(playlist);
+
+  // if the duration has changed, invalidate the cached value
+  if (oldDuration !== newDuration) {
+    player.trigger('durationchange');
+  }
+};
 
 
-        lastSeekedTime = null;
-      }
+/**
+ * Abort all outstanding work and cleanup.
+ */
+videojs.Hls.prototype.dispose = function() {
+  if (this.segmentXhr_) {
+    this.segmentXhr_.onreadystatechange = null;
+    this.segmentXhr_.abort();
+  }
+  if (this.playlists) {
+    this.playlists.dispose();
+  }
+  videojs.Flash.prototype.dispose.call(this);
+};
 
 
-      for (i = 0; i < tags.length; i++) {
-        // queue up the bytes to be appended to the SourceBuffer
-        // the queue gives control back to the browser between tags
-        // so that large segments don't cause a "hiccup" in playback
+/**
+ * Chooses the appropriate media playlist based on the current
+ * bandwidth estimate and the player size.
+ * @return the highest bitrate playlist less than the currently detected
+ * bandwidth, accounting for some amount of bandwidth variance
+ */
+videojs.Hls.prototype.selectPlaylist = function () {
+  var
+    player = this.player(),
+    effectiveBitrate,
+    sortedPlaylists = this.playlists.master.playlists.slice(),
+    bandwidthPlaylists = [],
+    i = sortedPlaylists.length,
+    variant,
+    bandwidthBestVariant,
+    resolutionBestVariant;
+
+  sortedPlaylists.sort(videojs.Hls.comparePlaylistBandwidth);
+
+  // filter out any variant that has greater effective bitrate
+  // than the current estimated bandwidth
+  while (i--) {
+    variant = sortedPlaylists[i];
+
+    // ignore playlists without bandwidth information
+    if (!variant.attributes || !variant.attributes.BANDWIDTH) {
+      continue;
+    }
 
 
-        player.hls.sourceBuffer.appendBuffer(tags[i].bytes, player);
+    effectiveBitrate = variant.attributes.BANDWIDTH * bandwidthVariance;
+
+    if (effectiveBitrate < player.hls.bandwidth) {
+      bandwidthPlaylists.push(variant);
+
+      // since the playlists are sorted in ascending order by
+      // bandwidth, the first viable variant is the best
+      if (!bandwidthBestVariant) {
+        bandwidthBestVariant = variant;
       }
       }
+    }
+  }
 
 
-      // we're done processing this segment
-      segmentBuffer.shift();
+  i = bandwidthPlaylists.length;
 
 
-      if (mediaIndex === playlist.segments.length) {
-        mediaSource.endOfStream();
+  // sort variants by resolution
+  bandwidthPlaylists.sort(videojs.Hls.comparePlaylistResolution);
+
+  // iterate through the bandwidth-filtered playlists and find
+  // best rendition by player dimension
+  while (i--) {
+    variant = bandwidthPlaylists[i];
+
+    // ignore playlists without resolution information
+    if (!variant.attributes ||
+        !variant.attributes.RESOLUTION ||
+        !variant.attributes.RESOLUTION.width ||
+        !variant.attributes.RESOLUTION.height) {
+      continue;
+    }
+
+    // since the playlists are sorted, the first variant that has
+    // dimensions less than or equal to the player size is the
+    // best
+    if (variant.attributes.RESOLUTION.width <= player.width() &&
+        variant.attributes.RESOLUTION.height <= player.height()) {
+      resolutionBestVariant = variant;
+      break;
+    }
+  }
+
+  // fallback chain of variants
+  return resolutionBestVariant || bandwidthBestVariant || sortedPlaylists[0];
+};
+
+/**
+ * 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.
+ * @param offset (optional) {number} the offset into the downloaded segment
+ * to seek to, in milliseconds
+ */
+videojs.Hls.prototype.fillBuffer = function(offset) {
+  var
+    self = this,
+    player = this.player(),
+    settings = player.options().hls || {},
+    buffered = player.buffered(),
+    bufferedTime = 0,
+    segment,
+    segmentUri,
+    startTime;
+
+  // if there is a request already in flight, do nothing
+  if (this.segmentXhr_) {
+    return;
+  }
+
+  // if no segments are available, do nothing
+  if (this.playlists.state === "HAVE_NOTHING" ||
+      !this.playlists.media().segments) {
+    return;
+  }
+
+  // if the video has finished downloading, stop trying to buffer
+  segment = this.playlists.media().segments[this.mediaIndex];
+  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 and we're not
+  // seeking, relax for awhile
+  if (typeof offset !== 'number' &&
+      bufferedTime >= videojs.Hls.GOAL_BUFFER_LENGTH) {
+    return;
+  }
+
+  // resolve the segment URL relative to the playlist
+  if (this.playlists.media().uri === this.src_) {
+    segmentUri = resolveUrl(this.src_, segment.uri);
+  } else {
+    segmentUri = resolveUrl(resolveUrl(this.src_, this.playlists.media().uri || ''),
+                            segment.uri);
+  }
+
+  startTime = +new Date();
+
+  // request the next segment
+  this.segmentXhr_ = videojs.Hls.xhr({
+    url: segmentUri,
+    responseType: 'arraybuffer',
+    withCredentials: settings.withCredentials
+  }, function(error, url) {
+    var tags;
+
+    // the segment request is no longer outstanding
+    self.segmentXhr_ = null;
+
+    if (error) {
+      // if a segment request times out, we may have better luck with another playlist
+      if (error === 'timeout') {
+        self.bandwidth = 1;
+        return self.playlists.media(self.selectPlaylist());
       }
       }
-    };
+      // otherwise, try jumping ahead to the next segment
+      self.error = {
+        status: this.status,
+        message: 'HLS segment request error at URL: ' + url,
+        code: (this.status >= 500) ? 4 : 2
+      };
 
 
-    // load the MediaSource into the player
-    mediaSource.addEventListener('sourceopen', function() {
-      // construct the video data buffer and set the appropriate MIME type
-      var
-        sourceBuffer = mediaSource.addSourceBuffer('video/flv; codecs="vp6,aac"'),
-        oldMediaPlaylist;
-
-      player.hls.sourceBuffer = sourceBuffer;
-      sourceBuffer.appendBuffer(segmentParser.getFlvHeader());
-
-      player.hls.mediaIndex = 0;
-      player.hls.playlists =
-        new videojs.Hls.PlaylistLoader(srcUrl, settings.withCredentials);
-      player.hls.playlists.on('loadedmetadata', function() {
-        oldMediaPlaylist = player.hls.playlists.media();
-
-        // periodically check if new data needs to be downloaded or
-        // buffered data should be appended to the source buffer
-        fillBuffer();
-        player.on('timeupdate', fillBuffer);
-        player.on('timeupdate', drainBuffer);
-        player.on('waiting', drainBuffer);
-
-        player.trigger('loadedmetadata');
-      });
-      player.hls.playlists.on('error', function() {
-        player.error(player.hls.playlists.error);
-      });
-      player.hls.playlists.on('loadedplaylist', function() {
-        var updatedPlaylist = player.hls.playlists.media();
-
-        if (!updatedPlaylist) {
-          // do nothing before an initial media playlist has been activated
-          return;
-        }
-
-        updateDuration(player.hls.playlists.media());
-        player.hls.mediaIndex = translateMediaIndex(player.hls.mediaIndex,
-                                                    oldMediaPlaylist,
-                                                    updatedPlaylist);
-        oldMediaPlaylist = updatedPlaylist;
-      });
-      player.hls.playlists.on('mediachange', function() {
-        player.trigger('mediachange');
-      });
+      // try moving on to the next segment
+      self.mediaIndex++;
+      return;
+    }
+
+    // stop processing if the request was aborted
+    if (!this.response) {
+      return;
+    }
+
+    // calculate the download bandwidth
+    self.segmentXhrTime = (+new Date()) - startTime;
+    self.bandwidth = (this.response.byteLength / player.hls.segmentXhrTime) * 8 * 1000;
+    self.bytesReceived += this.response.byteLength;
+
+    // transmux the segment data from MP2T to FLV
+    self.segmentParser_.parseSegmentBinaryData(new Uint8Array(this.response));
+    self.segmentParser_.flushTags();
+
+    // package up all the work to append the segment
+    // if the segment is the start of a timestamp discontinuity,
+    // we have to wait until the sourcebuffer is empty before
+    // aborting the source buffer processing
+    tags = [];
+    while (self.segmentParser_.tagsAvailable()) {
+      tags.push(self.segmentParser_.getNextTag());
+    }
+    self.segmentBuffer_.push({
+      mediaIndex: self.mediaIndex,
+      playlist: self.playlists.media(),
+      offset: offset,
+      tags: tags
     });
     });
-  };
+    self.drainBuffer();
 
 
-var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
+    self.mediaIndex++;
 
 
-videojs.Hls = videojs.Flash.extend({
-  init: function(player, options, ready) {
-    var
-      source = options.source,
-      settings = player.options();
+    // figure out what stream the next segment should be downloaded from
+    // with the updated bandwidth information
+    self.playlists.media(self.selectPlaylist());
+  });
+};
 
 
-    player.hls = this;
-    delete options.source;
-    options.swf = settings.flash.swf;
-    videojs.Flash.call(this, player, options, ready);
-    options.source = source;
-    this.bytesReceived = 0;
+videojs.Hls.prototype.drainBuffer = function(event) {
+  var
+    i = 0,
+    mediaIndex,
+    playlist,
+    offset,
+    tags,
+    segment,
+
+    ptsTime,
+    segmentOffset,
+    segmentBuffer = this.segmentBuffer_;
+
+  if (!segmentBuffer.length) {
+    return;
+  }
 
 
-    videojs.Hls.prototype.src.call(this, options.source && options.source.src);
+  mediaIndex = segmentBuffer[0].mediaIndex;
+  playlist = segmentBuffer[0].playlist;
+  offset = segmentBuffer[0].offset;
+  tags = segmentBuffer[0].tags;
+  segment = playlist.segments[mediaIndex];
+
+  event = event || {};
+  segmentOffset = videojs.Hls.getPlaylistDuration(playlist, 0, mediaIndex) * 1000;
+
+  // abort() clears any data queued in the source buffer so wait
+  // until it empties before calling it when a discontinuity is
+  // next in the buffer
+  if (segment.discontinuity) {
+    if (event.type !== 'waiting') {
+      return;
+    }
+    this.sourceBuffer.abort();
+    // tell the SWF where playback is continuing in the stitched timeline
+    this.el().vjs_setProperty('currentTime', segmentOffset * 0.001);
   }
   }
-});
+
+  // if we're refilling the buffer after a seek, scan through the muxed
+  // FLV tags until we find the one that is closest to the desired
+  // playback time
+  if (typeof offset === 'number') {
+    ptsTime = offset - segmentOffset + tags[0].pts;
+
+    while (tags[i].pts < ptsTime) {
+      i++;
+    }
+
+    // tell the SWF where we will be seeking to
+    this.el().vjs_setProperty('currentTime', (tags[i].pts - tags[0].pts + segmentOffset) * 0.001);
+
+    tags = tags.slice(i);
+
+    this.lastSeekedTime_ = null;
+  }
+
+  for (i = 0; i < tags.length; i++) {
+    // queue up the bytes to be appended to the SourceBuffer
+    // the queue gives control back to the browser between tags
+    // so that large segments don't cause a "hiccup" in playback
+
+    this.sourceBuffer.appendBuffer(tags[i].bytes, this.player());
+  }
+
+  // we're done processing this segment
+  segmentBuffer.shift();
+
+  if (mediaIndex === playlist.segments.length) {
+    this.mediaSource.endOfStream();
+  }
+};
 
 
 /**
 /**
  * Whether the browser has built-in HLS support.
  * Whether the browser has built-in HLS support.
@@ -625,43 +483,6 @@ videojs.Hls.supportsNativeHls = (function() {
     (/probably|maybe/).test(vndMpeg);
     (/probably|maybe/).test(vndMpeg);
 })();
 })();
 
 
-// the desired length of video to maintain in the buffer, in seconds
-videojs.Hls.GOAL_BUFFER_LENGTH = 30;
-
-videojs.Hls.prototype.src = function(src) {
-  var
-    player = this.player(),
-    self = this,
-    mediaSource,
-    source;
-
-  if (src) {
-    mediaSource = new videojs.MediaSource();
-    source = {
-      src: videojs.URL.createObjectURL(mediaSource),
-      type: "video/flv"
-    };
-    this.mediaSource = mediaSource;
-    initSource(player, mediaSource, src);
-    this.player().ready(function() {
-      // do nothing if the tech has been disposed already
-      // this can occur if someone sets the src in player.ready(), for instance
-      if (!self.el()) {
-        return;
-      }
-      self.el().vjs_src(source.src);
-    });
-  }
-};
-
-videojs.Hls.prototype.duration = function() {
-  var playlists = this.playlists;
-  if (playlists) {
-    return totalDuration(playlists.media());
-  }
-  return 0;
-};
-
 videojs.Hls.isSupported = function() {
 videojs.Hls.isSupported = function() {
   return !videojs.Hls.supportsNativeHls &&
   return !videojs.Hls.supportsNativeHls &&
     videojs.Flash.isSupported() &&
     videojs.Flash.isSupported() &&
@@ -669,89 +490,182 @@ videojs.Hls.isSupported = function() {
 };
 };
 
 
 videojs.Hls.canPlaySource = function(srcObj) {
 videojs.Hls.canPlaySource = function(srcObj) {
+  var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
   return mpegurlRE.test(srcObj.type);
   return mpegurlRE.test(srcObj.type);
 };
 };
 
 
 /**
 /**
- * Creates and sends an XMLHttpRequest.
- * @param options {string | object} if this argument is a string, it
- * is intrepreted as a URL and a simple GET request is
- * inititated. If it is an object, it should contain a `url`
- * property that indicates the URL to request and optionally a
- * `method` which is the type of HTTP request to send.
- * @param callback (optional) {function} a function to call when the
- * request completes. If the request was not successful, the first
- * argument will be falsey.
- * @return {object} the XMLHttpRequest that was initiated.
+ * Calculate the duration of a playlist from a given start index to a given
+ * end index.
+ * @param playlist {object} a media playlist object
+ * @param startIndex {number} an inclusive lower boundary for the playlist.
+ * Defaults to 0.
+ * @param endIndex {number} an exclusive upper boundary for the playlist.
+ * Defaults to playlist length.
+ * @return {number} the duration between the start index and end index.
  */
  */
-xhr = videojs.Hls.xhr = function(url, callback) {
-  var
-    options = {
-      method: 'GET',
-      timeout: 45 * 1000
-    },
-    request,
-    abortTimeout;
+videojs.Hls.getPlaylistDuration = function(playlist, startIndex, endIndex) {
+  var dur = 0,
+      segment,
+      i;
+
+  startIndex = startIndex || 0;
+  endIndex = endIndex !== undefined ? endIndex : (playlist.segments || []).length;
+  i = endIndex - 1;
+
+  for (; i >= startIndex; i--) {
+    segment = playlist.segments[i];
+    dur += segment.duration || playlist.targetDuration || 0;
+  }
+
+  return dur;
+};
 
 
-  if (typeof callback !== 'function') {
-    callback = function() {};
+/**
+ * Calculate the total duration for a playlist based on segment metadata.
+ * @param playlist {object} a media playlist object
+ * @return {number} the currently known duration, in seconds
+ */
+videojs.Hls.getPlaylistTotalDuration = function(playlist) {
+  if (!playlist) {
+    return 0;
+  }
+
+  // if present, use the duration specified in the playlist
+  if (playlist.totalDuration) {
+    return playlist.totalDuration;
   }
   }
 
 
-  if (typeof url === 'object') {
-    options = videojs.util.mergeOptions(options, url);
-    url = options.url;
+  // duration should be Infinity for live playlists
+  if (!playlist.endList) {
+    return window.Infinity;
   }
   }
 
 
-  request = new window.XMLHttpRequest();
-  request.open(options.method, url);
-  request.url = url;
+  return videojs.Hls.getPlaylistDuration(playlist);
+};
 
 
-  if (options.responseType) {
-    request.responseType = options.responseType;
+/**
+ * Determine the media index in one playlist that corresponds to a
+ * specified media index in another. This function can be used to
+ * calculate a new segment position when a playlist is reloaded or a
+ * variant playlist is becoming active.
+ * @param mediaIndex {number} the index into the original playlist
+ * to translate
+ * @param original {object} the playlist to translate the media
+ * index from
+ * @param update {object} the playlist to translate the media index
+ * to
+ * @param {number} the corresponding media index in the updated
+ * playlist
+ */
+videojs.Hls.translateMediaIndex = function(mediaIndex, original, update) {
+  var
+    i,
+    originalSegment;
+
+  // no segments have been loaded from the original playlist
+  if (mediaIndex === 0) {
+    return 0;
   }
   }
-  if (options.withCredentials) {
-    request.withCredentials = true;
+  if (!(update && update.segments)) {
+    // let the media index be zero when there are no segments defined
+    return 0;
   }
   }
-  if (options.timeout) {
-    if (request.timeout === 0) {
-      request.timeout = options.timeout;
-      request.ontimeout = function() {
-        request.timedout = true;
-      };
-    } else {
-      // polyfill XHR2 by aborting after the timeout
-      abortTimeout = window.setTimeout(function() {
-        if (request.readyState !== 4) {
-          request.timedout = true;
-          request.abort();
-        }
-      }, options.timeout);
+
+  // try to sync based on URI
+  i = update.segments.length;
+  originalSegment = original.segments[mediaIndex - 1];
+  while (i--) {
+    if (originalSegment.uri === update.segments[i].uri) {
+      return i + 1;
     }
     }
   }
   }
 
 
-  request.onreadystatechange = function() {
-    // wait until the request completes
-    if (this.readyState !== 4) {
-      return;
-    }
+  // sync on media sequence
+  return (original.mediaSequence + mediaIndex) - update.mediaSequence;
+};
 
 
-    // clear outstanding timeouts
-    window.clearTimeout(abortTimeout);
+/**
+ * TODO - Document this great feature.
+ *
+ * @param playlist
+ * @param time
+ * @returns int
+ */
+videojs.Hls.getMediaIndexByTime = function(playlist, time) {
+  var index, counter, timeRanges, currentSegmentRange;
+
+  timeRanges = [];
+  for (index = 0; index < playlist.segments.length; index++) {
+    currentSegmentRange = {};
+    currentSegmentRange.start = (index === 0) ? 0 : timeRanges[index - 1].end;
+    currentSegmentRange.end = currentSegmentRange.start + playlist.segments[index].duration;
+    timeRanges.push(currentSegmentRange);
+  }
 
 
-    // request timeout
-    if (request.timedout) {
-      return callback.call(this, 'timeout', url);
+  for (counter = 0; counter < timeRanges.length; counter++) {
+    if (time >= timeRanges[counter].start && time < timeRanges[counter].end) {
+      return counter;
     }
     }
+  }
 
 
-    // request aborted or errored
-    if (this.status >= 400 || this.status === 0) {
-      return callback.call(this, true, url);
-    }
+  return -1;
+};
+
+/**
+ * A comparator function to sort two playlist object by bandwidth.
+ * @param left {object} a media playlist object
+ * @param right {object} a media playlist object
+ * @return {number} Greater than zero if the bandwidth attribute of
+ * left is greater than the corresponding attribute of right. Less
+ * than zero if the bandwidth of right is greater than left and
+ * exactly zero if the two are equal.
+ */
+videojs.Hls.comparePlaylistBandwidth = function(left, right) {
+  var leftBandwidth, rightBandwidth;
+  if (left.attributes && left.attributes.BANDWIDTH) {
+    leftBandwidth = left.attributes.BANDWIDTH;
+  }
+  leftBandwidth = leftBandwidth || window.Number.MAX_VALUE;
+  if (right.attributes && right.attributes.BANDWIDTH) {
+    rightBandwidth = right.attributes.BANDWIDTH;
+  }
+  rightBandwidth = rightBandwidth || window.Number.MAX_VALUE;
 
 
-    return callback.call(this, false, url);
-  };
-  request.send(null);
-  return request;
+  return leftBandwidth - rightBandwidth;
+};
+
+/**
+ * A comparator function to sort two playlist object by resolution (width).
+ * @param left {object} a media playlist object
+ * @param right {object} a media playlist object
+ * @return {number} Greater than zero if the resolution.width attribute of
+ * left is greater than the corresponding attribute of right. Less
+ * than zero if the resolution.width of right is greater than left and
+ * exactly zero if the two are equal.
+ */
+videojs.Hls.comparePlaylistResolution = function(left, right) {
+  var leftWidth, rightWidth;
+
+  if (left.attributes && left.attributes.RESOLUTION && left.attributes.RESOLUTION.width) {
+    leftWidth = left.attributes.RESOLUTION.width;
+  }
+
+  leftWidth = leftWidth || window.Number.MAX_VALUE;
+
+  if (right.attributes && right.attributes.RESOLUTION && right.attributes.RESOLUTION.width) {
+    rightWidth = right.attributes.RESOLUTION.width;
+  }
+
+  rightWidth = rightWidth || window.Number.MAX_VALUE;
+
+  // NOTE - Fallback to bandwidth sort as appropriate in cases where multiple renditions
+  // have the same media dimensions/ resolution
+  if (leftWidth === rightWidth && left.attributes.BANDWIDTH && right.attributes.BANDWIDTH) {
+    return left.attributes.BANDWIDTH - right.attributes.BANDWIDTH;
+  } else {
+    return leftWidth - rightWidth;
+  }
 };
 };
 
 
 /**
 /**
@@ -793,7 +707,4 @@ resolveUrl = videojs.Hls.resolveUrl = function(basePath, path) {
   return result;
   return result;
 };
 };
 
 
-// Add HLS to the standard tech order
-videojs.options.techOrder.unshift('hls');
-
 })(window, window.videojs, document);
 })(window, window.videojs, document);

+(function(videojs){
+  /**
+   * Creates and sends an XMLHttpRequest.
+   * TODO - expose video.js core's XHR and use that instead
+   * 
+   * @param options {string | object} if this argument is a string, it
+   * is intrepreted as a URL and a simple GET request is
+   * inititated. If it is an object, it should contain a `url`
+   * property that indicates the URL to request and optionally a
+   * `method` which is the type of HTTP request to send.
+   * @param callback (optional) {function} a function to call when the
+   * request completes. If the request was not successful, the first
+   * argument will be falsey.
+   * @return {object} the XMLHttpRequest that was initiated.
+   */
+   videojs.Hls.xhr = function(url, callback) {
+    var
+      options = {
+        method: 'GET',
+        timeout: 45 * 1000
+      },
+      request,
+      abortTimeout;
+
+    if (typeof callback !== 'function') {
+      callback = function() {};
+    }
+
+    if (typeof url === 'object') {
+      options = videojs.util.mergeOptions(options, url);
+      url = options.url;
+    }
+
+    request = new window.XMLHttpRequest();
+    request.open(options.method, url);
+    request.url = url;
+
+    if (options.responseType) {
+      request.responseType = options.responseType;
+    }
+    if (options.withCredentials) {
+      request.withCredentials = true;
+    }
+    if (options.timeout) {
+      if (request.timeout === 0) {
+        request.timeout = options.timeout;
+        request.ontimeout = function() {
+          request.timedout = true;
+        };
+      } else {
+        // polyfill XHR2 by aborting after the timeout
+        abortTimeout = window.setTimeout(function() {
+          if (request.readyState !== 4) {
+            request.timedout = true;
+            request.abort();
+          }
+        }, options.timeout);
+      }
+    }
+
+    request.onreadystatechange = function() {
+      // wait until the request completes
+      if (this.readyState !== 4) {
+        return;
+      }
+
+      // clear outstanding timeouts
+      window.clearTimeout(abortTimeout);
+
+      // request timeout
+      if (request.timedout) {
+        return callback.call(this, 'timeout', url);
+      }
+
+      // request aborted or errored
+      if (this.status >= 400 || this.status === 0) {
+        return callback.call(this, true, url);
+      }
+
+      return callback.call(this, false, url);
+    };
+    request.send(null);
+    return request;
+  };
+
+})(window.videojs);
\ No newline at end of file

@@ -79,6 +79,7 @@ module.exports = function(config) {
       '../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js',
       '../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js',
       '../test/karma-qunit-shim.js',
       '../test/karma-qunit-shim.js',
       '../src/videojs-hls.js',
       '../src/videojs-hls.js',
+      '../src/xhr.js',
       '../src/flv-tag.js',
       '../src/flv-tag.js',
       '../src/exp-golomb.js',
       '../src/exp-golomb.js',
       '../src/h264-stream.js',
       '../src/h264-stream.js',

@@ -43,6 +43,7 @@ module.exports = function(config) {
       '../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js',
       '../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js',
       '../test/karma-qunit-shim.js',
       '../test/karma-qunit-shim.js',
       '../src/videojs-hls.js',
       '../src/videojs-hls.js',
+      '../src/xhr.js',
       '../src/flv-tag.js',
       '../src/flv-tag.js',
       '../src/exp-golomb.js',
       '../src/exp-golomb.js',
       '../src/h264-stream.js',
       '../src/h264-stream.js',

@@ -123,6 +123,7 @@
   <script src="../../node_modules/video.js/dist/video-js/video.js"></script>
   <script src="../../node_modules/video.js/dist/video-js/video.js"></script>
   <script src="../../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"></script>
   <script src="../../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"></script>
   <script src="../../src/videojs-hls.js"></script>
   <script src="../../src/videojs-hls.js"></script>
+  <script src="../../src/xhr.js"></script>
   <script src="../../src/stream.js"></script>
   <script src="../../src/stream.js"></script>
   <script src="../../src/m3u8/m3u8-parser.js"></script>
   <script src="../../src/m3u8/m3u8-parser.js"></script>
   <script src="../../src/playlist-loader.js"></script>
   <script src="../../src/playlist-loader.js"></script>

@@ -20,6 +20,7 @@
 
 
   <!-- HLS plugin -->
   <!-- HLS plugin -->
   <script src="../src/videojs-hls.js"></script>
   <script src="../src/videojs-hls.js"></script>
+  <script src="../src/xhr.js"></script>
   <script src="../src/flv-tag.js"></script>
   <script src="../src/flv-tag.js"></script>
   <script src="../src/exp-golomb.js"></script>
   <script src="../src/exp-golomb.js"></script>
   <script src="../src/h264-stream.js"></script>
   <script src="../src/h264-stream.js"></script>