html-video-test/index.html at master · AnimationMentor/html-video-test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Video Test</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>

	<div>
		<label for="select__video">Select video</label>
		<select id="select__video" name="video">
			<option value="">— select a video —</option>
			<optgroup label="FPS variations">
				<option value="6aiu25mm">6aiu25mm (run, 30 fps)</option>
				<option value="7m3nrtj3">7m3nrtj3 (run, 60 fps)</option>
				<option value="osduugn5">osduugn5 (run, 24 fps)</option>
				<option value="uqmg2ec3">uqmg2ec3 (run, 12 fps)</option>
			</optgroup>

			<optgroup label="Sample videos (with audio)">
				<option value="crkgvdep">crkgvdep (jumping across poles)</option>
				<option value="fywv36h7">fywv36h7 (hot dog)</option>
				<option value="j7leazxy">j7leazxy (kitchen fight)</option>
			</optgroup>
		</select>
	</div>


	<div class="columns">
		<video crossorigin="use-credentials" autoplay loop src="" controls></video>
		<textarea id="text__metadata" cols="80" rows="32" readonly aria-label="Metadata"></textarea>
	</div>


	<table>
		<thead>
			<tr>
				<th>Time</th>
				<th>Frame</th>
				<th>FPS</th>
				<th>seconds per frame</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><output id="output__currentTime">-</output></td>
				<td><output id="output__currentFrame">-</output></td>
				<td><output id="output__frameRate">24</output></td>
				<td><output id="output__frameDuration">-</output></td>
			</tr>
		</tbody>
	</table>


	<form id="seek__time" onsubmit="seekTime(event)">
		<label for="input__time">Seek to seconds</label>
		<input  id="input__time" type="number" step="0.000001" value="0.000000" required>
		<button>Seek</button>
	</form>

	<form id="seek__frame" onsubmit="seekFrame(event)">
		<label for="input__frame">Seek to frame</label>
		<input  id="input__frame" type="number" value="1" required>
		<button>Seek</button>
		<button type="button">-1</button>
		<button type="button">+1</button>
	</form>

	<form id="seek__frame--tenth" onsubmit="seekFrameTenth(event)">
		<label for="input__frame--tenth">Frame (+ tenth frame)</label>
		<input  id="input__frame--tenth" type="number" value="1" required>
		<button>Seek</button>
		<button type="button">-1</button>
		<button type="button">+1</button>
	</form>

	<form id="seek__frame--half" onsubmit="seekFrameHalf(event)">
		<label for="input__frame--half">Frame (+ half frame)</label>
		<input  id="input__frame--half" type="number" value="1" required>
		<button>Seek</button>
		<button type="button">-1</button>
		<button type="button">+1</button>
	</form>


	<button type="reset" onclick="reset()">Reset</button>


	<script src="video-seek.js"></script>
</body>
</html>