web-dev-qa-db-fra.com

Indique si la vidéo est chargée ou non en Javascript

Donc, j'ai utilisé un auditeur sur 

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

pour voir s'il est supérieur à 0 pour le chargement ou non d'une vidéo. Cela fonctionne pour une très petite vidéo, et uniquement dans Google Chrome. Cela ne fonctionne pas du tout dans Firefox. Des idées pour savoir comment faire fonctionner cela? 

Je veux essentiellement attendre que 3 vidéos séparées soient chargées pour effectuer une action spécifique, comment puis-je procéder?

javascripthtml5videoloaded
23
Feng Huo

Essaye ça:

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

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

Lire ici: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

35
Šime Vidas

Je trouve que l’utilisation de setInterval convient pour une écoute active du moment où la readyState de la vidéo change en vérifiant chaque demi-seconde jusqu’à ce qu’elle soit chargée.

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);
}

Si vous n'utilisez pas ES6, remplacez simplement () => par function()

5
Badrush

Pour en faire un auditeur, dans des circonstances normales, vous souhaiterez écouter l'événement de suspension. Il est déclenché lorsque le téléchargement est suspendu ou arrêté pour une raison quelconque, y compris s'il est terminé.

Vous aurez également envie d'écouter jouer pour les cas où le contenu est déjà chargé (comme, du 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");
    }
});

Source: https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events

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