Mi situación: quiero publicar un video corto (1 segundo) en una página. En este caso, es necesario hacer un bucle. Para esto utilizo la etiqueta <video loop ...> . Todo funciona bien, pero cuando termina el video, hay un ligero retraso en el navegador Firefox entre el último y el primer fotograma (0,5 segundos). Al mismo tiempo, no observo tal comportamiento en Chrome.

Para resolver este problema, probé varias técnicas:

1. Traté de dibujar un video en la etiqueta <canvas>
2. Intenté escuchar el evento "terminado" y rebobinar el video 0 segundos cuando ocurre
3. Reduzca la calidad del video a niveles increíbles. El video tenía muchos artefactos.
4. HandBrake usado con la opción "Web optimizado"

Todos estos métodos fallaron.

Para demostrar esto, creé un video de 1 segundo (60 FPS) donde puedes ver el retraso entre el último y el primer cuadro si lo abres en el navegador Firefox: https://codesandbox.io/s/unnecessary-delay- between -último-y-primer-fotograma-5dwnfb?file=/index.html

¿Cómo crees que se puede solucionar esto?

¡Gracias!