Дождитесь загрузки видео в формате HTML5

У меня есть тег видео, что я динамически меняю его источник, поскольку я позволяю пользователю выбирать из нескольких видео из базы данных. Проблема в том, что когда я изменяю атрибут src, видео не загружается, даже если я ему говорю.

Вот мой код:

$("#video").attr('src', 'my_video_'+value+'.ogg');
$("#video").load();
while($("#video").readyState !== 4) {
        console.log("Video is not ready");
};

Код остается в бесконечном цикле.

Любая помощь?

ИЗМЕНИТЬ

Яну Девлину:

//add an listener on loaded metadata
v.addEventListener('loadeddata', function() {
    console.log("Loaded the video data!");
    console.log("Video Source: "+ $('#video').attr('src'));
    console.log("Video Duration: "+ $('#video').duration);
}, false);

Хорошо, это код, который у меня есть. Источник отлично печатает, но я до сих пор не могу получить продолжительность:/

Ответы

Ответ 1

Вам не нужен jQuery для этого, поскольку есть Media API, который предоставляет вам все, что вам нужно.

var video = document.getElementById('myVideo');
video.src = 'my_video_' + value + '.ogg';
video.load();

В Media API также содержится метод load(), который: "Вызывает элемент reset и начинает выбор и загрузку нового носителя ресурс с нуля".

(Ogg не лучший формат для использования, поскольку он поддерживается только ограниченным количеством браузеров. Я бы предложил использовать WebM и MP4 для охвата всех основных браузеров - вы можете использовать canPlayType(), чтобы решить, какой из них будет играть).

Вы можете подождать либо loadedmetadata, либо loadeddata (в зависимости от того, что вы хотите):

video.addEventListener('loadeddata', function() {
   // Video is loaded and can be played
}, false);

Ответ 2

В ответ на заключительную часть вашего вопроса, которая до сих пор остается без ответа... Когда вы пишете $('#video').duration, вы запрашиваете свойство duration объекта коллекции jQuery, которого не существует. Нативный элемент видео DOM имеет продолжительность. Вы можете получить это несколькими способами.

Здесь один:

// get the native element directly
document.getElementById('video').duration

Здесь другое:

// get it out of the jQuery object
$('#video').get(0).duration

И еще:

// use the event object
v.bind('loadeddata', function(e) {
  console.log(e.target.duration);
});

Ответ 3

функция вызова при загрузке:

<video onload="doWhatYouNeedTo()" src="demo.mp4" id="video">

получить продолжительность видео

var video = document.getElementById("video");
var duration = video.duration;