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 @@ ...@@ -9,24 +9,27 @@
9 <!-- video.js --> 9 <!-- video.js -->
10 <script src="node_modules/video.js/dist/video.js"></script> 10 <script src="node_modules/video.js/dist/video.js"></script>
11 11
12 <!-- transmuxing -->
13 <script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/stream.js"></script>
14 <script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/mp4-generator.js"></script>
15 <script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/transmuxer.js"></script>
16 <script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/flv-tag.js"></script>
17 <script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/exp-golomb.js"></script>
18 <script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/h264-extradata.js"></script>
19 <script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/h264-stream.js"></script>
20 <script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/aac-stream.js"></script>
21 <script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/metadata-stream.js"></script>
22 <script src="node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/segment-parser.js"></script>
23
12 <!-- Media Sources plugin --> 24 <!-- Media Sources plugin -->
13 <script src="node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"></script> 25 <script src="node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"></script>
14 26
15 <!-- HLS plugin --> 27 <!-- HLS plugin -->
16 <script src="src/videojs-hls.js"></script> 28 <script src="src/videojs-hls.js"></script>
17 29
18 <!-- segment handling --> 30 <!-- m3u8 handling -->
19 <script src="src/xhr.js"></script> 31 <script src="src/xhr.js"></script>
20 <script src="src/flv-tag.js"></script>
21 <script src="src/stream.js"></script> 32 <script src="src/stream.js"></script>
22 <script src="src/exp-golomb.js"></script>
23 <script src="src/h264-extradata.js"></script>
24 <script src="src/h264-stream.js"></script>
25 <script src="src/aac-stream.js"></script>
26 <script src="src/metadata-stream.js"></script>
27 <script src="src/segment-parser.js"></script>
28
29 <!-- m3u8 handling -->
30 <script src="src/m3u8/m3u8-parser.js"></script> 33 <script src="src/m3u8/m3u8-parser.js"></script>
31 <script src="src/playlist.js"></script> 34 <script src="src/playlist.js"></script>
32 <script src="src/playlist-loader.js"></script> 35 <script src="src/playlist-loader.js"></script>
...@@ -34,9 +37,6 @@ ...@@ -34,9 +37,6 @@
34 <script src="node_modules/pkcs7/dist/pkcs7.unpad.js"></script> 37 <script src="node_modules/pkcs7/dist/pkcs7.unpad.js"></script>
35 <script src="src/decrypter.js"></script> 38 <script src="src/decrypter.js"></script>
36 39
37 <script src="../src/mp4-generator.js"></script>
38 <script src="../src/transmuxer.js"></script>
39
40 <script src="src/bin-utils.js"></script> 40 <script src="src/bin-utils.js"></script>
41 41
42 <!-- example MPEG2-TS segments --> 42 <!-- example MPEG2-TS segments -->
......
...@@ -74,18 +74,32 @@ videojs.Hls = videojs.extends(Component, { ...@@ -74,18 +74,32 @@ videojs.Hls = videojs.extends(Component, {
74 }); 74 });
75 75
76 // add HLS as a source handler 76 // add HLS as a source handler
77 //videojs.getComponent('Flash').registerSourceHandler({ 77 if (videojs.MediaSource.supportsNativeMediaSources()) {
78 videojs.getComponent('Html5').registerSourceHandler({ 78 videojs.getComponent('Html5').registerSourceHandler({
79 canHandleSource: function(srcObj) { 79 canHandleSource: function(srcObj) {
80 var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i; 80 var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
81 return mpegurlRE.test(srcObj.type); 81 return mpegurlRE.test(srcObj.type);
82 }, 82 },
83 handleSource: function(source, tech) { 83 handleSource: function(source, tech) {
84 tech.hls = new videojs.Hls(tech, source); 84 tech.hls = new videojs.Hls(tech, source);
85 tech.hls.src(source.src); 85 tech.hls.src(source.src);
86 return tech.hls; 86 return tech.hls;
87 } 87 }
88 }); 88 });
89 } else {
90 videojs.getComponent('Flash').registerSourceHandler({
91 canHandleSource: function(srcObj) {
92 var mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;
93 return mpegurlRE.test(srcObj.type);
94 },
95 handleSource: function(source, tech) {
96 tech.hls = new videojs.Hls(tech, source);
97 tech.hls.src(source.src);
98 return tech.hls;
99 }
100 });
101 }
102
89 103
90 // the desired length of video to maintain in the buffer, in seconds 104 // the desired length of video to maintain in the buffer, in seconds
91 videojs.Hls.GOAL_BUFFER_LENGTH = 30; 105 videojs.Hls.GOAL_BUFFER_LENGTH = 30;
...@@ -100,11 +114,10 @@ videojs.Hls.prototype.src = function(src) { ...@@ -100,11 +114,10 @@ videojs.Hls.prototype.src = function(src) {
100 114
101 this.mediaSource = new videojs.MediaSource(); 115 this.mediaSource = new videojs.MediaSource();
102 this.segmentBuffer_ = []; 116 this.segmentBuffer_ = [];
103 this.segmentParser_ = new videojs.Hls.SegmentParser();
104 117
105 // if the stream contains ID3 metadata, expose that as a metadata 118 // if the stream contains ID3 metadata, expose that as a metadata
106 // text track 119 // text track
107 this.setupMetadataCueTranslation_(); 120 //this.setupMetadataCueTranslation_();
108 121
109 // load the MediaSource into the player 122 // load the MediaSource into the player
110 this.mediaSource.addEventListener('sourceopen', this.handleSourceOpen.bind(this)); 123 this.mediaSource.addEventListener('sourceopen', this.handleSourceOpen.bind(this));
...@@ -256,8 +269,6 @@ videojs.Hls.prototype.handleSourceOpen = function() { ...@@ -256,8 +269,6 @@ videojs.Hls.prototype.handleSourceOpen = function() {
256 if (this.tech_.autoplay()) { 269 if (this.tech_.autoplay()) {
257 this.play(); 270 this.play();
258 } 271 }
259
260 //sourceBuffer.appendBuffer(this.segmentParser_.getFlvHeader());
261 }; 272 };
262 273
263 // register event listeners to transform in-band metadata events into 274 // register event listeners to transform in-band metadata events into
...@@ -840,7 +851,6 @@ videojs.Hls.prototype.drainBuffer = function(event) { ...@@ -840,7 +851,6 @@ videojs.Hls.prototype.drainBuffer = function(event) {
840 mediaIndex, 851 mediaIndex,
841 playlist, 852 playlist,
842 offset, 853 offset,
843 tags,
844 bytes, 854 bytes,
845 segment, 855 segment,
846 decrypter, 856 decrypter,
...@@ -912,12 +922,6 @@ videojs.Hls.prototype.drainBuffer = function(event) { ...@@ -912,12 +922,6 @@ videojs.Hls.prototype.drainBuffer = function(event) {
912 922
913 event = event || {}; 923 event = event || {};
914 924
915 // // transmux the segment data from MP2T to FLV
916 // this.segmentParser_.parseSegmentBinaryData(bytes);
917 // this.segmentParser_.flushTags();
918
919 // tags = [];
920
921 // if (this.segmentParser_.tagsAvailable()) { 925 // if (this.segmentParser_.tagsAvailable()) {
922 // // record PTS information for the segment so we can calculate 926 // // record PTS information for the segment so we can calculate
923 // // accurate durations and seek reliably 927 // // accurate durations and seek reliably
......