RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 06:27:45 +00:00
Code Issues Activity Actions

Base: Add a simple test page to load a video and display some metadata

Browse source
This commit is contained in:
Timothy Flynn 2023-04-04 18:56:34 -04:00 • committed by Linus Groh
parent f156d3d5e5
commit 60100c1389
1 changed files with 72 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

72
Base/res/html/misc/video-webm.html Normal file
View file

@ -0,0 +1,72 @@
<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;
}
</style>
</head>
<body>
<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>Duration</td>
<td id=duration>0 seconds</td>
</tr>
<tr>
<td>Width</td>
<td id=width>0px</td>
</tr>
<tr>
<td>Height</td>
<td id=height>0px</td>
</tr>
</tbody>
</table>
<br />
<video id=video controls src="file:///home/anon/Videos/test-webm.webm"></video>
<script type="text/javascript">
let video = document.getElementById('video');
video.videoTracks.onaddtrack = (event) => {
document.getElementById('id').textContent = event.track.id;
document.getElementById('selected').textContent = event.track.selected;
};
video.addEventListener('durationchange', () => {
document.getElementById('duration').textContent = `${video.duration} seconds`;
});
video.addEventListener('loadedmetadata', () => {
document.getElementById('width').textContent = `${video.videoWidth}px`;
document.getElementById('height').textContent = `${video.videoHeight}px`;
});
</script>
</body>
</html>