Espere até que um vídeo em HTML5 seja carregado

Eu tenho uma tag de vídeo, que eu mudo dinamicamente a sua fonte como eu estou permitindo que o usuário escolha entre um número de vídeos do database. O problema é que quando eu mudo o atributo src, o vídeo não carrega, mesmo se eu disser.

Aqui está o meu código:

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

O código ainda permanece em um loop infinito.

Qualquer ajuda?

EDITAR :

Para Ian Devlin:

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

Ok, este é o código que tenho agora. A fonte imprime ótima, mas ainda não consigo a duração: /

Você realmente não precisa do jQuery para isso, pois há uma API de mídia que fornece tudo o que você precisa.

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

A API de mídia também contém um método load() que: “Faz com que o elemento seja redefinido e comece a selecionar e carregar um novo recurso de mídia do zero.”

(Ogg não é o melhor formato para usar, pois é suportado apenas por um número limitado de navegadores. Eu sugiro usar WebM e MP4 para cobrir todos os principais navegadores – você pode usar a function canPlayType() para decidir qual deles Toque).

Você pode esperar que os loadedmetadata ou loadeddata (dependendo do que você deseja) sejam triggersdos:

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

Em resposta à parte final de sua pergunta, que ainda não foi respondida … Quando você escreve $('#video').duration , você está pedindo a propriedade de duration do object de coleção jQuery, que não existe. O elemento de vídeo DOM nativo tem a duração. Você pode conseguir isso de algumas maneiras.

Aqui está um:

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

Aqui está outro:

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

E outro:

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

você pode usar preload = “none” no atributo da tag de vídeo para que o vídeo só seja exibido quando o usuário clicar no botão play.

  

function de chamada na carga:

  

obter duração do vídeo

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