|
@@ -0,0 +1,59 @@
|
|
|
|
|
+<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>Current Source</td>
|
|
|
|
|
+ <td id=src>null</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ <tr>
|
|
|
|
|
+ <td>Is Selected</td>
|
|
|
|
|
+ <td id=selected>false</td>
|
|
|
|
|
+ </tr>
|
|
|
|
|
+ </tbody>
|
|
|
|
|
+ </table>
|
|
|
|
|
+
|
|
|
|
|
+ <br />
|
|
|
|
|
+
|
|
|
|
|
+ <video id=video controls>
|
|
|
|
|
+ <source>
|
|
|
|
|
+ <source src="">
|
|
|
|
|
+ <source src="Yo I don't exist!">
|
|
|
|
|
+ <source src="../../../home/anon/Videos/test-webm.webm">
|
|
|
|
|
+ </video>
|
|
|
|
|
+
|
|
|
|
|
+ <script type="text/javascript">
|
|
|
|
|
+ let video = document.getElementById('video');
|
|
|
|
|
+
|
|
|
|
|
+ video.videoTracks.onaddtrack = (event) => {
|
|
|
|
|
+ document.getElementById('selected').textContent = event.track.selected;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ video.addEventListener('loadedmetadata', () => {
|
|
|
|
|
+ document.getElementById('src').textContent = video.currentSrc;
|
|
|
|
|
+ });
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|
Timothy Flynn