Показывать текущее видео по таймеру (часы: минуты: секунды)

Question

У меня есть простой таймер, который отображает текущее время видео на моей странице. К сожалению, он ограничен показом только минут и секунд. Если продолжительность видео больше, чем может обработать таймер, в какой-то момент он начнет отображать неправильное значение. Через час он начнет отображать что-то вроде 61:01 (min: se c). И это реальная проблема.

let video = document.querySelector('video');
let counter = document.querySelector('p');
let hrs, mins, secs;

window.setInterval(() => {
  mins = Math.floor(video.currentTime / 60);
  secs = Math.floor(video.currentTime % 60);
      if (secs < 10) {
        secs = '0' + String(secs);
      }
  counter.textContent = mins + ':' + secs;
},1000);

<video controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" height='200px' width='330px'></video>
<p></p>

К сожалению, у меня нет часовых видео, чтобы показать проблему .... Так может кто-нибудь объяснить мне, как мне построить эту маленькую функцию так он способен отображать часы? Прямо сейчас я нашел только глючный и очень ненадежный способ, но он слишком патетичен c для показа здесь.

Answer 1

Тебе нравится?

<video
  controls
  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  height="200px"
  width="330px"
></video>
<p></p>

<script>
  function secondsToHms(d) {
    d = Number(d);
    var h = Math.floor(d / 3600);
    var m = Math.floor((d % 3600) / 60);
    var s = Math.floor((d % 3600) % 60);

    var hDisplay = h + ":";
    var mDisplay = m + ":";
    var sDisplay = s;

    return hDisplay + mDisplay + sDisplay;
  }

  let video = document.querySelector("video");
  let counter = document.querySelector("p");
  let hrs, mins, secs;

  window.setInterval(() => {
    counter.textContent = secondsToHms(video.currentTime);
  }, 0);
</script>

Удачного кодирования.