<html>
<head>
<style type="text/css">
video {
border: 1px solid #333;
}
table, td {
border: 1px solid #333;
border-collapse: collapse;
}
thead, tfoot {
background-color: #333333;
color: #ffffff;
}
.horizontal > * {
display: inline-block;
}
</style>
</head>
<body>
<div class=horizontal>
<table>
<thead>
<tr>
<th colspan="2">Metadata</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td id=id>null</td>
</tr>
<tr>
<td>Is Selected</td>
<td id=selected>false</td>
</tr>
<tr>
<td>Width</td>
<td id=width>0px</td>
</tr>
<tr>
<td>Height</td>
<td id=height>0px</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2">Playback State</th>
</tr>
</thead>
<tbody>
<tr>
<td>Current Time</td>
<td id=time>0.00 seconds</td>
</tr>
<tr>
<td>Duration</td>
<td id=duration>0.00 seconds</td>
</tr>
<tr>
<td>Play State</td>
<td id=state>paused</td>
</tr>
<tr>
<td>Ended</td>
<td id=ended>false</td>
</tr>
</tbody>
</table>
<fieldset>
<legend>Select a video playback option:</legend>
<div>
<input type=radio id=option-default value=default name=options>
<label for=option-default>Default</label>
</div>
<div>
<input type=radio id=option-autoplay value=autoplay name=options>
<label for=option-autoplay>Autoplay</label>
</div>
<div>
<input type=radio id=option-poster value=poster name=options>
<label for=option-poster>Poster</label>
</div>
</fieldset>
</div>
<br />
<video id=video controls src="../../../home/anon/Videos/test-webm.webm"></video>
<script type="text/javascript">
let video = document.getElementById('video');
const params = new URLSearchParams(document.location.search);
const option = params.get('option');
if (option === 'autoplay') {
document.getElementById('option-autoplay').setAttribute('checked', '');
video.setAttribute('autoplay', '');
} else if (option === 'poster') {
document.getElementById('option-poster').setAttribute('checked', '');
video.setAttribute('poster', '../../wallpapers/grid.png');
} else {
document.getElementById('option-default').setAttribute('checked', '');
}
video.videoTracks.onaddtrack = (event) => {
document.getElementById('id').textContent = event.track.id;
document.getElementById('selected').textContent = event.track.selected;
};
video.addEventListener('timeupdate', () => {
document.getElementById('time').textContent = `${video.currentTime.toFixed(2)} seconds`;
});
video.addEventListener('durationchange', () => {
document.getElementById('duration').textContent = `${video.duration.toFixed(2)} seconds`;
});
video.addEventListener('loadedmetadata', () => {
document.getElementById('width').textContent = `${video.videoWidth}px`;
document.getElementById('height').textContent = `${video.videoHeight}px`;
});
video.addEventListener('playing', () => {
document.getElementById('state').textContent = 'playing';
document.getElementById('ended').textContent = video.ended;
});
video.addEventListener('waiting', () => {
document.getElementById('state').textContent = 'waiting';
document.getElementById('ended').textContent = video.ended;
});
video.addEventListener('pause', () => {
document.getElementById('state').textContent = 'paused';
document.getElementById('ended').textContent = video.ended;
});
for (const option of document.getElementsByName('options')) {
option.addEventListener('change', function() {
if (!this.checked) {
return;
}
const location = `${window.location.pathname}?option=${this.value}`;
window.location.href = location;
});
}
</script>
</body>
</html>
