videojs-contrib-media-sources
Version:
A Media Source Extensions plugin for video.js
84 lines (79 loc) • 2.87 kB
HTML
<link rel="stylesheet" href="/node_modules/video.js/dist/video-js/video-js.css">
<style>
p {
background-color: #cbcbcb;
border-radius: 5px;
border: thin solid #333;
padding: 5px;
}
</style>
<p>This page pushes random bytes into a SourceBuffer to allow easy testing of ExternalInterface bandwidth. If ExternalInterface cannot transmit bytes to the video.js SWF at a greater rate than the video bitrate without using up too much CPU, playback will be interrupted.</p>
<video
class="video-js vjs-default-skin"
width="960"
height="400"
controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
Your browser does not support HTML video.
</video>
<form>
<legend>Test Parameters</legend>
<label>
Number of bytes per append:
<input id="byte-count" type="number" min="1" value="1000">
</label>
<label>
Number of appends:
<input id="append-count" type="number" min="1" value="10000">
</label>
</form>
<button disabled>Run Test</button>
<table>
<caption>Test Results</caption>
<thead>
<tr><td>Bytes</td><td>Appends</td><td>Elapsed Milliseconds</td></tr>
</thead>
<tbody id="results"></tbody>
</table>
<script src="/node_modules/video.js/dist/video-js/video.js"></script>
<script src="/dist/videojs-contrib-media-sources.js"></script>
<script>
var player = videojs(document.querySelector('video'), {
techOrder: ['flash', 'html']
}, function() {
var mediaSource = new videojs.MediaSource();
mediaSource.addEventListener('sourceopen', function(event) {
var sourceBuffer = mediaSource.addSourceBuffer('video/flv; codecs="vp6,aac"'),
button = document.querySelector('button');
button.disabled = false;
button.addEventListener('click', function() {
var byteCount = +document.querySelector('#byte-count').value,
bytes = new Uint8Array(byteCount),
appendCount = +document.querySelector('#append-count').value,
i = appendCount,
result = document.createElement('tr'),
printResults = function() {
result.innerHTML = '<td>' + byteCount + '</td><td>' +
appendCount + '</td><td>' +
(Date.now() - start) + '</td>';
document.querySelector('#results').appendChild(result);
sourceBuffer.removeEventListener('updateend', printResults);
button.disabled = false;
},
start;
button.disabled = true;
sourceBuffer.addEventListener('updateend', printResults);
start = Date.now();
while (i--) {
sourceBuffer.appendBuffer(bytes, player);
}
}, false);
}, false);
player.src({
src: videojs.URL.createObjectURL(mediaSource),
type: "video/flv"
});
});
</script>