-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
49 lines (38 loc) · 1.33 KB
/
index.js
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
const video = document.getElementById("video");
// Control panel
const play = document.getElementById("play-video");
const progress = document.getElementById("progress-bar");
const progressCounter = document.getElementById("progress-counter");
/* Toggle play and pause */
play.addEventListener("click", playPauseVideo);
function playPauseVideo() {
const pauseIcon = document.getElementById("pause-icon");
const playIcon = document.getElementById("play-icon");
if (video.paused) {
video.play();
pauseIcon.removeAttribute("hidden", "");
playIcon.setAttribute("hidden", "");
} else {
video.pause();
pauseIcon.setAttribute("hidden", "");
playIcon.removeAttribute("hidden", "");
}
}
/* Update progress bar */
function setProgressBarAttributes() {
const duration = video.duration;
progress.setAttribute("max", duration);
const displayDuration = new Date(Math.floor(duration) * 1000)
.toISOString()
.slice(14, 19);
progressCounter.innerText = displayDuration;
console.log(displayDuration);
}
window.addEventListener("load", setProgressBarAttributes);
function updateElapsedTime() {
progress.setAttribute("value", video.currentTime);
progressCounter.innerText = new Date(Math.floor(video.currentTime) * 1000)
.toISOString()
.slice(14, 19);
}
video.addEventListener("timeupdate", updateElapsedTime);