在计时器上显示当前视频时间(小时:分钟:秒)

Question

我有一个简单的计时器，它在我的页面上显示视频的当前时间。遗憾的是，它仅限于显示分钟和秒，如果视频持续时间超过计时器所能处理的时间，它将在某个时候开始显示错误的值。一个小时后，它将开始显示类似61:01(分：秒(的内容，这是一个真正的问题。

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>

快乐的溺爱。