diff --git a/src/Controls/Seek.astro b/src/Controls/Seek.astro index b777d0a..5714f3d 100644 --- a/src/Controls/Seek.astro +++ b/src/Controls/Seek.astro @@ -30,19 +30,12 @@ const { * for the JavaScript code in this page. * */ + +var Player = document.querySelector('#zorn-player-' + PlayerName + ' video') +Player.addEventListener('durationchange', (event) => {Seek()}) function Seek() { - var Player = document.querySelector('#zorn-player-' + PlayerName + ' video') const timeElapsed = document.querySelector('#zorn-player-' + PlayerName + ' #current') const duration = document.querySelector('#zorn-player-' + PlayerName + ' #duration') - function formatTime(timeInSeconds) { - const result = new Date(timeInSeconds * 1e3) - .toISOString() - .substr(11, 8) - return { - minutes: result.substr(3, 2), - seconds: result.substr(6, 2), - } - } function initializeVideo() { const videoDuration = Math.round(Player.duration) const time = formatTime(videoDuration) @@ -52,6 +45,15 @@ function Seek() { `${time.minutes}m ${time.seconds}s`, ) } + function formatTime(timeInSeconds) { + const result = new Date(timeInSeconds * 1e3) + .toISOString() + .substr(11, 8) + return { + minutes: result.substr(3, 2), + seconds: result.substr(6, 2), + } + } Player.addEventListener("loadedmetadata", initializeVideo) function updateTimeElapsed() { const time = formatTime(Math.round(Player.currentTime)) @@ -89,7 +91,7 @@ function Seek() { seek.setAttribute("data-seek", skipTo) const t = formatTime(skipTo) seekTooltip.textContent = `${t.minutes}:${t.seconds}` - const rect = Player.getBoundingClientRect() + const rect = progressBar.getBoundingClientRect() seekTooltip.style.left = `${event.pageX - rect.left}px` seekTooltip.style.opacity = '1' document.querySelector('#zorn-player-' + PlayerName + ' .vc-progress-bar').style.width = Player.currentTime / Player.duration * 100 + '%' @@ -110,5 +112,4 @@ function Seek() { initializeVideo() } -setTimeout(() => {Seek()}, 1000) // Prevent invalid date error \ No newline at end of file