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.
Showing
2 changed files
with
31 additions
and
27 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,8 +74,8 @@ videojs.Hls = videojs.extends(Component, { | ... | @@ -74,8 +74,8 @@ 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); |
... | @@ -85,7 +85,21 @@ videojs.getComponent('Html5').registerSourceHandler({ | ... | @@ -85,7 +85,21 @@ videojs.getComponent('Html5').registerSourceHandler({ |
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 | ... | ... |
-
Please register or sign in to post a comment