se-runner-browserstack-example
Version:
Ready to run example using se-runner with grunt-se-runner and se-runner-framework-jasmine towards BrowserStack
72 lines (67 loc) • 2.58 kB
HTML
<html>
<head>
<title>SeRunner BrowserStack Example - Test Harness</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="pageContainer">
<video id="player" class="player">
<source src="data/sintel-trailer-480p.mp4" type="video/mp4">
</video>
<br />
<button id="play" class="play" onclick="document.querySelector('video#player').play()">Play</button>
</div>
<script type="text/javascript">
window.Result = {
didLoad: false,
didPlay: false,
didPause: false,
didStartLoad: false,
playable: false,
duration: 0,
position: 0,
volume: 0.5
};
var video = document.querySelector('video#player');
video.addEventListener('loadstart', function () {
window.Result.didStartLoad = true;
});
video.addEventListener('loadedmetadata', function () {
window.Result.didLoad = true;
video.play();
});
video.addEventListener('canplay', function () {
window.Result.playable = true;
});
video.addEventListener('play', function () {
window.Result.didPlay = true;
});
video.addEventListener('pause', function () {
window.Result.didPause = true;
});
video.addEventListener('durationchange', function () {
window.Result.duration = video.duration;
});
video.addEventListener('timeupdate', function () {
window.Result.position = video.currentTime;
});
video.addEventListener('volumechange', function () {
window.Result.volume = video.volume;
});
window.callAfterPlayable = function (func) {
var once = function () {
video.removeEventListener('canplay', once);
func.call(video);
};
window.Result.didLoad ? func.call(video) : video.addEventListener('canplay', once);
};
</script>
</body>
</html>