2015-09-22 3 views
1

Ищу для отображения видео длиной в следующих двух форматах:Vanilla JS - Просмотр видео Длина (если заявление)

, если менее 59 секунд:

{no_of_sec}

если выше 59 секунд:

{no_of_sec}: {} no_of_sec

в настоящее время этот код:

document.getElementById("video2").duration 

Возвращает следующее значение:

18.133313 

Мне нужно только это нужно roundest до ближайшей секунды, а затем в формате выше. Не переусердствуя, я полагаю, мне нужно округлить его. Это можно сделать с помощью Math.round(), но когда число превышает 59 секунд, я нахожусь в борьбе.

Я планирую поставить это в функцию, которая бы перебрать видео элементов с классом под названием:

.has--videoDuration 

Любые идеи?

+0

Вы ищете решение только для ванильного JavaScript? как насчет moment.js? – cassln

ответ

0

Учитывая общее количество секунд, вы можете вычислить минуты/секунды компоненты, как показано в приведенном ниже фрагменте кода:

var totalSeconds = 18.133313; 
 

 
var minutes = Math.floor(totalSeconds/60); 
 
var seconds = Math.floor(totalSeconds % 60); 
 

 
alert(minutes + ':' + seconds);

+0

Привет @ w0lf означает ли это, что если totalSeconds было 18.5111, оно вернется как 18? – Neil

+0

@Neil Да, в этом случае 'minutes' будет' 0' и 'seconds' будет' 18'. – GolfWolf

+0

Я предполагаю, что лучше принести время, чем округлить его. У вас есть рекомендация по коду для использования этого в каждом цикле или jQuery .each? – Neil

0

Опираясь на свой код:

var duration = Math.round(document.getElementById("video2").duration); 
var minutes = ~~(duration/60); // 1 minute every 60 seconds 
var seconds = duration - 60 * minutes; // Remaining seconds 
var timeString = minutes ? (minutes + ':' + seconds) : seconds; 

Я думаю, что timeString - это то, что вы ищете.

BTW: Я бы предпочел использовать Math.floor на время (или ~~), но точный выбор продолжительности нормализации не зависит от остальных.

+0

Привет @florian Я не знаком с ~~, что это определяет/вызывается? – Neil

+0

Это в основном короткая форма 'Math.floor' - оператор' ~ 'побитообразный, который работает только с целыми числами Поэтому значение будет выдано на число (в нашем случае это уже число) и преобразуется в целое число (которое мы хотим). Однако теперь значение теперь отрицается. Теперь мы делаем побитовое, а не восстанавливаем оригинал (целочисленное) значение. Таким образом, '~~' поэтому эквивалентно '(int)' приложению в PL на основе типа. Он работает точно так же, как 'Math.пол' для положительных целых чисел, но как «Math.ceil» для отрицательных. Таким образом, он усекает значение. –

+0

Спасибо за продолжение! – Neil

Смежные вопросы