Base: Add options to the video test page to change its attributes

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.
This commit is contained in:
Timothy Flynn 2023-04-20 08:41:39 -04:00 committed by Andreas Kling
parent 83bb24991b
commit 59a1a3f463
Notes: sideshowbarker 2024-07-17 04:03:27 +09:00

View file

@ -73,15 +73,44 @@
</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 autoplay controls src="file:///home/anon/Videos/test-webm.webm"></video>
<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;
@ -112,6 +141,17 @@
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>