Tengo un caso de uso que consiste en buscar fotogramas específicos en un video. La frecuencia de los cambios de cuadro puede ser bastante alta, ya que depende de los movimientos del ratón. Mi problema es que dependiendo del navegador las actualizaciones pueden ser muy fluidas (Safari) o introducir mucha latencia (Chrome/Firefox).

Se me ocurrió un ejemplo para probar las diferencias entre navegadores usando el siguiente código (aquí hay un codepen ). Estoy usando este video que dura 10 segundos y 60 fps y lo reproduzco cuadro por cuadro cambiando su tiempo actual en un intervalo igual a la velocidad de cuadro del video.

HTML

 <video id="player" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" preload="auto"/>

JS

 window.onload = () => { const player = document.getElementById("player") setInterval(() => { player.currentTime = (player.currentTime + 0.016) % 10 }, 16) }

El problema principal me parece que Chrome y Firefox solo manejan los cambios de tiempo de video de manera diferente a Safari, y mi caso de uso está bien respaldado en este último. ¿Habría alguna forma de hacer que funcione sin problemas en Chrome/Firefox? Revisé algunas bibliotecas de reproductores de video (por ejemplo, plyr, react-player, video-js), pero todas están basadas en reproductores HTML5 nativos.