mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
59a1a3f463
This is to allow testing autoplay, poster images, etc. without having to stash local changes to the page. This also changes the URLs used on the page to be relative to the page itself, to allow the page to load both on Serenity and Lagom.
158 lines
4.9 KiB
HTML
158 lines
4.9 KiB
HTML
<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>
|