Así que, he estado usando un detector 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 muy pequeño vídeo, y sólo en Google Chrome. No funciona en Firefox en todo. Alguna idea de cómo conseguir que esto funcione?

Esencialmente me quiero esperar hasta el 3 de separar los vídeos se cargan a tomar una acción específica, ¿cómo ir sobre esto?

InformationsquelleAutor Feng Huo | 2011-12-30

4 Comentarios

  1. 37

    Intente esto:

    var video = document.getElementById("video-id-name");
    
    if ( video.readyState === 4 ) {
        //it's loaded
    }

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

    • Que los navegadores soportan esa propiedad?
    • De acuerdo a este Wiki, el apoyo es completo (El WebKit columna está vacía, pero me sorprendería si su aplicación fue detrás de Mozilla/Opera).
    • > de 1 podría hacer el truco si es sólo acerca de la búsqueda.
    • cómo esto puede ser usado si hay más de 1 videos. ? gracias
    • Esta respuesta no tiene sentido. Esto no es escuchar realmente los cambios. Esto sólo se va a ejecutar cuando la página se carga por primera vez y si es listo de inmediato sólo funcionará.
    • Estás en lo correcto. Puedo eliminar mi respuesta cuando una verdadera solución es publicado.

  2. 10

    Creo que utilizando setInterval trabaja para escuchar activamente a cuando el readyState de la imagen cambia por la comprobación de que cada medio segundo hasta que se cargue.

    checkforVideo();
    
    function checkforVideo() {
        //Every 500ms, check if the video element has loaded
        var b = setInterval(()=>{
            if(VideoElement.readyState >= 3){
                //This block of code is triggered when the video is loaded
    
                //your code goes here
    
                //stop checking every half second
                clearInterval(b);
    
            }                   
        },500);
    }

    Si no estás usando ES6 basta con sustituir () => con function()

    • Gran respuesta! FYI todo esto está haciendo es la comprobación de una simple propiedad del elemento de vídeo. Se utiliza muy poco poder de procesamiento, así que no hay realmente ninguna necesidad de esperar medio segundo entre cheques. Usted puede cambiar a 10 milisegundos y coger el vídeo en casi el momento exacto en que se carga.
  3. 4

    Para hacer de esto un oyente, en circunstancias normales, usted querrá escuchar el evento de suspensión. Es accionada cuando la descarga se pausa o se detiene por cualquier razón, incluyendo finalizó.

    Usted también querrá escuchar a jugar para los casos cuando el contenido ya está cargado (como, de la memoria 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

  4. 1
    var video = document.getElementById("video");
    video.onloadeddata = function() {
        //video is loaded
    }
    • Mientras que este código puede responder a la pregunta, proporcionar contexto adicional sobre cómo y/o por qué se resuelve el problema podría mejorar la respuesta del valor a largo plazo.

Dejar respuesta

Please enter your comment!
Please enter your name here