Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
b22f4c3f by Steve Heffernan
Options

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

1 parent 74ac9838
Inline Side-by-side
Showing 7 changed files with 629 additions and 627 deletions
......@@ -16,6 +16,7 @@
<script src="src/videojs-hls.js"></script>
<!-- segment handling -->
<script src="src/xhr.js"></script>
<script src="src/flv-tag.js"></script>
<script src="src/exp-golomb.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.
*/
......@@ -10,206 +9,28 @@
'use strict';
var
// a fudge factor to apply to advertised playlist bitrates to account for
// temporary flucations in client bandwidth
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
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
if (!this.el() || !this.el().vjs_getProperty) {
......@@ -217,8 +38,7 @@ var
}
return this.el().vjs_getProperty('currentTime');
};
player.hls.setCurrentTime = function(currentTime) {
this.setCurrentTime = function(currentTime) {
if (!(this.playlists && this.playlists.media())) {
// return immediately if the metadata is not ready yet
return 0;
......@@ -226,384 +46,422 @@ var
// save the seek target so currentTime can report it correctly
// while the seek is pending
lastSeekedTime = currentTime;
this.lastSeekedTime_ = currentTime;
// 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
this.sourceBuffer.abort();
// cancel outstanding requests and buffer appends
if (segmentXhr) {
segmentXhr.abort();
if (this.segmentXhr_) {
this.segmentXhr_.abort();
}
// clear out any buffered segments
segmentBuffer = [];
this.segmentBuffer_ = [];
// 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;
}
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.
......@@ -625,43 +483,6 @@ videojs.Hls.supportsNativeHls = (function() {
(/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() {
return !videojs.Hls.supportsNativeHls &&
videojs.Flash.isSupported() &&
......@@ -669,89 +490,182 @@ videojs.Hls.isSupported = function() {
};
videojs.Hls.canPlaySource = function(srcObj) {
var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
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;
};
// Add HLS to the standard tech order
videojs.options.techOrder.unshift('hls');
})(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',
'../test/karma-qunit-shim.js',
'../src/videojs-hls.js',
'../src/xhr.js',
'../src/flv-tag.js',
'../src/exp-golomb.js',
'../src/h264-stream.js',
......
......@@ -43,6 +43,7 @@ module.exports = function(config) {
'../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js',
'../test/karma-qunit-shim.js',
'../src/videojs-hls.js',
'../src/xhr.js',
'../src/flv-tag.js',
'../src/exp-golomb.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/videojs-contrib-media-sources/src/videojs-media-sources.js"></script>
<script src="../../src/videojs-hls.js"></script>
<script src="../../src/xhr.js"></script>
<script src="../../src/stream.js"></script>
<script src="../../src/m3u8/m3u8-parser.js"></script>
<script src="../../src/playlist-loader.js"></script>
......
......@@ -20,6 +20,7 @@
<!-- HLS plugin -->
<script src="../src/videojs-hls.js"></script>
<script src="../src/xhr.js"></script>
<script src="../src/flv-tag.js"></script>
<script src="../src/exp-golomb.js"></script>
<script src="../src/h264-stream.js"></script>
......