blob: d0789b70ec56fe520428a91c2b2b6b66cd3fe0f1 [file] [log] [blame]
<!DOCTYPE html>
<html lang='en-US'>
<head>
<title>EME playback test application</title>
</head>
<body style='font-family:"Lucida Console", Monaco, monospace; font-size:14px' onload="start()">
<i>Clearkey works only with content encrypted using bear key.</i><br><br>
<table>
<tr title='URL param mediaFile=...'>
<td><label for='mediaFile'>Encrypted video URL:</label></td>
<td><input id='mediaFile' type='text' size='64'></td>
</tr>
<tr title='URL param licenseServerURL=...'>
<td><label for='licenseServer'>License sever URL:</label></td>
<td><input id='licenseServer' type='text' size='64'></td>
</tr>
<tr title='URL param keySystem=...'>
<td><label for='keySystemList'>Key system:</label></td>
<td><select id='keySystemList'></select></td>
</tr>
<tr title='URL param mediaType=...'>
<td><label for='mediaTypeList'>Media type:</label></td>
<td><select id='mediaTypeList'></select></td>
</tr>
<tr title='URL param useMSE=1|0'>
<td><label for='useMSE'>Load media by:</label></td>
<td>
<select id='useMSE'>
<option value='true' selected='selected'>MSE</option>
<option value='false'>src</option>
</select>
</td>
</tr>
</table>
<br>
<button onclick='start();'>Play</button>
<br><br>
Decoded fps: <span id='decodedFPS'></span>
<br>
Dropped fps: <span id='droppedFPS'></span>
<br>
Total dropped frames: <span id='droppedFrames'></span>
<br><br>
<table>
<tr>
<td valign='top'><span id='video'></span></td>
<td valign='top'>
<label for='logs' onclick="toggleDisplay('logs');"><i>Click to toggle logs visibility (newest at top).</i><br></label>
<div id='logs' style='overflow: auto; height: 480px; width: 480px; white-space: nowrap; display: none'></div>
</td>
</tr>
</table>
<div></div>
</body>
<script src='eme_player_js/app_loader.js' type='text/javascript'></script>
<script type='text/javascript'>
var testConfig;
var emeApp;
var player;
var heartbeatCount = 0;
function getTimeRanges(range) {
const result = [];
for (let i = 0; i < range.length; i++) {
result.push(`[${range.start(i)},${range.end(i)}]`);
}
return '[' + result.join(', ') + ']';
}
function getVideoStatus(video) {
if (video == null) {
return 'null';
}
const result = [];
result.push(`paused: ${video.paused}`);
result.push(`ended: ${video.ended}`);
result.push(`currentTime: ${video.currentTime}`);
result.push(`duration: ${video.duration}`);
result.push(`buffered: ${getTimeRanges(video.buffered)}`);
result.push(`played: ${getTimeRanges(video.played)}`);
if (video.error) {
result.push(`error: {${video.error.code},${video.error.message}}`);
}
return result.join(', ');
}
function initApp() {
testConfig = new TestConfig();
testConfig.loadQueryParams();
// Update document with test configuration values.
emeApp = new EMEApp(testConfig);
setInterval(function () {
Utils.timeLog('heartbeat #' + ++heartbeatCount +
' video: ' + getVideoStatus(player.video));
}, 1000);
}
function onTimeUpdate(e) {
var video = e.target;
Utils.timeLog('timeupdate @ ' + video.currentTime);
if (video.currentTime < 1)
return;
Utils.timeLog('waiting for video to end.');
video.removeEventListener('ended', Utils.failTest);
Utils.installTitleEventHandler(video, 'ended');
video.removeEventListener('timeupdate', onTimeUpdate);
}
function onFirstPlayEnded(e) {
Utils.timeLog('First play ended.');
var video = e.target;
video.removeEventListener('ended', onFirstPlayEnded);
video.removeEventListener('abort', Utils.failTest);
// Reset src (to same video again).
PlayerUtils.setVideoSource(player);
// Play the video a second time.
Utils.timeLog('Playing second time.');
play(video, false);
}
function onLogEvent(e) {
Utils.timeLog('Event: ' + e.type);
}
function onVisibilityChange(e) {
Utils.timeLog('Event: ' + e.type + ', hidden: ' + document.hidden);
}
function onEnded(e) {
Utils.timeLog('Event: ' + e.type);
PlayerUtils.removeSession(player).then(function() {
Utils.setResultInTitle('ENDED');
}).catch(function(error) {
Utils.timeLog(error);
Utils.failTest('Failed PlayerUtils.removeSession');
});
}
function play(video, playTwice) {
Utils.timeLog('Starting play, hidden: ' + document.hidden);
video.addEventListener('canplay', onLogEvent);
video.addEventListener('load', onLogEvent);
video.addEventListener('playing', onLogEvent);
video.addEventListener('play', onLogEvent);
video.addEventListener('canplaythrough', onLogEvent);
video.addEventListener('stalled', onLogEvent);
video.addEventListener('waiting', onLogEvent);
video.addEventListener('waitingforkey', onLogEvent);
document.addEventListener('visibilitychange', onVisibilityChange);
Utils.resetTitleChange();
if (playTwice) {
// Wait for the first play to complete.
video.addEventListener('ended', onFirstPlayEnded);
return video.play();
}
// Ended should not fire before onTimeUpdate.
video.addEventListener('ended', Utils.failTest);
video.addEventListener('timeupdate', onTimeUpdate);
return video.play();
}
function toggleDisplay(id) {
var element = document.getElementById(id);
if (!element)
return;
if (element.style['display'] != 'none')
element.style['display'] = 'none';
else
element.style['display'] = '';
}
function start() {
initApp();
// TODO(jrummell): Support setMediaKeys() after play().
// See http://crbug.com/675011
emeApp.createPlayer()
.then(function(p) {
player = p;
return play(player.video, testConfig.playTwice);
}).catch(function(error) {
Utils.timeLog(error);
Utils.failTest('Unable to play video.');
});
}
</script>
</html>