Skip to content
This repository was archived by the owner on Aug 16, 2022. It is now read-only.

Commit 3cf8bc3

Browse files
bboylebboyle
committed
skeleton page
- eslint rules - basic html page to select video, show video, show metadata, seek controls - basic styles - seek script to - sync and display currentTime - load video on selection - load and display json metadata on selection - seek to a specified time
1 parent 142432a commit 3cf8bc3

File tree

4 files changed

+155
-0
lines changed

4 files changed

+155
-0
lines changed

‎.eslintrc.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
"env": {
3+
"browser": true,
4+
"es6": true
5+
},
6+
"extends": "eslint:recommended",
7+
"rules": {
8+
"indent": [
9+
"error",
10+
"tab"
11+
],
12+
"linebreak-style": [
13+
"error",
14+
"windows"
15+
],
16+
"quotes": [
17+
"error",
18+
"single"
19+
],
20+
"semi": [
21+
"error",
22+
"always"
23+
]
24+
}
25+
};

‎index.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Video Test</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
12+
<div>
13+
<label for="select__video">Select video</label>
14+
<select id="select__video" name="video">
15+
<option value="">— select a video —</option>
16+
<optgroup label="FPS variations">
17+
<option value="6aiu25mm">6aiu25mm (run, 30 fps)</option>
18+
<option value="7m3nrtj3">7m3nrtj3 (run, 60 fps)</option>
19+
<option value="osduugn5">osduugn5 (run, 24 fps)</option>
20+
<option value="uqmg2ec3">uqmg2ec3 (run, 12 fps)</option>
21+
</optgroup>
22+
23+
<optgroup label="Sample videos (with audio)">
24+
<option value="crkgvdep">crkgvdep (jumping across poles)</option>
25+
<option value="fywv36h7">fywv36h7 (hot dog)</option>
26+
<option value="j7leazxy">j7leazxy (kitchen fight)</option>
27+
</optgroup>
28+
</select>
29+
</div>
30+
31+
32+
<div class="columns">
33+
<video crossorigin="use-credentials" autoplay loop src="" controls></video>
34+
35+
<div>
36+
<label for="text__metadata">Metadata</label>
37+
<textarea id="text__metadata" cols="80" rows="32" readonly></textarea>
38+
</div>
39+
</div>
40+
41+
42+
<dl>
43+
<dt>Current time:</dt>
44+
<dd><output id="output__currentTime"></output></dd>
45+
</dl>
46+
47+
48+
<form id="seek__time" onsubmit="seekTime(event)">
49+
<label for="input__time">Seek to time</label>
50+
<input id="input__time" type="number" step="0.000001" placeholder="0.000000" required>
51+
<button>Seek</button>
52+
</form>
53+
54+
<form id="seek__frame">
55+
<label for="input__frame">Seek to frame</label>
56+
<input id="input__frame" type="number" placeholder="1" required>
57+
<button>Seek</button>
58+
</form>
59+
60+
<form id="seek__frame--tenth">
61+
<label for="input__frame--tenth">Seek to frame + 0.1</label>
62+
<input id="input__frame--tenth" type="number" placeholder="1" required>
63+
+ 0.1
64+
<button>Seek</button>
65+
</form>
66+
67+
<form id="seek__frame--half">
68+
<label for="input__frame--half">Seek to frame + 0.5</label>
69+
<input id="input__frame--half" type="number" placeholder="1" required>
70+
+ 0.5
71+
<button>Seek</button>
72+
</form>
73+
74+
75+
<script src="video-seek.js"></script>
76+
</body>
77+
</html>

‎styles.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
body {
2+
font-family: sans-serif;
3+
}
4+
5+
.columns {
6+
display: flex;
7+
}
8+
9+
form {
10+
margin: 1em 0;
11+
}
12+
13+
label {
14+
display: inline-block;
15+
width: 10em;
16+
}

‎video-seek.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const videoSelector = document.querySelector('#select__video');
2+
const videoElement = document.querySelector('video');
3+
const outputTime = document.querySelector('#output__currentTime');
4+
5+
6+
function showVideoJson(json) {
7+
document.querySelector('#text__metadata').value = json;
8+
}
9+
10+
11+
function selectVideo() {
12+
const selectedVideoId = videoSelector.value;
13+
videoElement.src = `src/${selectedVideoId}.webm`;
14+
15+
fetch(`src/${selectedVideoId}.webm_mse_manifest.json`)
16+
.then(response => response.text())
17+
.then(showVideoJson);
18+
}
19+
20+
21+
function showCurrentTime() {
22+
outputTime.textContent = `${videoElement.currentTime.toFixed(6)} seconds`;
23+
}
24+
25+
26+
function seekTime(event) {
27+
event.preventDefault();
28+
videoElement.pause();
29+
videoElement.currentTime = document.querySelector('#input__time').valueAsNumber;
30+
}
31+
32+
33+
34+
35+
36+
videoSelector.addEventListener('change', selectVideo);
37+
videoElement.addEventListener('timeupdate', showCurrentTime);

0 commit comments

Comments
 (0)