Как вывести оставшееся время видео в блок?

Рейтинг: 0Ответов: 1Опубликовано: 10.02.2023

Есть простое HTML5-видео. Можно ли в отдельный блок вывести оставшееся время видео? Чтобы в блоке таймер считал, сколько осталось до конца видео?

<video class="video js-video">
    <source src="./video/video.mp4" type="video/mp4">
</video>

<div class="countdown">Тут выводим оставшееся время до конца видео</div>
javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Основываясь на своём ответе, вот решение:

let video = document.querySelector('video')
let countdown = document.querySelector('.countdown')

video.addEventListener('loadedmetadata', setCountdown)

video.addEventListener('timeupdate', setCountdown)

function setCountdown() {
  let secondsLeft = video.duration - video.currentTime
  let timeLeft = convertSeconds(secondsLeft)

  countdown.textContent = timeLeft
}

function convertSeconds(sec) {
  let date = new Date(1970, 0, 0, 0, 0, +sec || 0)
  let time = date.toLocaleTimeString('ru')

  return time
}
<video class="video js-video" controls>
    <source src="https://file-examples.com/storage/fe863385e163e3b0f92dc53/2017/04/file_example_MP4_640_3MG.mp4" type="video/mp4">
</video>

<div class="countdown">00:00:00</div>