it-swarm.com.de

Warten Sie, bis ein HTML5-Video geladen wird

Ich habe ein Video-Tag, bei dem ich dynamisch die Quelle ändere, da der Benutzer aus einer Reihe von Videos aus der Datenbank auswählen kann. Das Problem ist, dass, wenn ich das SRC-Attribut ändere, das Video nicht geladen wird, auch wenn ich es sage.

Hier ist mein Code:

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

Der Code bleibt in einer Endlosschleife.

Irgendeine Hilfe?

EDIT:

An 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, das ist der Code, den ich jetzt habe. Die Quelle wird gut gedruckt, aber ich kann die Dauer immer noch nicht abrufen: /

32
Test Test

Sie brauchen jQuery dafür nicht wirklich, da es eine Media API gibt, die Ihnen alles bietet, was Sie brauchen.

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

Die Medien-API enthält außerdem eine load() -Methode, die Folgendes bewirkt: "Das Element wird zurückgesetzt und beginnt mit der Auswahl und dem Laden einer neuen Medienressource von Grund auf."

(Ogg ist nicht das beste zu verwendende Format, da es nur von einer begrenzten Anzahl von Browsern unterstützt wird. Ich würde vorschlagen, WebM und MP4 zu verwenden, um alle gängigen Browser abzudecken. Sie können die Funktion canPlayType() verwenden, um zu entscheiden, welches verwendet wird einer zu spielen).

Sie können dann warten, bis entweder die loadedmetadata oder loadeddata (je nachdem, was Sie möchten) ausgelöst wird:

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

Als Antwort auf den letzten Teil Ihrer Frage, der immer noch unbeantwortet bleibt ... Wenn Sie $('#video').duration schreiben, fragen Sie nach der duration-Eigenschaft des jQuery-Auflistungsobjekts, die nicht vorhanden ist. Das native DOM-Videoelement hat die Dauer. Sie können das auf verschiedene Arten bekommen. 

Hier ist eins:

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

Hier ist ein anderes: 

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

Und ein anderer:

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

sie können preload = "none" im Attribut des Video-Tags verwenden, sodass das Video nur angezeigt wird, wenn der Benutzer auf die Wiedergabetaste klickt.

<video preload="none">

1
Gomzy

aufruffunktion beim Laden:

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

videodauer erhalten

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