You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

88 lines
2.4 KiB
JavaScript

class VideoPlayer {
constructor() {
this.video = document.getElementById("video");
this.enableCustomControls();
}
updateVideoDuration() {
this.videoDuration = Math.round(this.video.duration);
const seek = document.getElementById("seek");
seek.setAttribute("max", this.videoDuration);
seek.value = 0;
const progressBar = document.getElementById("progress-bar");
progressBar.setAttribute("max", this.videoDuration);
}
enableCustomControls() {
const video = document.getElementById("video");
const videoControls = document.getElementById("video-controls");
const videoWorks = !!document.createElement("video").canPlayType;
if (videoWorks) {
video.controls = false;
videoControls.classList.remove("hidden");
}
}
// Posouvání ve videu
skipAhead(skipTo) {
const progressBar = document.getElementById("progress-bar");
const video = document.getElementById("video");
video.currentTime = skipTo;
progressBar.value = skipTo;
}
// Aktualizování progress baru
updateProgress() {
const seek = document.getElementById("seek");
const progressBar = document.getElementById("progress-bar");
seek.value = Math.floor(this.video.currentTime);
progressBar.value = Math.floor(this.video.currentTime);
if (this.video.currentTime == this.videoDuration) {
this.showButton();
console.log("here");
}
}
updateVolume() {
const volume = document.getElementById("volume");
const volumeBar = document.getElementById("volume-bar-value");
if (video.muted) {
video.muted = false;
}
video.volume = volume.value / 100;
volumeBar.style.width = volume.value + "%";
}
// Play pause
togglePlay() {
if (this.video.paused || this.video.ended) {
this.video.play();
this.showButton();
} else {
this.video.pause();
this.showButton();
}
}
// Zobrazenení a změna tlačítka k přehrávání
showButton() {
let playButton = document.getElementById("togglePlayIcon");
if (this.video.ended) {
playButton.setAttribute("src", "./img/play.svg");
playButton.style.removeProperty("display");
} else if (this.video.paused) {
playButton.setAttribute("src", "./img/pause.svg");
playButton.style.removeProperty("display");
} else {
playButton.style.display = "none";
}
}
getVideoDuration() {
return Math.round(this.video.duration);
}
}