Cómo interpreta el Maximum Keyframe Interval de la codificación de un video la función seek de un elemento de video HTML5 en JavaScript

Question

Esta es una pregunta muy específica sobre el modo en que la función seek (de un elemento de video en HTML5) interpreta un video, en este caso uno en formato WEBM y qué relación en concreto tiene con el intervalo de cuadros clave en el proceso de codificación de dicho video.

Para entender de qué se trata esto y cómo interpreta HTML5+JavaScript el grupo de imágenes (GOP) de un video con la función seek creé este fiddle.

VER FIDDLE

1. Qué hace: La idea es controlar la posición de un video en pausa con la rueda de scroll del mouse... además cada cuadro del video se copia a un elemento canvas, pero creo que eso no tiene relación. Lo menciono por si acaso.

2. Qué mirar: En Chrome (v66) y un poco menos en Firefox (v59) se ve bastante bien el desplazamiento cuando el video está codificado con un Maximum Keyframe Interval de 6 o menos, pero se aprecian saltos cuando el intervalo es de cada 24 cuadros o más. Esto se nota en el video y aún más en el canvas.

3. FFMPEG: Al codificar un video con FFMPEG esto se consigue con la opción -g 6 ó -g24 de Maximum Keyframe Interval. Sin embargo el archivo resulta más pesado conforme disminuímos el intervalo. Se puede apreciar que no hay diferencia entre ambos formatos cuando el video está en play.

Se puede switchear el video en el snippet con los botones.

Caso 1: Cuando usamos el video codificado con -g 6 el desplazamiento del video es aceptable pero aumenta el tamaño: 6.229 Mb.

Cadena FFMPEG utilizada:

ffmpeg -i INPUT.MOV -c:v libvpx -qmin 0 -deadline best -qmax 50 -crf 1 -b:v 100K -g 6 test/video_g6.webm

Caso 2: Cuando usamos el video codificado con -g 24 el desplazamiento no es suave y sufre de saltos pero disminuye el tamaño: 4.477 Mb.

Cadena FFMPEG utilizada:

ffmpeg -i INPUT.MOV -c:v libvpx -qmin 0 -deadline best -qmax 50 -crf 1 -b:v 100K -g 24 test/video_g24.webm

¿Por qué sucede esto?

¿Qué pasa con -keyint_min o -force_key_frames? ¿Tienen algún efecto positivo? ¿Es mejor usar algo como cgop (closed gop)?

Agradecería alguna referencia de consulta sobre este tema o una explicación más o menos detallada de esta relación tanto para el contenedor WEBM como para MP4 y OGG video.

No estoy buscando tanto una cadena mágica de ffmpeg (aunque la agradecería) sino más bien una explicación de cómo funciona esta relación entre las keyframes y el seek de un video en javascript.

Muchas gracias por leer hasta acá.

P.D. Una cosa más, si la función seek sólo se detiene en un keyframe, ¿es posible que este cuadro tenga más calidad que los otros de forma tal que aumenta la calidad cuando se detiene el video?

ACTUALIZACION

No he resuelto el asunto en específico pero se puede ver ya una demo en línea con el resultado, si se resuelve esta pregunta, los tiempos de carga (el tamaño de los clips de video) se podrían reducir muchísimo (en teoría).

OficiosCreativos.mx

Nota: Requiere Chrome en computadora de escritorio con mouse con rueda de scroll.

Answer 1

No conozco el uso de ffmpeg pero el tema de los saltos se produce por la forma en que funcionan los métodos de compresión de video.

Los keyframes tienen información completa sobre lo que se muestra mientras que los demás frames unicamente tienen la variación con respecto al frame anterior.

De esto se pueden deducir dos cosas que sirven de respuesta a tu pregunta:

• A mayor cantidad de keyframes, mayor tamaño del archivo. Si tenés un video con 100 frames, con un keyframe cada 6, tenés 16 frames en total con toda la información a mostrar y 84 con variaciones. Si tuviera un keyframe cada 24, tenés únicamente 4 frames con la información completa y 96 con variaciones. Como lo más común es que los cambios no afecten todo el frame, estos son más chicos que los keyframes produciendo la variación de tamaño.

• Al tener que mostrar un frame que no es un keyframe, es necesario leer primero el keyframe y los sucesivos frames hasta llegar a "armar" el frame a partir de la información anterior. Con un keyframe cada 6 eso implica que como máximo tendríamos que recorrer 5 frames para armar la imagen a mostrar, mientras que un keyframe cada 24 esa cantidad se eleva a 23. El aumento de frames posibles a recorrer es lo que produce que el tiempo de procesamiento sea mayor y se produzcan los saltos.