html - notas - meta tags generator

Visión en cuadro por marco HTML5/búsqueda de marcos

Question

Estoy buscando una forma de ver HTML5 <video> , fotograma a fotograma.

El escenario: tener un video, con un botón adicional que salta al siguiente fotograma cuando se presiona.

¿Cuál crees que es el mejor método para hacer esto?

1. Reproduzca el video normalmente, escuche el evento timeUpdate , que en FireFox se llama para cada fotograma, y ​​luego solo pause el video. Sin embargo, los otros navegadores no se comportan como Firefox.
2. Cambie el elemento currentTime manualmente a +1/24 de segundo, donde "24" es la velocidad de fotogramas. No tengo idea de cómo adquirir el FPS, sin embargo.
3. Cualquier otra forma útil que se te ocurra.

EDITAR

Encontré esta página de prueba HTML5 muy útil , que rastrea la capacidad de todos los navegadores de lograr una búsqueda de fotogramas precisa.

Answer 1

Después de haber estado luchando contra este mismo problema, me meto con un método de fuerza bruta para encontrar la velocidad de cuadros. Al saber que la velocidad de fotogramas nunca pasará 60 fotogramas por segundo, busco a través del video en pasos de 1/60 de segundo. Comparando cada fotograma con el último colocando el video en un elemento canvas 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 fotogramas únicos para obtener la velocidad de fotogramas.

No es necesario que compruebe cada píxel por separado. Cojo aproximadamente 2/3 partes del interior del video y luego verifico aproximadamente cada octavo píxel a través y hacia abajo (dependiendo del tamaño). Puede detener la comparación con solo un píxel diferente, por lo que este método es razonablemente rápido y confiable, no se compara con decir leer una propiedad frameRate, pero es mejor que adivinar.

Answer 2

Lo mejor que probablemente pueda hacer hasta que se confirmen e implementen los estándares (¡que serán las edades!) Es adivinar la velocidad de fotogramas e incrementar en ese momento. A menos que esté en un entorno controlado, le aconsejaría que no dependa en gran medida de HTML5 ... por mucho que me gusten sus características, no será compatible de manera confiable.

Answer 3

Parece que la mayoría de los navegadores permiten el segundo enfoque, aunque necesitaría saber la velocidad de fotogramas. Sin embargo, Opera 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 fotogramas por segundo (estándar de televisión de EE. UU.). Tenga en cuenta que no se ha probado exhaustivamente, por lo que podría no funcionar en IE 9, Firefox 4 o versiones futuras de cualquier navegador.

HTML:

<p id="time"></p>
<video id="v0" controls tabindex="0" autobuffer preload>
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>

JavaScript (se ejecuta en la carga de la página y utiliza 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);
};