0

I'm making a html5 video player and am using javascript to update the current time out of the total time. So far my script is 

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

I have an eventlistener at the start. So the script works, but it outputs it like 23.703/285.067513 How would I get it to output something like 00:00 / 00:00 Just like the youtube video player, so it would be like minute minute:second second / minute minute:second second. For my html, I just have a span <span id="timePlayed">00:00/00:00</span> If anyone can help me with this, thanks in advance!

blackhawk338
  • 386
  • 2
  • 3
  • 15

2 Answers2

0

I think, you can use an another function for it.Look what I found.

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

Community
  • 1
  • 1
earlymorningtea
  • 508
  • 1
  • 9
  • 20
0

You can do the following and solve your issues

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);
});

Then you must have this HTML Markup as defined

 <span id="currentTime">00:00:00</span> / <span id="durationTime">00:00:00</span>
Nwaedobadoo
  • 11
  • 1