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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
const video = document.getElementById("video");
const videoParent = document.getElementById("video-parent");
const videoSection = document.getElementById("video-section");
const videoControlsProgress = document.getElementById("video-controls-progress");
const videoControlsPlay = document.getElementById("video-controls-play");
const videoControlsVolume = document.getElementById("video-controls-mutetoggle");
const videoControlsMaximise = document.getElementById("video-controls-maximise");
const videoControlsTimeCurrent = document.getElementById("video-controls-currenttime");
const videoControlsTimeTotal = document.getElementById("video-controls-totaltime");
let videoPlaying = false;
let audioEnabled = true;
let videoMaximised = false;
function toggleVideo() {
if (videoPlaying) {
videoPlaying = false;
videoControlsPlay.innerHTML = `<i class="fa-solid fa-play"></i>`;
video.pause();
} else {
videoPlaying = true;
videoControlsPlay.innerHTML = `<i class="fa-solid fa-pause"></i>`;
video.play();
}
}
function videoUpdate() {
videoControlsProgress.value = video.currentTime / video.duration;
videoControlsTimeCurrent.innerHTML = secondsToFormatted(video.currentTime);
updateSlider();
}
function updateSlider() {
const value = (videoControlsProgress.value - videoControlsProgress.min) / (videoControlsProgress.max - videoControlsProgress.min) * 100;
videoControlsProgress.style.background = `linear-gradient(to right, var(--accent1) 0%, var(--accent2) ${value}%, #ddd ${value}%, #ddd 100%)`;
}
function seekVideo() {
updateSlider();
const time = videoControlsProgress.value * video.duration;
video.currentTime = time;
}
function toggleAudio() {
if (audioEnabled) {
audioEnabled = false;
videoControlsVolume.innerHTML = `<i class="fa-solid fa-volume-xmark"></i>`;
video.muted = true;
} else {
audioEnabled = true;
videoControlsVolume.innerHTML = `<i class="fa-solid fa-volume"></i>`;
video.muted = false;
}
}
function toggleMaximisation() {
if (videoMaximised) {
videoMaximised = false;
videoControlsMaximise.innerHTML = `<i class="fa-solid fa-maximize"></i>`;
videoParent.classList.remove("video-fullscreen");
videoSection.appendChild(videoParent);
document.exitFullscreen();
} else {
videoMaximised = true;
videoControlsMaximise.innerHTML = `<i class="fa-solid fa-minimize"></i>`;
videoParent.classList.add("video-fullscreen");
document.body.appendChild(videoParent);
document.documentElement.requestFullscreen();
}
}
function secondsToFormatted(seconds) {
seconds = Math.round(seconds);
let hours = seconds / 3600;
let hoursMod = seconds % 3600; // in seconds
let minutes = hoursMod / 60;
let secs = hoursMod % 60;
if (hours >= 1) {
return `${Math.floor(hours)}:${Math.floor(minutes).toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
} else {
return `${Math.floor(minutes).toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`
}
}
videoControlsProgress.value = 0;
updateSlider();
video.addEventListener("loadeddata", function () {
videoControlsTimeTotal.innerHTML = `/${secondsToFormatted(video.duration)}`
});
videoControlsProgress.addEventListener("input", seekVideo);
videoControlsPlay.addEventListener("click", toggleVideo);
videoControlsVolume.addEventListener("click", toggleAudio);
videoControlsMaximise.addEventListener("click", toggleMaximisation);
video.addEventListener("timeupdate", videoUpdate);
|
