Skip to content

Commit ae8b93d

Browse files
andrewglassettandrewglassett
authored
Merge pull request #26 from andrewglassett/video-controller
Video controller
2 parents 3bd9d4e + caf4a3f commit ae8b93d

File tree

3 files changed

+39
-58
lines changed

3 files changed

+39
-58
lines changed

‎28 - Video Speed Controller/index-FINISHED.html

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎28 - Video Speed Controller/index-START.html

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎28 - Video Speed Controller/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Video Speed Scrubber</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<div class="wrapper">
11+
<video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop controls></video>
12+
<div class="speed">
13+
<div class="speed-bar">1×</div>
14+
</div>
15+
</div>
16+
17+
<script>
18+
const speed = document.querySelector('.speed');
19+
const bar = speed.querySelector('.speed-bar');
20+
const video = document.querySelector('.flex');
21+
22+
function handleMove(e) {
23+
const y = e.pageY - this.offsetTop;
24+
const percent = y / this.offsetHeight;
25+
const min = 0.4;
26+
const max = 4;
27+
const height = Math.round(percent * 100) + '%';
28+
const playbackRate = percent * (max - min) + min;
29+
bar.style.height = height;
30+
bar.textContent = playbackRate.toFixed(2) + 'x';
31+
video.playbackRate = playbackRate;
32+
console.log(percent);
33+
}
34+
speed.addEventListener('mousemove', handleMove);
35+
36+
37+
</script>
38+
</body>
39+
</html>

0 commit comments

Comments
 (0)