e13e2ae8 by Gary Katsevman

initial plugin->tech conversion

1 parent fafd0563
......@@ -7,7 +7,7 @@
<link href="node_modules/video.js/dist/video-js/video-js.css" rel="stylesheet">
<!-- video.js -->
<script src="node_modules/video.js/dist/video-js/video.js"></script>
<script src="node_modules/video.js/dist/video-js/video.dev.js"></script>
<!-- Media Sources plugin -->
<script src="node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"></script>
......@@ -31,7 +31,7 @@
<!-- bipbop -->
<!-- <script src="test/tsSegment.js"></script> -->
<!-- bunnies -->
<script src="test/tsSegment-bc.js"></script>
<!--<script src="test/tsSegment-bc.js"></script>-->
<style>
body {
......@@ -63,10 +63,12 @@
<script>
videojs.options.flash.swf = 'node_modules/video.js/dist/video-js/video-js.swf';
// initialize the player
var player = videojs('video');
var player = videojs('video', {
techOrder: ['hls']
});
// initialize the plugin
player.hls();
//player.hls()
</script>
</body>
</html>
......
......@@ -8,7 +8,7 @@
(function(window) {
var
FlvTag = window.videojs.hls.FlvTag,
FlvTag = window.videojs.Hls.FlvTag,
adtsSampleingRates = [
96000, 88200,
64000, 48000,
......@@ -17,7 +17,7 @@ var
16000, 12000
];
window.videojs.hls.AacStream = function() {
window.videojs.Hls.AacStream = function() {
var
next_pts, // :uint
pts_offset, // :int
......
......@@ -29,5 +29,5 @@
}
};
window.videojs.hls.utils = module;
window.videojs.Hls.utils = module;
})(this);
......
......@@ -4,7 +4,7 @@
* Parser for exponential Golomb codes, a variable-bitwidth number encoding
* scheme used by h264.
*/
window.videojs.hls.ExpGolomb = function(workingData) {
window.videojs.Hls.ExpGolomb = function(workingData) {
var
// the number of bytes left to examine in workingData
workingBytesAvailable = workingData.byteLength,
......
(function(window) {
window.videojs = window.videojs || {};
window.videojs.hls = window.videojs.hls || {};
window.videojs.Hls = window.videojs.Hls || {};
var hls = window.videojs.hls;
var hls = window.videojs.Hls;
// (type:uint, extraData:Boolean = false) extends ByteArray
hls.FlvTag = function(type, extraData) {
......
......@@ -8,8 +8,8 @@
(function(window) {
var
ExpGolomb = window.videojs.hls.ExpGolomb,
FlvTag = window.videojs.hls.FlvTag,
ExpGolomb = window.videojs.Hls.ExpGolomb,
FlvTag = window.videojs.Hls.FlvTag,
H264ExtraData = function() {
this.sps = []; // :Array
......@@ -234,7 +234,7 @@
* an h264 stream. Exactly one byte.
*/
// incomplete, see Table 7.1 of ITU-T H.264 for 12-32
window.videojs.hls.NALUnitType = NALUnitType = {
window.videojs.Hls.NALUnitType = NALUnitType = {
unspecified: 0,
slice_layer_without_partitioning_rbsp_non_idr: 1,
slice_data_partition_a_layer_rbsp: 2,
......@@ -249,7 +249,7 @@
end_of_stream_rbsp: 11
};
window.videojs.hls.H264Stream = function() {
window.videojs.Hls.H264Stream = function() {
var
next_pts, // :uint;
next_dts, // :uint;
......
......@@ -32,7 +32,7 @@
}
return result;
},
Stream = videojs.hls.Stream,
Stream = videojs.Hls.Stream,
LineStream,
ParseStream,
Parser;
......
......@@ -5,8 +5,8 @@
(function(window, videojs) {
'use strict';
var
resolveUrl = videojs.hls.resolveUrl,
xhr = videojs.hls.xhr,
resolveUrl = videojs.Hls.resolveUrl,
xhr = videojs.Hls.xhr,
/**
* Returns a new master playlist that is the result of merging an
......@@ -231,7 +231,7 @@
return loader.trigger('loadedmetadata');
});
};
PlaylistLoader.prototype = new videojs.hls.Stream();
PlaylistLoader.prototype = new videojs.Hls.Stream();
videojs.hls.PlaylistLoader = PlaylistLoader;
videojs.Hls.PlaylistLoader = PlaylistLoader;
})(window, window.videojs);
......
(function(window) {
var
videojs = window.videojs,
FlvTag = videojs.hls.FlvTag,
H264Stream = videojs.hls.H264Stream,
AacStream = videojs.hls.AacStream,
FlvTag = videojs.Hls.FlvTag,
H264Stream = videojs.Hls.H264Stream,
AacStream = videojs.Hls.AacStream,
MP2T_PACKET_LENGTH,
STREAM_TYPES;
......@@ -11,7 +11,7 @@
* An object that incrementally transmuxes MPEG2 Trasport Stream
* chunks into an FLV.
*/
videojs.hls.SegmentParser = function() {
videojs.Hls.SegmentParser = function() {
var
self = this,
parseTSPacket,
......@@ -432,8 +432,8 @@
};
// MPEG2-TS constants
videojs.hls.SegmentParser.MP2T_PACKET_LENGTH = MP2T_PACKET_LENGTH = 188;
videojs.hls.SegmentParser.STREAM_TYPES = STREAM_TYPES = {
videojs.Hls.SegmentParser.MP2T_PACKET_LENGTH = MP2T_PACKET_LENGTH = 188;
videojs.Hls.SegmentParser.STREAM_TYPES = STREAM_TYPES = {
h264: 0x1b,
adts: 0x0f
};
......
......@@ -65,5 +65,5 @@
});
};
videojs.hls.Stream = Stream;
videojs.Hls.Stream = Stream;
})(window.videojs);
......
......@@ -8,28 +8,6 @@
(function(window, videojs, document, undefined) {
videojs.hls = {
/**
* Whether the browser has built-in HLS support.
*/
supportsNativeHls: (function() {
var
video = document.createElement('video'),
xMpegUrl,
vndMpeg;
// native HLS is definitely not supported if HTML5 video isn't
if (!videojs.Html5.isSupported()) {
return false;
}
xMpegUrl = video.canPlayType('application/x-mpegURL');
vndMpeg = video.canPlayType('application/vnd.apple.mpegURL');
return (/probably|maybe/).test(xMpegUrl) ||
(/probably|maybe/).test(vndMpeg);
})()
};
var
// the desired length of video to maintain in the buffer, in seconds
......@@ -95,60 +73,7 @@ var
}
},
/**
* 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.
*/
xhr = videojs.hls.xhr = function(url, callback) {
var
options = {
method: 'GET'
},
request;
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);
if (options.responseType) {
request.responseType = options.responseType;
}
if (options.withCredentials) {
request.withCredentials = true;
}
request.onreadystatechange = function() {
// wait until the request completes
if (this.readyState !== 4) {
return;
}
// request error
if (this.status >= 400 || this.status === 0) {
return callback.call(this, true, url);
}
return callback.call(this, false, url);
};
request.send(null);
return request;
},
xhr,
/**
* TODO - Document this great feature.
......@@ -247,44 +172,7 @@ var
return duration;
},
/**
* Constructs a new URI by interpreting a path relative to another
* URI.
* @param basePath {string} a relative or absolute URI
* @param path {string} a path part to combine with the base
* @return {string} a URI that is equivalent to composing `base`
* with `path`
* @see http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
*/
resolveUrl = videojs.hls.resolveUrl = function(basePath, path) {
// use the base element to get the browser to handle URI resolution
var
oldBase = document.querySelector('base'),
docHead = document.querySelector('head'),
a = document.createElement('a'),
base = oldBase,
oldHref,
result;
// prep the document
if (oldBase) {
oldHref = oldBase.href;
} else {
base = docHead.appendChild(document.createElement('base'));
}
base.href = basePath;
a.href = path;
result = a.href;
// clean up
if (oldBase) {
oldBase.href = oldHref;
} else {
docHead.removeChild(base);
}
return result;
},
resolveUrl,
/**
* Initializes the HLS plugin.
......@@ -293,7 +181,7 @@ var
init = function(options) {
var
mediaSource = new videojs.MediaSource(),
segmentParser = new videojs.hls.SegmentParser(),
segmentParser = new videojs.Hls.SegmentParser(),
player = this,
srcUrl,
......@@ -303,7 +191,7 @@ var
updateDuration;
// if the video element supports HLS natively, do nothing
if (videojs.hls.supportsNativeHls) {
if (videojs.Hls.supportsNativeHls) {
return;
}
......@@ -346,13 +234,13 @@ var
}
// do nothing if the source is handled by one of the standard techs
for (j in player.options().techOrder) {
techName = player.options().techOrder[j];
techName = techName[0].toUpperCase() + techName.substring(1);
if (videojs[techName].canPlaySource({ type: sources[i].type })) {
return;
}
}
//for (j in player.options().techOrder) {
//techname = player.options().techorder[j];
//techname = techname[0].touppercase() + techname.substring(1);
//if (videojs[techname].canplaysource({ type: sources[i].type })) {
//return;
//}
//}
// use the plugin if the MIME type specifies HLS
if ((/application\/x-mpegURL/).test(sources[i].type) ||
......@@ -638,28 +526,158 @@ var
oldMediaPlaylist = updatedPlaylist;
});
});
player.src([{
src: videojs.URL.createObjectURL(mediaSource),
type: "video/flv"
}]);
if (player.options().autoplay) {
player.play();
}
//player.src([{
//src: videojs.URL.createObjectURL(mediaSource),
//type: "video/flv"
//}]);
//if (player.options().autoplay) {
//player.play();
//}
};
videojs.plugin('hls', function() {
if (typeof Uint8Array === 'undefined') {
var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
videojs.Hls = videojs.Flash.extend({
init: function(player, options, ready) {
videojs.Flash.call(this, player, options, ready);
player.hls = {};
this.ready(function() {
console.log('ready!');
//init.call(player, options);
});
}
});
//for (var prop in videojs.Flash) {
//videojs.Hls[prop] = videojs.Flash[prop];
//}
//for (prop in videojs.Flash.prototype) {
//videojs.Hls.prototype[prop] = videojs.Flash[prop];
//}
videojs.Hls.isSupported = function() {
return videojs.Flash.isSupported() && videojs.MediaSource;
}
videojs.Hls.canPlaySource = function(srcObj) {
return mpegurlRE.test(srcObj.type) || videojs.Flash.canPlaySource.call(this, srcObj);
};
videojs.Hls.supportsNativeHls = (function() {
var
video = document.createElement('video'),
xMpegUrl,
vndMpeg;
// native HLS is definitely not supported if HTML5 video isn't
if (!videojs.Html5.isSupported()) {
return false;
}
xMpegUrl = video.canPlayType('application/x-mpegURL');
vndMpeg = video.canPlayType('application/vnd.apple.mpegURL');
return (/probably|maybe/).test(xMpegUrl) ||
(/probably|maybe/).test(vndMpeg);
})();
/**
* 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.
*/
xhr = videojs.Hls.xhr = function(url, callback) {
var
options = {
method: 'GET'
},
request;
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);
if (options.responseType) {
request.responseType = options.responseType;
}
if (options.withCredentials) {
request.withCredentials = true;
}
request.onreadystatechange = function() {
// wait until the request completes
if (this.readyState !== 4) {
return;
}
var initialize = function() {
return function() {
this.hls = initialize();
init.apply(this, arguments);
};
// request error
if (this.status >= 400 || this.status === 0) {
return callback.call(this, true, url);
}
return callback.call(this, false, url);
};
initialize().apply(this, arguments);
});
request.send(null);
return request;
};
/**
* Constructs a new URI by interpreting a path relative to another
* URI.
* @param basePath {string} a relative or absolute URI
* @param path {string} a path part to combine with the base
* @return {string} a URI that is equivalent to composing `base`
* with `path`
* @see http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
*/
resolveUrl = videojs.Hls.resolveUrl = function(basePath, path) {
// use the base element to get the browser to handle URI resolution
var
oldBase = document.querySelector('base'),
docHead = document.querySelector('head'),
a = document.createElement('a'),
base = oldBase,
oldHref,
result;
// prep the document
if (oldBase) {
oldHref = oldBase.href;
} else {
base = docHead.appendChild(document.createElement('base'));
}
base.href = basePath;
a.href = path;
result = a.href;
// clean up
if (oldBase) {
oldBase.href = oldHref;
} else {
docHead.removeChild(base);
}
return result;
};
//videojs.Hls.onReady = videojs.Flash.onReady;
//videojs.Hls.onEvent = videojs.Flash.onEvent;
//videojs.Hls.onError = videojs.Flash.onError;
})(window, window.videojs, document);
......