RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 00:47:45 +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

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

@ -14,38 +14,58 @@
background-color: #333333; background-color: #333333;
color: #ffffff; color: #ffffff;
} }
.horizontal > * {
display: inline-block;
}
</style> </style>
</head> </head>
<body> <body>
<table> <div class=horizontal>
<thead> <table>
<tr> <thead>
<th colspan="2">Metadata</th> <tr>
</tr> <th colspan="2">Metadata</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>ID</td> <tr>
<td id=id>null</td> <td>ID</td>
</tr> <td id=id>null</td>
<tr> </tr>
<td>Is Selected</td> <tr>
<td id=selected>false</td> <td>Is Selected</td>
</tr> <td id=selected>false</td>
<tr> </tr>
<td>Duration</td> <tr>
<td id=duration>0 seconds</td> <td>Width</td>
</tr> <td id=width>0px</td>
<tr> </tr>
<td>Width</td> <tr>
<td id=width>0px</td> <td>Height</td>
</tr> <td id=height>0px</td>
<tr> </tr>
<td>Height</td> </tbody>
<td id=height>0px</td> </table>
</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 /> <br />
@ -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>