mirror of
https://github.com/videojs/video.js.git
synced 2024-12-02 09:11:54 +02:00
147 lines
3.9 KiB
Plaintext
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>
|