Как определить продолжительность видео файла JavaScript и вывести его на сайте?

Question

[doktorpull]

Подскажите как с помощью JavaScript вывести на сайте общее время видео файла.

<h2>Видео контент номер 1</h2><span class="time">3:15</span>
<video id="myvideo" width="480" height="270">
	   <source src="http://doktorpull.myjino.ru/uploads/files/1388073459_pixel-news-v1.mp4">
    </video>

Нужно чтобы время файла выводилось вот тут
<span class="time">3:15</span>

Подскажите буду очень благодарен.

Answer 1

[itspers]

document.getElementById("myvideo").addEventListener('loadedmetadata', function() {
    console.log(document.getElementById("myvideo").duration);
});

Comments

[doktorpull]

@itspers а куда это писать

Answer 2

[Николай Васильчук]

(function(window) {
    var videoNode = window.document.querySelector('#myvideo');
    var timeNode = window.document.querySelector('.time');
    videoNode.addEventListener('loadedmetadata', function(e) {
        var duration = videoNode.duration.toFixed(1);
        var m = duration % 60;
        timeNode.innerText = Math.floor(duration / 60) + ':' + (m < 10 ? '0' : '') + m;
    });
})(window);

Comments

[doktorpull]

А если без id

[Николай Васильчук]

Что значит без id? У вас элемент video содержит только id

[Михей Егоров]

Я думаю автор имеет ввиду как использовать тот код для некоторого количества видеофайлов.

[doktorpull]

И нужно чтобы он не на странице выводился а в рамках вот span внутри него размещался (выводился)

[doktorpull]

Что то не работает вывод=((

[doktorpull]

@Anonym Что то не хочет выводить время файла

[Николай Васильчук]

Всё прекрасно работает. Вот пример jsfiddle.net/aQ849

Answer 3

[doktorpull]

<video  width="480" height="270">
       <source src="http://doktorpull.myjino.ru/uploads/files/1388073459_pixel-news-v1.mp4">
    </video>

Нет вот к такому можно будет обратиться?

Comments

[Николай Васильчук]

Можно. document.querySelector('video');

[doktorpull]

А можно немного поподробней. Желательно полный javascript

[Николай Васильчук]

В моём ответе выше поменяйте querySelector('#myvideo') на querySelector('video'), вот вам и весь код

[doktorpull]

Спасибо большое.

Answer 4

[doktorpull]

@Anonym вот же ничего не выводится? =(