webentwicklung-frage-antwort-db.com.de

Sagen Sie, ob das Video in Javascript geladen ist oder nicht

Also habe ich einen Hörer benutzt 

document.getElementById("video").buffered.length

ob es größer als 0 ist, wenn ein Video geladen wird oder nicht. Dies funktioniert für ein sehr kleines Video und nur in Google Chrome. Es funktioniert überhaupt nicht in Firefox. Irgendwelche Ideen, wie das funktioniert? 

Ich möchte im Grunde abwarten, bis drei separate Videos geladen werden, um eine bestimmte Aktion auszuführen.

23
Feng Huo

Versuche dies:

var video = document.getElementById("video-id-name");

if ( video.readyState === 4 ) {
    // it's loaded
}

Lesen Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

35
Šime Vidas

Ich finde, dass setInterval funktioniert, um aktiv zuzuhören, wenn sich die readyState des Videos ändert, indem sie jede halbe Sekunde überprüft, bis sie geladen wird.

checkforVideo();

function checkforVideo() {
    var b = setInterval(()=>{
        if(VideoElement.readyState >= 3){

            \\do whatever you want done here

            \\you can now stop checking every half second
            clearInterval(b);

        }                   
    },500);
}

Wenn Sie nicht mit ES6 arbeiten, ersetzen Sie einfach () => durch function().

5
Badrush

Um dies zu einem Listener zu machen, sollten Sie unter normalen Umständen das Suspend-Ereignis abhören. Es wird ausgelöst, wenn der Download aus irgendeinem Grund angehalten oder angehalten wurde, einschließlich des Abschlusses.

Sie möchten auch die Fälle abhören, in denen der Inhalt bereits geladen ist (z. B. aus dem Cache).

video.addEventListener("playing", function() {
    console.log("[Playing] loading of video");
    if ( video.readyState == 4 ) {
        console.log("[Finished] loading of video");
    }
});
video.addEventListener("suspend", function(e) {
    console.log("[Suspended] loading of video");
    if ( video.readyState == 4 ) {
        console.log("[Finished] loading of video");
    }
});

Quelle: https://developer.mozilla.org/de/docs/Web/Guide/Events/Media_events

2
efaj
var video = document.getElementById("video");
video.onloadeddata = function() {
    // video is loaded
}
1
aye2m