web-dev-qa-db-fra.com

Attendez le chargement d'une vidéo HTML5

J'ai un tag vidéo, que je change dynamiquement de source car je laisse l'utilisateur choisir parmi plusieurs vidéos de la base de données. Le problème est que lorsque je change d'attribut src, la vidéo ne se charge pas, même si je le lui dis.

Voici mon code:

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

Le code reste toujours dans une boucle infinie.

De l'aide?

MODIFIER:

À 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 c'est le code que j'ai maintenant. La source est excellente, mais je n’ai toujours pas la durée: /

html5html5-video
32
Test Test

Vous n'avez pas vraiment besoin de jQuery pour cela car il existe une API média qui vous fournit tout ce dont vous avez besoin.

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

L'API média contient également une méthode load() qui: "Réinitialise l'élément et commence à sélectionner et à charger une nouvelle ressource média à partir de zéro."

(Ogg n’est pas le meilleur format à utiliser, car il n’est pris en charge que par un nombre limité de navigateurs. Je suggérerais d’utiliser WebM et MP4 pour couvrir tous les principaux navigateurs. Vous pouvez utiliser la fonction canPlayType() pour choisir lequel. un pour jouer).

Vous pouvez ensuite attendre que les événements loadedmetadata ou loadeddata (selon ce que vous souhaitez) déclenchent:

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

En réponse à la dernière partie de votre question, qui reste toujours sans réponse ... Lorsque vous écrivez $('#video').duration, vous demandez la propriété duration de l'objet de collection jQuery, qui n'existe pas. L'élément vidéo DOM natif a la durée. Vous pouvez l'obtenir de plusieurs façons. 

En voici un:

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

En voici un autre: 

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

Et un autre:

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

vous pouvez utiliser preload = "none" dans l'attribut de balise video pour que la vidéo ne s'affiche que lorsque l'utilisateur clique sur le bouton de lecture.

<video preload="none">

1
Gomzy

fonction d'appel en charge:

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

obtenir la durée de la vidéo

var video = document.getElementById("video");
var duration = video.duration;
0
Jacob Schneider