javascript - gratis - mostrar loading mientras carga pagina jquery

Indica si el video está cargado o no en Javascript

Question

Entonces, he estado usando un oyente en

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

para ver si es mayor que 0 para cuando un video está cargado o no. Esto funciona para un video muy pequeño, y solo en Google Chrome. No funciona en Firefox en absoluto. ¿Alguna idea de cómo hacer que esto funcione?

Básicamente quiero esperar hasta que se carguen 3 videos separados para realizar una acción específica, ¿cómo hago para esto?

Answer 1

Me parece que el uso de setInterval funciona para escuchar activamente cuando readyState el readyState del video, al revisar cada medio segundo hasta que se cargue.

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 no está utilizando ES6, simplemente reemplace () => con la function()

Answer 2

Para convertir esto en un oyente, en circunstancias normales, querrá escuchar el evento de suspensión. Se activa cuando la descarga se detiene o se detiene por cualquier motivo, incluida la finalización.

También querrá escuchar la reproducción en los casos en que el contenido ya está cargado (como, desde el caché)

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

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

Answer 3

Prueba esto:

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

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

Lea aquí: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

Answer 4

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