Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
204be1ba by David LaPalomento
Options

Use npm for dependencies 

Pull in vjs-media-sources and vjs itself with npm. Add the apache 2 license.
1 parent 0b45400e
Inline Side-by-side
Showing 3 changed files with 60 additions and 70 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
...@@ -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 }
......