1
0
mirror of https://github.com/videojs/video.js.git synced 2024-12-04 10:34:51 +02:00
video.js/sandbox/autoplay-tests.html.example
2020-11-16 15:13:27 -05:00

147 lines
3.9 KiB
Plaintext

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Video.js Sandbox</title>
<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../dist/video.js"></script>
<style>p{margin: 0; padding:0}</style>
</head>
<body>
<div id="fixture">
</div>
<div id="start-test">
<video id='start-test-video' height=264 width=640 src="https://vjs.zencdn.net/v/oceans.mp4" controls></video>
<p>Press play on the video to start tests. (as we need user permission to autoplay)</p>
</div>
<script>
/* globals */
var startTestEl = document.getElementById('start-test')
var startTestVideo = document.getElementById('start-test-video')
var testSrc = {src: startTestVideo.src, type: 'video/mp4'};
var baseTests = [];
var setFirstFail = function(player) {
var oldPlay = player.tech_.play;
var fail = true;
player.tech_.play = function() {
if (fail) {
fail = false;
return window.Promise.reject();
}
return oldPlay.call(player.tech_);
};
};
var noop = function() {};
['any-first-fail', 'any', 'play', 'muted', true].forEach(function(name) {
var val = (name === 'any-first-fail') ? 'any' : name;
var firstFail = (name === 'any-first-fail') ? setFirstFail : noop;
var fn = function(player) {
player.autoplay(val);
};
baseTests.push({name: 'option-' + name, beforeSrc: firstFail, options: {autoplay: val}});
baseTests.push({name: 'before-src-' + name, beforeSrc: function(player) {
firstFail(player);
fn(player);
}});
baseTests.push({name: 'after-src-' + name, beforeSrc: firstFail, afterSrc: fn});
baseTests.push({name: 'on-ready-' + name, beforeSrc: firstFail, onReady: fn});
});
var appendLine = function(line) {
var el = document.createElement('p');
el.innerText = line;
console.log(line);
fixture.appendChild(el);
};
var runTests;
startTestVideo.addEventListener('play', function() {
startTestVideo.load();
startTestVideo.src = testSrc.src;
startTestEl.style.display = 'none';
runTests();
});
runTests = function() {
var fixture = document.getElementById('fixture');
while(fixture.firstChild) {
fixture.removeChild(fixture.firstChild);
}
var tests = baseTests.slice(0);
var failure = 0;
var success = 0;
var total = tests.length;
var runTest;
var finishTest = function(name, pass) {
if (pass) {
success++;
} else {
failure++;
}
appendLine((pass ? 'success' : 'failure') + ' - ' + name);
if ((success + failure) === total) {
startTestEl.style.display = '';
appendLine(success + ' of ' + total + ' succeeded');
} else {
runTest();
}
}
runTest = function() {
var test = tests.shift();
var video = document.createElement('video');
video.setAttribute('class', 'video-js');
video.setAttribute('id', test.name);
video.setAttribute('controls', true);
fixture.appendChild(video);
var player = window.player = videojs(video, test.options);
if (test.onReady) {
test.onReady(player);
}
if (test.beforeSrc) {
test.beforeSrc(player);
}
player.src(testSrc);
if (test.afterSrc) {
test.afterSrc(player);
}
player.setTimeout(function() {
player.dispose();
window.player = null;
finishTest(test.name, false);
}, 5000);
player.on('timeupdate', function() {
if (player.currentTime() > 0) {
player.dispose();
window.player = null;
finishTest(test.name, true);
}
});
};
runTest();
};
</script>
</body>
</html>