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); } }