class VideoPlayer { constructor() { this.video = document.getElementById("video"); this.video.addEventListener( "loadedmetadata", function () { this.init(); }.bind(this) ); } // Init init() { this.enableCustomControls(); this.addEventListeners(); 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); } // Přidání listenerů addEventListeners() { const videoControls = document.getElementById("video-controls"); const togleButton = document.getElementById("togglePlayIcon"); videoControls.addEventListener( "click", function (e) { if (e.target !== videoControls && e.target !== togleButton) { return; } this.togglePlay(); }.bind(this) ); this.video.addEventListener( "timeupdate", function () { this.updateProgress(); }.bind(this) ); this.video.addEventListener( "ended", function () { this.showButton(); }.bind(this) ); const seek = document.getElementById("seek"); seek.addEventListener("input", this.skipAhead); } 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() { const progressBar = document.getElementById("progress-bar"); video = document.getElementById("video"); let skipTo = this.value; 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"); } } // 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"; } } async getVideoDuration() { return Math.round(await this.video.duration); } }