Question

我正在制作html5视频播放器并使用javascript来更新总时间中的当前时间。到目前为止我的脚本是

function updateTime() {
    var curTime = mediaPlayer.currentTime;
    var totTime = mediaPlayer.duration;
    timePlayed.innerHTML = curTime + '/' + totTime;
}

我在开始时有一个eventlistener。所以脚本可以正常工作，但它输出就像23.703/285.067513我怎样才能输出类似00:00 / 00:00的东西就像youtube视频播放器一样，所以它就像分钟：秒秒/分钟分钟：第二秒。对于我的HTML，我只有一个范围<span id="timePlayed">00:00/00:00</span> 如果有人可以帮助我，请提前感谢！

Answer 1

我想，你可以使用另一个功能。看看我发现的东西。

function formatSeconds(seconds)  {
var date = new Date(1970,0,1);
date.setSeconds(seconds);
return date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1"); }

https://stackoverflow.com/a/17781037/2500784

Answer 2

您可以执行以下操作并解决问题

video.addEventListener("timeupdate", function() {
  function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : minutes;
    var hours = Math.floor(minutes / 60);
    hours = (minutes >= 10) ? hours : hours;
    var seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : seconds;
    return hours + ":" + minutes + ":" + seconds;
}
var seconds = video.currentTime;
currentTime.innerHTML = formatTime(seconds);
});


video.addEventListener("timeupdate", function() {
function formatTime(seconds) {
    var minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : minutes;
    var seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : seconds;
    return minutes + ":" + seconds;
}
var seconds = video.duration;
durationTime.innerHTML = formatTime(seconds);
});

然后，您必须已定义此HTML标记

 <span id="currentTime">00:00:00</span> / <span id="durationTime">00:00:00</span>

Javascript自定义视频播放器当前时间/总时间

2 个答案: