CODEWITHSUNDEEP
jqueryvideotime
dungey_140
dungey_140

Reputation: 2802

Convert <video> time values to 2 decimal places

I am trying to extract duration and currentTime values from a HTML5 video. I have managed to do this successfully, however the values are output in long strings, whereas I would like 2 decimal places. In addition, rather than only displaying seconds, I would like to convert both times to a human readable format i.e mm:ss

For example, rather than 4.366561 / 87.445 I want to display 00:04 / 01:27

Finally, the current Time value is updated as the video progresses, so the solution needs to take this into account.

Thanks!

HTML

<video id="video" src="video-url.com" preload></video>
<span class="current">0:00s</span> <span>/</span> <span class="duration">0:00s</span>

Jquery

var video = $('#video');

$(video).on('loadedmetadata', function() {
  $('.duration').text(video[0].duration);
});

// Update video current time as video plays
$(video).on('timeupdate', function() {
  $('.current').text(video[0].currentTime);
});

Upvotes: 0

Views: 704

Answers (3)

ASC
ASC

Reputation: 43

.toFixed() is the solution

$(video).on('timeupdate', function() {
  $('.current').text(video[0].currentTime.toFixed(2));
});

Upvotes: 0

Austin Perez
Austin Perez

Reputation: 597

Yes, You can use this function to format your number to MM:SS

function formatTime(time) {
  if (time < 5999) {
    // MM:SS
    var minutes = Math.floor(time / 60);
    var seconds = Math.round(time - (minutes * 60));

    if (minutes < 10) { minutes = "0" + minutes }
    if (seconds < 10) { seconds = "0" + seconds }

    return minutes + ":" + seconds + "s"
  } else {
    return "Exceeds time"
  }
};

Here is an example: 

var current = 4.366561;
var duration = 87.445;

$('.duration').text(formatTime(duration));
$('.current').text(formatTime(current));


function formatTime(time) {
  if (time < 5999) {
    // MM:SS
    var minutes = Math.floor(time / 60);
    var seconds = Math.round(time - (minutes * 60));

    if (minutes < 10) { minutes = "0" + minutes }
    if (seconds < 10) { seconds = "0" + seconds }

    return minutes + ":" + seconds + "s"
  } else {
    return "Exceeds time"
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="current">0:00s</span>
<span class="duration">0:00s</span>

Upvotes: 1

Jan
Jan

Reputation: 2853

You can achieve this by using division and module calculations:

let current = 4.366561;
let duration = 87.445;

function prettyTime(t) {
  let minutes = Math.floor(t / 60);
  if (minutes<10) minutes = '0' + minutes;
  let seconds = Math.floor(t % 60);
  if (seconds<10) seconds = '0' + seconds;
  return `${minutes}:${seconds}`;
}

console.log( prettyTime(current) );
console.log( prettyTime(duration) );

Example:

function prettyTime(t) {
  let minutes = Math.floor(t / 60);
  if (minutes<10) minutes = '0' + minutes;
  let seconds = Math.floor(t % 60);
  if (seconds<10) seconds = '0' + seconds;
  return `${minutes}:${seconds}`;
}

let video = $('#video');

$(video).on('loadedmetadata', function() {
  $('.duration').text( prettyTime(video[0].duration) );
});

$(video).on('timeupdate', function() {
  $('.current').text( prettyTime(video[0].currentTime) );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video id="video" width="320" height="240" controls>
  <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
  <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
</video>

<br>
<span class="current">00:00</span> <span>/</span> <span class="duration">00:00</span>

Upvotes: 0

Related Questions