mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-29 08:11:13 +00:00
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="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>
|