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

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
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,9 +14,14 @@
background-color: #333333; background-color: #333333;
color: #ffffff; color: #ffffff;
} }
.horizontal > * {
display: inline-block;
}
</style> </style>
</head> </head>
<body> <body>
<div class=horizontal>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -32,10 +37,6 @@
<td>Is Selected</td> <td>Is Selected</td>
<td id=selected>false</td> <td id=selected>false</td>
</tr> </tr>
<tr>
<td>Duration</td>
<td id=duration>0 seconds</td>
</tr>
<tr> <tr>
<td>Width</td> <td>Width</td>
<td id=width>0px</td> <td id=width>0px</td>
@ -47,6 +48,25 @@
</tbody> </tbody>
</table> </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 /> <br />
<video id=video controls src="file:///home/anon/Videos/test-webm.webm"></video> <video id=video controls src="file:///home/anon/Videos/test-webm.webm"></video>
@ -67,6 +87,16 @@
document.getElementById('width').textContent = `${video.videoWidth}px`; document.getElementById('width').textContent = `${video.videoWidth}px`;
document.getElementById('height').textContent = `${video.videoHeight}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> </script>
</body> </body>
</html> </html>