84 lines
2.8 KiB
HTML
84 lines
2.8 KiB
HTML
<!doctype 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>
|