在计时器上显示当前视频时间（小时：分钟：秒）

Question

我有一个简单的计时器，它在我的页面上显示视频的当前时间。 遗憾的是，它仅限于显示分钟和秒，如果视频持续时间长于计时器可以处理的时间，它会在某个时候开始显示不正确的值。 一小时后，它将开始显示类似 61:01 (min:sec) 的内容，这是一个真正的问题。

 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>

可悲的是，我没有任何长达一小时的视频来展示这个问题......所以有人可以解释我应该如何构建这个小功能以便它能够显示小时吗？ 现在我只找到了一个有问题且非常不可靠的方式，但在这里展示太可悲了。

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>

快乐编码。