Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
03e43447 by David LaPalomento
Options

Switch MediaSource implementations based on browser capabilities 

Use native MediaSources for browsers that support them (currently Chrome) and fall back to Flash for everyone else. Seeking doesn't work as well in Flash as it did previously because the improved duration calculations have not been migrated yet but otherwise things seem to work.
1 parent fc9206bc
Inline Side-by-side
Showing 2 changed files with 40 additions and 36 deletions
......@@ -9,24 +9,27 @@
<!-- video.js -->
<script src="node_modules/video.js/dist/video.js"></script>
<!-- transmuxing -->
<script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/stream.js"></script>
<script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/mp4-generator.js"></script>
<script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/transmuxer.js"></script>
<script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/flv-tag.js"></script>
<script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/exp-golomb.js"></script>
<script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/h264-extradata.js"></script>
<script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/h264-stream.js"></script>
<script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/aac-stream.js"></script>
<script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/metadata-stream.js"></script>
<script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/segment-parser.js"></script>
<!-- Media Sources plugin -->
<script src="node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"></script>
<!-- HLS plugin -->
<script src="src/videojs-hls.js"></script>
<!-- segment handling -->
<!-- m3u8 handling -->
<script src="src/xhr.js"></script>
<script src="src/flv-tag.js"></script>
<script src="src/stream.js"></script>
<script src="src/exp-golomb.js"></script>
<script src="src/h264-extradata.js"></script>
<script src="src/h264-stream.js"></script>
<script src="src/aac-stream.js"></script>
<script src="src/metadata-stream.js"></script>
<script src="src/segment-parser.js"></script>
<!-- m3u8 handling -->
<script src="src/m3u8/m3u8-parser.js"></script>
<script src="src/playlist.js"></script>
<script src="src/playlist-loader.js"></script>
......@@ -34,9 +37,6 @@
<script src="node_modules/pkcs7/dist/pkcs7.unpad.js"></script>
<script src="src/decrypter.js"></script>
<script src="../src/mp4-generator.js"></script>
<script src="../src/transmuxer.js"></script>
<script src="src/bin-utils.js"></script>
<!-- example MPEG2-TS segments -->
......
......@@ -74,18 +74,32 @@ videojs.Hls = videojs.extends(Component, {
});
// add HLS as a source handler
//videojs.getComponent('Flash').registerSourceHandler({
videojs.getComponent('Html5').registerSourceHandler({
canHandleSource: function(srcObj) {
var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
return mpegurlRE.test(srcObj.type);
},
handleSource: function(source, tech) {
tech.hls = new videojs.Hls(tech, source);
tech.hls.src(source.src);
return tech.hls;
}
});
if (videojs.MediaSource.supportsNativeMediaSources()) {
videojs.getComponent('Html5').registerSourceHandler({
canHandleSource: function(srcObj) {
var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
return mpegurlRE.test(srcObj.type);
},
handleSource: function(source, tech) {
tech.hls = new videojs.Hls(tech, source);
tech.hls.src(source.src);
return tech.hls;
}
});
} else {
videojs.getComponent('Flash').registerSourceHandler({
canHandleSource: function(srcObj) {
var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
return mpegurlRE.test(srcObj.type);
},
handleSource: function(source, tech) {
tech.hls = new videojs.Hls(tech, source);
tech.hls.src(source.src);
return tech.hls;
}
});
}
// the desired length of video to maintain in the buffer, in seconds
videojs.Hls.GOAL_BUFFER_LENGTH = 30;
......@@ -100,11 +114,10 @@ videojs.Hls.prototype.src = function(src) {
this.mediaSource = new videojs.MediaSource();
this.segmentBuffer_ = [];
this.segmentParser_ = new videojs.Hls.SegmentParser();
// if the stream contains ID3 metadata, expose that as a metadata
// text track
this.setupMetadataCueTranslation_();
//this.setupMetadataCueTranslation_();
// load the MediaSource into the player
this.mediaSource.addEventListener('sourceopen', this.handleSourceOpen.bind(this));
......@@ -256,8 +269,6 @@ videojs.Hls.prototype.handleSourceOpen = function() {
if (this.tech_.autoplay()) {
this.play();
}
//sourceBuffer.appendBuffer(this.segmentParser_.getFlvHeader());
};
// register event listeners to transform in-band metadata events into
......@@ -840,7 +851,6 @@ videojs.Hls.prototype.drainBuffer = function(event) {
mediaIndex,
playlist,
offset,
tags,
bytes,
segment,
decrypter,
......@@ -912,12 +922,6 @@ videojs.Hls.prototype.drainBuffer = function(event) {
event = event || {};
// // transmux the segment data from MP2T to FLV
// this.segmentParser_.parseSegmentBinaryData(bytes);
// this.segmentParser_.flushTags();
// tags = [];
// if (this.segmentParser_.tagsAvailable()) {
// // record PTS information for the segment so we can calculate
// // accurate durations and seek reliably
......