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
Copyright 2013 Brightcove
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
\ 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
## Getting Started
Download the [production version][min] or the [development version][max].
[min]: https://raw.bithub.com/dlapalomento/video-js-hls/master/dist/video-js-hls.min.js
[max]: https://raw.bithub.com/dlapalomento/video-js-hls/master/dist/video-js-hls.js
[min]: https://raw.bithub.com/dlapalomento/video-js-hls/master/dist/videojs-hls.min.js
[max]: https://raw.bithub.com/dlapalomento/video-js-hls/master/dist/videojs-hls.js
In your web page:
```html
<script src="video.js"></script>
<script src="dist/video-js-hls.min.js"></script>
<script src="dist/videojs-hls.min.js"></script>
<script>
var player = videojs('video');
player.hls();
......
......@@ -4,40 +4,13 @@
<meta charset="utf-8">
<title>video.js HLS Plugin Example</title>
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<link href="node_modules/video.js/video-js.css" rel="stylesheet">
<!-- video.js -->
<script src="libs/video-js/src/js/core.js"></script>
<script src="libs/video-js/src/js/core-object.js"></script>
<script src="libs/video-js/src/js/events.js"></script>
<script src="libs/video-js/src/js/lib.js"></script>
<script src="libs/video-js/src/js/component.js"></script>
<script src="libs/video-js/src/js/button.js"></script>
<script src="libs/video-js/src/js/slider.js"></script>
<script src="libs/video-js/src/js/menu.js"></script>
<script src="libs/video-js/src/js/player.js"></script>
<script src="libs/video-js/src/js/control-bar/control-bar.js"></script>
<script src="libs/video-js/src/js/control-bar/play-toggle.js"></script>
<script src="libs/video-js/src/js/control-bar/time-display.js"></script>
<script src="libs/video-js/src/js/control-bar/fullscreen-toggle.js"></script>
<script src="libs/video-js/src/js/control-bar/progress-control.js"></script>
<script src="libs/video-js/src/js/control-bar/volume-control.js"></script>
<script src="libs/video-js/src/js/control-bar/mute-toggle.js"></script>
<script src="libs/video-js/src/js/control-bar/volume-menu-button.js"></script>
<script src="libs/video-js/src/js/poster.js"></script>
<script src="libs/video-js/src/js/loading-spinner.js"></script>
<script src="libs/video-js/src/js/big-play-button.js"></script>
<script src="libs/video-js/src/js/media/media.js"></script>
<script src="libs/video-js/src/js/media/html5.js"></script>
<script src="libs/video-js/src/js/media/flash.js"></script>
<script src="libs/video-js/src/js/media/loader.js"></script>
<script src="libs/video-js/src/js/tracks.js"></script>
<script src="libs/video-js/src/js/json.js"></script>
<script src="libs/video-js/src/js/setup.js"></script>
<script src="libs/video-js/src/js/plugins.js"></script>
<script src="node_modules/video.js/video.dev.js"></script>
<!-- Media Sources plugin -->
<script src="libs/videojs-media-sources.js"></script>
<script src="node_modules/videojs-media-sources/videojs-media-sources.js"></script>
<!-- HLS plugin -->
<script src="src/video-js-hls.js"></script>
......@@ -64,62 +37,61 @@
</head>
<body>
<video id='video'
<video id="video"
class="video-js vjs-default-skin"
height="300"
width="600"
controls>
</video>
<script>
var video, mediaSource, manifester;
var video, mediaSource;
// initialize the player
videojs.options.flash.swf = "libs/video-js.swf";
videojs.options.flash.swf = 'node_modules/videojs-media-sources/video-js-with-mse.swf';
video = videojs('video');
// get the manifest
manifester = new videojs.hls.ManifestController();
manifester.loadManifest('test/fixtures/prog_index.m3u8', function(manifest) {
var segmenter = new videojs.hls.SegmentController();
segmenter.loadSegment('test/fixtures/' + manifest.mediaItems[0].url, function(response) {
var segment = response.whatever;
// create a media source
mediaSource = new videojs.MediaSource();
mediaSource.addEventListener('sourceopen', function(event){
var parser;
// create a media source
mediaSource = new videojs.MediaSource();
mediaSource.addEventListener('sourceopen', function(event){
var
parser = new videojs.hls.SegmentParser(),
sourceBuffer = mediaSource.addSourceBuffer('video/flv; codecs="vp6,aac"');
everything = [];
// feed parsed bytes into the player
var sourceBuffer = mediaSource.addSourceBuffer('video/flv; codecs="vp6,aac"');
parser = new videojs.hls.SegmentParser();
sourceBuffer.appendBuffer(parser.getFlvHeader(), video);
// feed parsed bytes into the player
everything.push(parser.getFlvHeader());
sourceBuffer.appendBuffer(everything[everything.length - 1], video);
parser.parseSegmentBinaryData(segment);
parser.parseSegmentBinaryData(window.bcSegment);
while (parser.tagsAvailable()) {
sourceBuffer.appendBuffer(parser.getNextTag().bytes, video);
}
segmenter.loadSegment('test/fixtures/' + manifest.mediaItems[1].url, function(response) {
var
segment = response.whatever,
parser = new videojs.hls.SegmentParser();
parser.parseSegmentBinaryData(segment);
while (parser.tagsAvailable()) {
everything.push(parser.getNextTag().bytes);
sourceBuffer.appendBuffer(everything[everything.length - 1], video);
}
parser.flushTags();
while (parser.tagsAvailable()) {
everything.push(parser.getNextTag().bytes);
sourceBuffer.appendBuffer(everything[everything.length - 1], video);
}
while (parser.tagsAvailable()) {
sourceBuffer.appendBuffer(parser.getNextTag().bytes, video);
}
});
}, false);
var iframe = document.createElement('iframe');
iframe.src = 'data:video/x-flv;base64,' + window.btoa((Array.prototype.map.call(everything.reduce(function(result, next) {
var array = new Uint8Array(result.byteLength + next.byteLength);
array.set(result);
array.set(next, result.length);
return array;
}), function(byte) {
return String.fromCharCode(byte);
})).join(''));
//console.log(iframe);
// document.body.appendChild(iframe);
}, false);
url = videojs.URL.createObjectURL(mediaSource);
url = videojs.URL.createObjectURL(mediaSource);
video.src({
src: url,
type: "video/flv"
});
});
video.src({
src: url,
type: "video/flv"
});
</script>
</body>
......
......@@ -4,6 +4,7 @@
"engines": {
"node": ">= 0.8.0"
},
"license": "Apache 2",
"scripts": {
"test": "grunt qunit"
},
......@@ -15,5 +16,9 @@
"grunt-contrib-watch": "~0.4.0",
"grunt-contrib-clean": "~0.4.0",
"grunt": "~0.4.1"
},
"dependencies": {
"video.js": "~4.2.2",
"videojs-media-sources": "git+ssh://git@github.com/dmlap/videojs-media-sources.git"
}
}
......
......@@ -4,19 +4,21 @@
var
bytes = Array.prototype.slice.call(data),
step = 16,
hex,
ascii;
for (var j = 0; j < bytes.length / step; j++) {
hex = bytes.slice(j * step, j * step + step).map(function(e) {
formatHexString = function(e) {
var value = e.toString(16);
return "00".substring(0, 2 - value.length) + value;
}).join(' ');
ascii = bytes.slice(j * step, j * step + step).map(function(e) {
},
formatAsciiString = function(e) {
if (e > 32 && e < 125) {
return String.fromCharCode(e);
}
return '.';
}).join('');
},
hex,
ascii;
for (var j = 0; j < bytes.length / step; j++) {
hex = bytes.slice(j * step, j * step + step).map(formatHexString).join(' ');
ascii = bytes.slice(j * step, j * step + step).map(formatAsciiString).join('');
return hex + ' ' + ascii;
}
},
......
......@@ -391,10 +391,10 @@
return this.writeBytes(data, offset + 2, length - 2);
}
if (2 < length
&& 0 === data[offset]
&& 0 === data[offset + 1]
&& 1 === data[offset + 2]) {
if (2 < length &&
0 === data[offset] &&
0 === data[offset + 1] &&
1 === data[offset + 2]) {
// 00 | 00 00 01
h264Frame.length -= 1;
state = 3;
......
......@@ -8,34 +8,7 @@
<script src="../libs/qunit/qunit.js"></script>
<!-- video.js -->
<script src="../libs/video-js/src/js/core.js"></script>
<script src="../libs/video-js/src/js/core-object.js"></script>
<script src="../libs/video-js/src/js/events.js"></script>
<script src="../libs/video-js/src/js/lib.js"></script>
<script src="../libs/video-js/src/js/component.js"></script>
<script src="../libs/video-js/src/js/button.js"></script>
<script src="../libs/video-js/src/js/slider.js"></script>
<script src="../libs/video-js/src/js/menu.js"></script>
<script src="../libs/video-js/src/js/player.js"></script>
<script src="../libs/video-js/src/js/control-bar/control-bar.js"></script>
<script src="../libs/video-js/src/js/control-bar/play-toggle.js"></script>
<script src="../libs/video-js/src/js/control-bar/time-display.js"></script>
<script src="../libs/video-js/src/js/control-bar/fullscreen-toggle.js"></script>
<script src="../libs/video-js/src/js/control-bar/progress-control.js"></script>
<script src="../libs/video-js/src/js/control-bar/volume-control.js"></script>
<script src="../libs/video-js/src/js/control-bar/mute-toggle.js"></script>
<script src="../libs/video-js/src/js/control-bar/volume-menu-button.js"></script>
<script src="../libs/video-js/src/js/poster.js"></script>
<script src="../libs/video-js/src/js/loading-spinner.js"></script>
<script src="../libs/video-js/src/js/big-play-button.js"></script>
<script src="../libs/video-js/src/js/media/media.js"></script>
<script src="../libs/video-js/src/js/media/html5.js"></script>
<script src="../libs/video-js/src/js/media/flash.js"></script>
<script src="../libs/video-js/src/js/media/loader.js"></script>
<script src="../libs/video-js/src/js/tracks.js"></script>
<script src="../libs/video-js/src/js/json.js"></script>
<script src="../libs/video-js/src/js/setup.js"></script>
<script src="../libs/video-js/src/js/plugins.js"></script>
<script src="../node_modules/video.js/video.dev.js"></script>
<!-- HLS plugin -->
<script src="../src/video-js-hls.js"></script>
......@@ -58,16 +31,11 @@
<script src="tsSegment-bc.js"></script>
<script src="../src/segment-controller.js"></script>
<script src="../src/bin-utils.js"></script>
<script src="../src/bin-utils.js"></script>
<script src="exp-golomb_test.js"></script>
<script src="video-js-hls_test.js"></script>
<script src="exp-golomb_test.js"></script>
<script src="flv-tag_test.js"></script>
<script src="exp-golomb_test.js"></script>
<script src="flv-tag_test.js"></script>
</head>
<body>
<div id="qunit"></div>
......