system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-23 11:04:40 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Base: Add playback state data to the video test page

Browse source
This commit is contained in:
Timothy Flynn 2023-04-08 09:18:09 -04:00 committed by Linus Groh
parent d99a075ff9
commit 90e1d4f545
1 changed files with 59 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
Base/res/html/misc/video-webm.html
View file

@ -14,38 +14,58 @@
background-color: #333333;
color: #ffffff;
}
.horizontal > * {
display: inline-block;
}
</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>
<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>Duration</td>
<td id=duration>0 seconds</td>
</tr>
<tr>
<td>Play State</td>
<td id=state>paused</td>
</tr>
</tbody>
</table>
</div>
<br />
@ -67,6 +87,16 @@
document.getElementById('width').textContent = `${video.videoWidth}px`;
document.getElementById('height').textContent = `${video.videoHeight}px`;
});
video.addEventListener('playing', () => {
document.getElementById('state').textContent = 'playing';
});
video.addEventListener('waiting', () => {
document.getElementById('state').textContent = 'waiting';
});
video.addEventListener('pause', () => {
document.getElementById('state').textContent = 'paused';
});
</script>
</body>
</html>