Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
3b271282 by David LaPalomento
Options

Merge pull request #2 from dlapalomento/hotfix/deps-cleanup 

Use npm to manage dependencies
2 parents f8abd1d7 491a0983
Inline Side-by-side
Showing 7 changed files with 80 additions and 120 deletions
1 Copyright 2013 Brightcove
2
3 Licensed under the Apache License, Version 2.0 (the "License");
4 you may not use this file except in compliance with the License.
5 You may obtain a copy of the License at
6
7 http://www.apache.org/licenses/LICENSE-2.0
8
9 Unless required by applicable law or agreed to in writing, software
10 distributed under the License is distributed on an "AS IS" BASIS,
11 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 See the License for the specific language governing permissions and
13 limitations under the License.
...\ No newline at end of file ...\ No newline at end of file
...@@ -5,14 +5,14 @@ A video.js plugin that plays HLS video on platforms that don't support it but ha ...@@ -5,14 +5,14 @@ A video.js plugin that plays HLS video on platforms that don't support it but ha
5 ## Getting Started 5 ## Getting Started
6 Download the [production version][min] or the [development version][max]. 6 Download the [production version][min] or the [development version][max].
7 7
8 [min]: https://raw.bithub.com/dlapalomento/video-js-hls/master/dist/video-js-hls.min.js 8 [min]: https://raw.bithub.com/dlapalomento/video-js-hls/master/dist/videojs-hls.min.js
9 [max]: https://raw.bithub.com/dlapalomento/video-js-hls/master/dist/video-js-hls.js 9 [max]: https://raw.bithub.com/dlapalomento/video-js-hls/master/dist/videojs-hls.js
10 10
11 In your web page: 11 In your web page:
12 12
13 ```html 13 ```html
14 <script src="video.js"></script> 14 <script src="video.js"></script>
15 <script src="dist/video-js-hls.min.js"></script> 15 <script src="dist/videojs-hls.min.js"></script>
16 <script> 16 <script>
17 var player = videojs('video'); 17 var player = videojs('video');
18 player.hls(); 18 player.hls();
......
...@@ -4,40 +4,13 @@ ...@@ -4,40 +4,13 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>video.js HLS Plugin Example</title> 5 <title>video.js HLS Plugin Example</title>
6 6
7 <link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet"> 7 <link href="node_modules/video.js/video-js.css" rel="stylesheet">
8 8
9 <!-- video.js --> 9 <!-- video.js -->
10 <script src="libs/video-js/src/js/core.js"></script> 10 <script src="node_modules/video.js/video.dev.js"></script>
11 <script src="libs/video-js/src/js/core-object.js"></script>
12 <script src="libs/video-js/src/js/events.js"></script>
13 <script src="libs/video-js/src/js/lib.js"></script>
14 <script src="libs/video-js/src/js/component.js"></script>
15 <script src="libs/video-js/src/js/button.js"></script>
16 <script src="libs/video-js/src/js/slider.js"></script>
17 <script src="libs/video-js/src/js/menu.js"></script>
18 <script src="libs/video-js/src/js/player.js"></script>
19 <script src="libs/video-js/src/js/control-bar/control-bar.js"></script>
20 <script src="libs/video-js/src/js/control-bar/play-toggle.js"></script>
21 <script src="libs/video-js/src/js/control-bar/time-display.js"></script>
22 <script src="libs/video-js/src/js/control-bar/fullscreen-toggle.js"></script>
23 <script src="libs/video-js/src/js/control-bar/progress-control.js"></script>
24 <script src="libs/video-js/src/js/control-bar/volume-control.js"></script>
25 <script src="libs/video-js/src/js/control-bar/mute-toggle.js"></script>
26 <script src="libs/video-js/src/js/control-bar/volume-menu-button.js"></script>
27 <script src="libs/video-js/src/js/poster.js"></script>
28 <script src="libs/video-js/src/js/loading-spinner.js"></script>
29 <script src="libs/video-js/src/js/big-play-button.js"></script>
30 <script src="libs/video-js/src/js/media/media.js"></script>
31 <script src="libs/video-js/src/js/media/html5.js"></script>
32 <script src="libs/video-js/src/js/media/flash.js"></script>
33 <script src="libs/video-js/src/js/media/loader.js"></script>
34 <script src="libs/video-js/src/js/tracks.js"></script>
35 <script src="libs/video-js/src/js/json.js"></script>
36 <script src="libs/video-js/src/js/setup.js"></script>
37 <script src="libs/video-js/src/js/plugins.js"></script>
38 11
39 <!-- Media Sources plugin --> 12 <!-- Media Sources plugin -->
40 <script src="libs/videojs-media-sources.js"></script> 13 <script src="node_modules/videojs-media-sources/videojs-media-sources.js"></script>
41 14
42 <!-- HLS plugin --> 15 <!-- HLS plugin -->
43 <script src="src/video-js-hls.js"></script> 16 <script src="src/video-js-hls.js"></script>
...@@ -64,62 +37,61 @@ ...@@ -64,62 +37,61 @@
64 37
65 </head> 38 </head>
66 <body> 39 <body>
67 <video id='video' 40 <video id="video"
68 class="video-js vjs-default-skin" 41 class="video-js vjs-default-skin"
69 height="300" 42 height="300"
70 width="600" 43 width="600"
71 controls> 44 controls>
72 </video> 45 </video>
73 <script> 46 <script>
74 var video, mediaSource, manifester; 47 var video, mediaSource;
75 48
76 // initialize the player 49 // initialize the player
77 videojs.options.flash.swf = "libs/video-js.swf"; 50 videojs.options.flash.swf = 'node_modules/videojs-media-sources/video-js-with-mse.swf';
78 video = videojs('video'); 51 video = videojs('video');
79
80 // get the manifest
81 manifester = new videojs.hls.ManifestController();
82 manifester.loadManifest('test/fixtures/prog_index.m3u8', function(manifest) {
83 var segmenter = new videojs.hls.SegmentController();
84 segmenter.loadSegment('test/fixtures/' + manifest.mediaItems[0].url, function(response) {
85 var segment = response.whatever;
86 52
87 // create a media source 53 // create a media source
88 mediaSource = new videojs.MediaSource(); 54 mediaSource = new videojs.MediaSource();
89 mediaSource.addEventListener('sourceopen', function(event){ 55 mediaSource.addEventListener('sourceopen', function(event){
90 var parser; 56 var
57 parser = new videojs.hls.SegmentParser(),
58 sourceBuffer = mediaSource.addSourceBuffer('video/flv; codecs="vp6,aac"');
59 everything = [];
91 60
92 // feed parsed bytes into the player 61 // feed parsed bytes into the player
93 var sourceBuffer = mediaSource.addSourceBuffer('video/flv; codecs="vp6,aac"'); 62 everything.push(parser.getFlvHeader());
94 parser = new videojs.hls.SegmentParser(); 63 sourceBuffer.appendBuffer(everything[everything.length - 1], video);
95 sourceBuffer.appendBuffer(parser.getFlvHeader(), video);
96 64
97 parser.parseSegmentBinaryData(segment); 65 parser.parseSegmentBinaryData(window.bcSegment);
98 66
99 while (parser.tagsAvailable()) { 67 while (parser.tagsAvailable()) {
100 sourceBuffer.appendBuffer(parser.getNextTag().bytes, video); 68 everything.push(parser.getNextTag().bytes);
101 } 69 sourceBuffer.appendBuffer(everything[everything.length - 1], video);
102 70 }
103 segmenter.loadSegment('test/fixtures/' + manifest.mediaItems[1].url, function(response) { 71 parser.flushTags();
104 var 72 while (parser.tagsAvailable()) {
105 segment = response.whatever, 73 everything.push(parser.getNextTag().bytes);
106 parser = new videojs.hls.SegmentParser(); 74 sourceBuffer.appendBuffer(everything[everything.length - 1], video);
107 75 }
108 parser.parseSegmentBinaryData(segment);
109 76
110 while (parser.tagsAvailable()) { 77 var iframe = document.createElement('iframe');
111 sourceBuffer.appendBuffer(parser.getNextTag().bytes, video); 78 iframe.src = 'data:video/x-flv;base64,' + window.btoa((Array.prototype.map.call(everything.reduce(function(result, next) {
112 } 79 var array = new Uint8Array(result.byteLength + next.byteLength);
113 }); 80 array.set(result);
114 }, false); 81 array.set(next, result.length);
82 return array;
83 }), function(byte) {
84 return String.fromCharCode(byte);
85 })).join(''));
86 //console.log(iframe);
87 // document.body.appendChild(iframe);
88 }, false);
115 89
116 url = videojs.URL.createObjectURL(mediaSource); 90 url = videojs.URL.createObjectURL(mediaSource);
117 91
118 video.src({ 92 video.src({
119 src: url, 93 src: url,
120 type: "video/flv" 94 type: "video/flv"
121 });
122 });
123 }); 95 });
124 </script> 96 </script>
125 </body> 97 </body>
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
4 "engines": { 4 "engines": {
5 "node": ">= 0.8.0" 5 "node": ">= 0.8.0"
6 }, 6 },
7 "license": "Apache 2",
7 "scripts": { 8 "scripts": {
8 "test": "grunt qunit" 9 "test": "grunt qunit"
9 }, 10 },
...@@ -15,5 +16,9 @@ ...@@ -15,5 +16,9 @@
15 "grunt-contrib-watch": "~0.4.0", 16 "grunt-contrib-watch": "~0.4.0",
16 "grunt-contrib-clean": "~0.4.0", 17 "grunt-contrib-clean": "~0.4.0",
17 "grunt": "~0.4.1" 18 "grunt": "~0.4.1"
19 },
20 "dependencies": {
21 "video.js": "~4.2.2",
22 "videojs-media-sources": "git+ssh://git@github.com/dmlap/videojs-media-sources.git"
18 } 23 }
19 } 24 }
......
...@@ -4,19 +4,21 @@ ...@@ -4,19 +4,21 @@
4 var 4 var
5 bytes = Array.prototype.slice.call(data), 5 bytes = Array.prototype.slice.call(data),
6 step = 16, 6 step = 16,
7 hex, 7 formatHexString = function(e) {
8 ascii;
9 for (var j = 0; j < bytes.length / step; j++) {
10 hex = bytes.slice(j * step, j * step + step).map(function(e) {
11 var value = e.toString(16); 8 var value = e.toString(16);
12 return "00".substring(0, 2 - value.length) + value; 9 return "00".substring(0, 2 - value.length) + value;
13 }).join(' '); 10 },
14 ascii = bytes.slice(j * step, j * step + step).map(function(e) { 11 formatAsciiString = function(e) {
15 if (e > 32 && e < 125) { 12 if (e > 32 && e < 125) {
16 return String.fromCharCode(e); 13 return String.fromCharCode(e);
17 } 14 }
18 return '.'; 15 return '.';
19 }).join(''); 16 },
17 hex,
18 ascii;
19 for (var j = 0; j < bytes.length / step; j++) {
20 hex = bytes.slice(j * step, j * step + step).map(formatHexString).join(' ');
21 ascii = bytes.slice(j * step, j * step + step).map(formatAsciiString).join('');
20 return hex + ' ' + ascii; 22 return hex + ' ' + ascii;
21 } 23 }
22 }, 24 },
......
...@@ -391,10 +391,10 @@ ...@@ -391,10 +391,10 @@
391 return this.writeBytes(data, offset + 2, length - 2); 391 return this.writeBytes(data, offset + 2, length - 2);
392 } 392 }
393 393
394 if (2 < length 394 if (2 < length &&
395 && 0 === data[offset] 395 0 === data[offset] &&
396 && 0 === data[offset + 1] 396 0 === data[offset + 1] &&
397 && 1 === data[offset + 2]) { 397 1 === data[offset + 2]) {
398 // 00 | 00 00 01 398 // 00 | 00 00 01
399 h264Frame.length -= 1; 399 h264Frame.length -= 1;
400 state = 3; 400 state = 3;
......
...@@ -8,34 +8,7 @@ ...@@ -8,34 +8,7 @@
8 <script src="../libs/qunit/qunit.js"></script> 8 <script src="../libs/qunit/qunit.js"></script>
9 9
10 <!-- video.js --> 10 <!-- video.js -->
11 <script src="../libs/video-js/src/js/core.js"></script> 11 <script src="../node_modules/video.js/video.dev.js"></script>
12 <script src="../libs/video-js/src/js/core-object.js"></script>
13 <script src="../libs/video-js/src/js/events.js"></script>
14 <script src="../libs/video-js/src/js/lib.js"></script>
15 <script src="../libs/video-js/src/js/component.js"></script>
16 <script src="../libs/video-js/src/js/button.js"></script>
17 <script src="../libs/video-js/src/js/slider.js"></script>
18 <script src="../libs/video-js/src/js/menu.js"></script>
19 <script src="../libs/video-js/src/js/player.js"></script>
20 <script src="../libs/video-js/src/js/control-bar/control-bar.js"></script>
21 <script src="../libs/video-js/src/js/control-bar/play-toggle.js"></script>
22 <script src="../libs/video-js/src/js/control-bar/time-display.js"></script>
23 <script src="../libs/video-js/src/js/control-bar/fullscreen-toggle.js"></script>
24 <script src="../libs/video-js/src/js/control-bar/progress-control.js"></script>
25 <script src="../libs/video-js/src/js/control-bar/volume-control.js"></script>
26 <script src="../libs/video-js/src/js/control-bar/mute-toggle.js"></script>
27 <script src="../libs/video-js/src/js/control-bar/volume-menu-button.js"></script>
28 <script src="../libs/video-js/src/js/poster.js"></script>
29 <script src="../libs/video-js/src/js/loading-spinner.js"></script>
30 <script src="../libs/video-js/src/js/big-play-button.js"></script>
31 <script src="../libs/video-js/src/js/media/media.js"></script>
32 <script src="../libs/video-js/src/js/media/html5.js"></script>
33 <script src="../libs/video-js/src/js/media/flash.js"></script>
34 <script src="../libs/video-js/src/js/media/loader.js"></script>
35 <script src="../libs/video-js/src/js/tracks.js"></script>
36 <script src="../libs/video-js/src/js/json.js"></script>
37 <script src="../libs/video-js/src/js/setup.js"></script>
38 <script src="../libs/video-js/src/js/plugins.js"></script>
39 12
40 <!-- HLS plugin --> 13 <!-- HLS plugin -->
41 <script src="../src/video-js-hls.js"></script> 14 <script src="../src/video-js-hls.js"></script>
...@@ -58,16 +31,11 @@ ...@@ -58,16 +31,11 @@
58 <script src="tsSegment-bc.js"></script> 31 <script src="tsSegment-bc.js"></script>
59 <script src="../src/segment-controller.js"></script> 32 <script src="../src/segment-controller.js"></script>
60 33
61 <script src="../src/bin-utils.js"></script> 34 <script src="../src/bin-utils.js"></script>
62 35
63
64
65
66
67 <script src="exp-golomb_test.js"></script>
68 <script src="video-js-hls_test.js"></script> 36 <script src="video-js-hls_test.js"></script>
69 <script src="exp-golomb_test.js"></script> 37 <script src="exp-golomb_test.js"></script>
70 <script src="flv-tag_test.js"></script> 38 <script src="flv-tag_test.js"></script>
71 </head> 39 </head>
72 <body> 40 <body>
73 <div id="qunit"></div> 41 <div id="qunit"></div>
......