Saltar al contenido

¿Visualización / búsqueda de fotogramas de HTML5 fotograma a fotograma?

Posterior a consultar con especialistas en el tema, programadores de diversas ramas y maestros dimos con la solución al dilema y la compartimos en este post.

Solución:

Parece que la mayoría de los navegadores permiten el segundo enfoque, aunque necesitaría conocer la velocidad de fotogramas. Opera, sin embargo, es la excepción y requiere un enfoque similar al primero (el resultado no es perfecto). Aquí hay una página de demostración que se me ocurrió que usa un video de 29.97 cuadros / s (estándar de televisión de EE. UU.). Tenga en cuenta que no se ha probado exhaustivamente, por lo que es posible que no funcione en IE 9, Firefox 4 o versiones futuras de ningún navegador.

HTML:

JavaScript (se ejecuta en la carga de la página y usa jQuery 1.4.4 en aras de la brevedad):

var vid = $('#v0')[0];

vid.onplay = vid.onclick = function() 
    vid.onplay = vid.onclick = null;

    setTimeout(function() 
        vid.pause();
        setInterval(function() 
            if($.browser.opera) 
                var oldHandler = vid.onplay;
                vid.onplay = function() 
                    vid.pause();
                    vid.onplay = oldHandler;
                ;
                vid.play();
             else 
                vid.currentTime += (1 / 29.97);
            
        , 2000);
    , 12000);

    setInterval(function() 
        $('#time').html((vid.currentTime * 29.97).toPrecision(5));
    , 100);
;

Después de haber estado luchando contra este mismo problema, utilicé un método de fuerza bruta para encontrar la velocidad de fotogramas. Sabiendo que la velocidad de fotogramas nunca pasará de 60 fotogramas por segundo, busco en el video en pasos de 1/60 de segundo. Comparar cada fotograma con el último colocando el video en un elemento de lienzo y luego usando getImageData para obtener datos de píxeles. Hago esto durante un segundo de video y luego cuento el número total de cuadros únicos para obtener la velocidad de cuadros.

No es necesario comprobar cada píxel. Agarro aproximadamente 2/3 del interior del video y luego reviso cada octavo píxel a lo ancho y hacia abajo (según el tamaño). Puede detener la comparación con un solo píxel diferente, por lo que este método es razonablemente rápido y confiable, bueno, no se compara con la lectura de una propiedad frameRate, pero es mejor que adivinar.

Lo mejor que puede hacer probablemente hasta que se confirmen e implementen los estándares (¡serán años!) Es adivinar la velocidad de fotogramas y aumentar en ese momento. A menos que esté en un entorno controlado, le desaconsejaría depender en gran medida de HTML5 … por mucho que me gusten sus características, no será compatible de forma fiable.

Aquí puedes ver las reseñas y valoraciones de los usuarios

Al final de la artículo puedes encontrar las explicaciones de otros usuarios, tú asimismo tienes la habilidad dejar el tuyo si te apetece.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *