-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
70 lines (57 loc) · 1.59 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
const video = document.getElementById("video");
const play = document.getElementById("play");
const stopButton = document.getElementById("stop");
const progress = document.getElementById("progress");
const timestamp = document.getElementById("timestamp");
/**
* Play and Pause Video
*/
function toggleVideoStatus() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
// update play/pause icon
function updatePlayIcon() {
if (video.paused) {
play.innerHTML = `<i class="fa fa-play fa-2x"></i>`;
} else {
play.innerHTML = `<i class="fa fa-pause fa-2x"></i>`;
}
}
// update progress & timestamp
function updateProgress() {
progress.value = (video.currentTime / video.duration) * 100;
// get minutes
let mins = Math.floor(video.currentTime / 60);
if (mins < 10) {
mins = "0" + String(mins);
}
// get seconds
let secs = Math.floor(video.currentTime % 60);
if (secs < 10) {
secs = "0" + String(secs);
}
timestamp.innerHTML = `${mins}:${secs}`;
}
// set video time sync'ly with progress
function setVideoProgress() {
video.currentTime = (+progress.value * video.duration) / 100;
}
// stop video
function stopVideo() {
video.currentTime = 0;
video.pause();
}
/**
* Event Listeners
*/
video.addEventListener("click", toggleVideoStatus);
video.addEventListener("pause", updatePlayIcon);
video.addEventListener("play", updatePlayIcon);
video.addEventListener("timeupdate", updateProgress);
play.addEventListener("click", toggleVideoStatus);
stopButton.addEventListener("click", stopVideo);
progress.addEventListener("change", setVideoProgress);