forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscripts.js
More file actions
65 lines (54 loc) · 2.2 KB
/
scripts.js
File metadata and controls
65 lines (54 loc) · 2.2 KB
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
// Get elements
const video = document.querySelector('video');
const playButton = document.querySelector('.toggle');
const skipButtons = document.querySelectorAll('[data-skip]');
const ranges = document.querySelectorAll('input[type=range]');
const progressBar = document.querySelector('div.progress__filled');
const progress = document.querySelector('div.progress');
let clickedOnRange = false;
let clickOnProgress = false;
// Build functions
function togglePlay() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function skip() {
video.currentTime += parseFloat(this.dataset.skip);
}
function handleRangeChange (event) {
if (clickedOnRange || event.type === 'change') {
video[this.name] = this.value;
}
}
function handleScrub(e) {
if (clickOnProgress || e.type === 'click') {
let newTime = (e.offsetX / progress.offsetWidth) * video.duration;
video.currentTime = newTime;
}
}
function handleProgress() {
let percent = (video.currentTime / video.duration) * 100;
progressBar.style.flexBasis = `${percent}%`;
}
// Hook everything up
playButton.addEventListener('click', togglePlay);
video.addEventListener('click', togglePlay);
video.addEventListener('pause', () => playButton.innerHTML = '►');
video.addEventListener('play', () => playButton.innerHTML = 'II');
video.addEventListener('timeupdate', handleProgress);
skipButtons.forEach(button => {
button.addEventListener('click', skip);
});
ranges.forEach(range => range.addEventListener('change', handleRangeChange));
ranges.forEach(range => range.addEventListener('mousemove', handleRangeChange));
ranges.forEach(range => range.addEventListener('mousedown', () => clickedOnRange = true));
ranges.forEach(range => range.addEventListener('mouseleave', () => clickedOnRange = false));
ranges.forEach(range => range.addEventListener('mouseup', () => clickedOnRange = false));
progress.addEventListener('click', handleScrub);
progress.addEventListener('mousemove', handleScrub);
progress.addEventListener('mousedown', () => clickOnProgress = true);
progress.addEventListener('mouseleave', () => clickOnProgress = false);
progress.addEventListener('mouseup', () => clickOnProgress = false);