Конвертировать <video>значения времени в 2 десятичных знака

Question

Я пытаюсь извлечь значения длительности и currentTime из видео HTML5. Мне удалось сделать это успешно, однако значения выводятся в виде длинных строк, тогда как я хотел бы 2 знака после запятой. Кроме того, вместо того, чтобы отображать только секунды, я хотел бы преобразовать оба раза в читаемый человеком формат, т.е. мм: сс

Например, вместо 4.366561 / 87.445 я хочу отобразить 00:04 / 01: 27

Наконец, текущее значение времени обновляется по мере продвижения видео, поэтому решение должно принять это во внимание.

Спасибо!

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

Answer 1

Да, вы можете использовать эту функцию для форматирования вашего номера в 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"
  }
};

Вот пример:

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>

Answer 2

Этого можно добиться, используя расчеты деления и модуля:

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

Пример:

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>