192 lines
5.7 KiB
HTML
192 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="media-source-loader.js"></script>
|
||
|
|
<script src="../resources/runner.js"></script>
|
||
|
|
<script>
|
||
|
|
var loader;
|
||
|
|
|
||
|
|
window.addEventListener('load', () => {
|
||
|
|
loader = new MediaSourceLoader('test-fragmented-video.json');
|
||
|
|
loader.loadMediaData().then(runTest);
|
||
|
|
});
|
||
|
|
|
||
|
|
function *range(start, end) {
|
||
|
|
while (start < end)
|
||
|
|
yield(start++);
|
||
|
|
}
|
||
|
|
|
||
|
|
function addVideos(count, autoplay) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
var promises = [];
|
||
|
|
var videos = [];
|
||
|
|
for (var i of range(0, count)) {
|
||
|
|
var video = document.createElement('video');
|
||
|
|
video.controls = false;
|
||
|
|
video.loop = true;
|
||
|
|
video.muted = true;
|
||
|
|
document.body.appendChild(video);
|
||
|
|
promises.push(loadMediaDataIntoVideo(video));
|
||
|
|
videos.push(video);
|
||
|
|
}
|
||
|
|
document.getElementById('video-count').innerText = videoCount();
|
||
|
|
Promise.all(promises).then(() => {
|
||
|
|
resolve(videos);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeVideos(count) {
|
||
|
|
while (count > 0) {
|
||
|
|
--count;
|
||
|
|
var video = document.querySelector('video:last-child');
|
||
|
|
video.src = '';
|
||
|
|
video.load();
|
||
|
|
document.body.removeChild(video);
|
||
|
|
}
|
||
|
|
document.getElementById('video-count').innerText = videoCount();
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadMediaDataIntoVideo(video) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
var source = new MediaSource();
|
||
|
|
source.addEventListener('sourceopen', (e) => {
|
||
|
|
var source = e.target;
|
||
|
|
var currentMediaSegment = 0;
|
||
|
|
var sourceBuffer = source.addSourceBuffer(loader.type);
|
||
|
|
var mediaSegments = loader.mediaSegments();
|
||
|
|
sourceBuffer.appendBuffer(loader.initSegment);
|
||
|
|
sourceBuffer.addEventListener('update', () => {
|
||
|
|
if (source.readyState === 'closed') {
|
||
|
|
resolve(video);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var nextSegment = mediaSegments.next();
|
||
|
|
if (nextSegment.done) {
|
||
|
|
if (source.readyState !== 'ended') {
|
||
|
|
source.endOfStream();
|
||
|
|
resolve(video);
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
sourceBuffer.appendBuffer(nextSegment.value);
|
||
|
|
});
|
||
|
|
sourceBuffer.addEventListener('error', (e) => {
|
||
|
|
reject();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
video.src = URL.createObjectURL(source);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function videoCount() {
|
||
|
|
return document.querySelectorAll('video').length;
|
||
|
|
}
|
||
|
|
|
||
|
|
function totalDroppedFrames() {
|
||
|
|
var total = 0;
|
||
|
|
for (var video of document.querySelectorAll('video')) {
|
||
|
|
if (typeof(video.getVideoPlaybackQuality) !== 'undefined')
|
||
|
|
total += video.getVideoPlaybackQuality().droppedVideoFrames;
|
||
|
|
else if (typeof(video.webkitDroppedFrameCount) !== 'undefined')
|
||
|
|
total += video.webkitDroppedFrameCount;
|
||
|
|
}
|
||
|
|
return total;
|
||
|
|
}
|
||
|
|
|
||
|
|
function pauseAll() {
|
||
|
|
for (var video of document.querySelectorAll('video'))
|
||
|
|
video.pause();
|
||
|
|
}
|
||
|
|
|
||
|
|
function playVideos(videos) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
var promises = [];
|
||
|
|
for (var video of videos)
|
||
|
|
promises.push(video.play());
|
||
|
|
Promise.all(promises).then(() => { resolve(videos); });
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function playAll() {
|
||
|
|
playVideos(document.querySelectorAll('video'));
|
||
|
|
}
|
||
|
|
|
||
|
|
function runTest() {
|
||
|
|
addVideos(initialVideoCount).then(playVideos);
|
||
|
|
trySeekingFaster(1.6);
|
||
|
|
}
|
||
|
|
|
||
|
|
function finishTest() {
|
||
|
|
pauseAll();
|
||
|
|
}
|
||
|
|
|
||
|
|
var initialVideoCount = 10;
|
||
|
|
var droppedFrameLimit = 1;
|
||
|
|
var initialPlaybackRate = 1;
|
||
|
|
|
||
|
|
function trySeekingFaster(value) {
|
||
|
|
initialPlaybackRate += value;
|
||
|
|
document.getElementById('video-speed').innerText = initialPlaybackRate;
|
||
|
|
for (var video of document.querySelectorAll('video'))
|
||
|
|
video.playbackRate = initialPlaybackRate;
|
||
|
|
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
var initialDroppedFrames = totalDroppedFrames();
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
var endingDroppedFrames = totalDroppedFrames();
|
||
|
|
document.getElementById('dropped-frame').innerText = endingDroppedFrames - initialDroppedFrames;
|
||
|
|
|
||
|
|
if (endingDroppedFrames - initialDroppedFrames <= droppedFrameLimit) {
|
||
|
|
if (value <= 0.05) {
|
||
|
|
finishTest();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
trySeekingFaster(value);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
trySeekingSlower(value/2);
|
||
|
|
}, 1000);
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
|
||
|
|
function trySeekingSlower(value) {
|
||
|
|
initialPlaybackRate -= value;
|
||
|
|
document.getElementById('video-speed').innerText = initialPlaybackRate;
|
||
|
|
for (var video of document.querySelectorAll('video'))
|
||
|
|
video.playbackRate = initialPlaybackRate;
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
var initialDroppedFrames = totalDroppedFrames();
|
||
|
|
setTimeout(() => {
|
||
|
|
var endingDroppedFrames = totalDroppedFrames();
|
||
|
|
document.getElementById('dropped-frame').innerText = endingDroppedFrames - initialDroppedFrames;
|
||
|
|
|
||
|
|
if (endingDroppedFrames - initialDroppedFrames <= droppedFrameLimit) {
|
||
|
|
if (value <= 0.05) {
|
||
|
|
finishTest();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
trySeekingFaster(value/2);
|
||
|
|
} else
|
||
|
|
trySeekingSlower(value);
|
||
|
|
}, 2000);
|
||
|
|
}, 2000);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
Video Count: <span id="video-count">0</span> Speed: <span id="video-speed">0</span> Dropped Frame Delta: <span id="dropped-frame">0</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<button onclick="addVideos(1).then(playVideos)">add video</button><button onclick="removeVideos(1)">remove video</button><button onclick="pauseAll()">pause</button><button onclick="playAll()">play</button><br>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|