Nuevo c贸dec AV1: acelere la carga de video en un navegador

En esta gu铆a, aprenderemos c贸mo usar el video en la Web, como es habitual en 2019. Chrome y Firefox han comenzado a admitir el nuevo c贸dec AV1; para ellos, el video se puede hacer la mitad.

Hablaremos por separado sobre c贸mo reemplazar los GIF con video en AV1 y H.264, luego su tama帽o se reducir谩 entre 20 y 40 veces.

AV1 en el navegador

YouTube ya lo usa en TestTube . Netflix dijo que el AV1 ser谩 " su c贸dec de pr贸xima generaci贸n ".

Nosotros en Evil Martians ya lo usamos en nuestro sitio web y en Amplifer . En este art铆culo, compartir茅 la experiencia de implementar AV1 y paso a paso le dir茅 c贸mo incrustar un video para que funcione en todos los navegadores.

C贸decs y contenedores


Con im谩genes, todo es simple: ya sea JPEG con PNG para todos los navegadores, o hacer archivos m谩s compactos en WebP para navegadores modernos . Siempre podemos estar seguros de que los archivos .png tendr谩n un formato PNG (con la rara excepci贸n de las bombas PNG contra las que imgproxy puede proteger ).

Los archivos de video son m谩s complicados. La extensi贸n del archivo ( .mp4 , .wmv , .webm o .mov ) solo habla sobre el contenedor. Mientras que los archivos de video constan de tres componentes diferentes:

  1. El c贸dec de video determina cu谩nto puede comprimir el video y qu茅 debe sacrificar. Los principales c贸decs de video de la Web: H.264, HEVC, VP9 y, ahora, AV1.
  2. El c贸dec de audio comprime el sonido. Por supuesto, no es necesario si no hay sonido en el video. Las opciones populares son MP3, Opus y AAC.
  3. El contenedor almacena video (comprimido por alg煤n tipo de c贸dec de video) y transmisi贸n de audio (comprimido por alg煤n tipo de c贸dec de audio). Adem谩s de datos adicionales, como subt铆tulos y metainformaci贸n. Contenedores populares: MP4, MOV, WebM.

Cuando vemos la extensi贸n de archivo .mp4 , solo podemos decir que se us贸 el contenedor MP4. Pero los c贸decs pueden ser diferentes: el autor podr铆a tomar H.264 y AAC, AV1 y Opus, o algo m谩s.

He aqu铆 AV1


AV1 es un c贸dec de video que se lanz贸 hace un a帽o, en marzo de 2018. Fue creado para superar los c贸decs de la generaci贸n anterior: HEVC, VP9, 鈥嬧婬.264 y VP8.

Diagrama de generaci贸n de c贸decs de video
Diagrama de c贸dec de generaci贸n de Tsahi Levent-Levy

Si se interes贸 en c贸mo AV1 logr贸 superar el resto de los c贸decs en compresi贸n, lea los detalles t茅cnicos en las traducciones en Habr茅:
Video de la pr贸xima generaci贸n: Presentaci贸n de AV1
AV1 C贸dec de pr贸xima generaci贸n: filtro direccional correctivo CDEF

Debido a las nuevas optimizaciones, AV1 comprime el video un 30-50% mejor que H.264 o VP8, y hasta un 30% mejor que HEVC. Pero el c贸dec se lanz贸 recientemente y hasta ahora tiene varias enfermedades infantiles:

  • El codificador actual no est谩 optimizado. AV1 comprime el video muy lentamente (un nuevo codificador r谩pido en Rust ya est谩 en desarrollo). El c贸dec no es adecuado para la transmisi贸n. Si hablamos de videos est谩ticos en aterrizajes, este problema no es relevante para nosotros.
  • Hasta ahora, el c贸dec solo es compatible con computadoras de escritorio Chrome y Firefox en Windows. Todav铆a no hay soporte para Safari y Edge (aunque Microsoft ya lo est谩 probando ). Necesitar谩 al menos 2 archivos: AV1 para Chrome y Firefox y H.264 para otros navegadores.

Lo mejor de AV1 es que los cuadrados de " jackalization " no aparecen a bajas tasas de bits.

Comparaci贸n de la calidad de imagen para diferentes c贸decs a diferentes velocidades de bits
Comparaci贸n de la calidad de imagen para diferentes c贸decs a diferentes velocidades de bits: AV1 gana

Cocinar AV1 correctamente


Finalmente vamos a practicar. Primero, decidamos sobre el contenedor. En teor铆a, AV1 se puede colocar en diferentes contenedores, pero MP4 es m谩s compacto y se recomienda en la especificaci贸n. Para el sonido en AV1 tomamos Opus, porque comprime el sonido perfectamente .

Para que el video funcione en todos los navegadores, generaremos 3 archivos:

  1. Para computadoras de escritorio Chrome y Firefox en Windows ( 31% del mercado a marzo de 2019): contenedor MP4 con AV1 para video y Opus para sonido.
  2. Para Safari y Edge ( 16% del mercado ): MP4 con HEVC y AAC.
  3. Por lo dem谩s: un gran archivo MP4 con H.264 y AAC.

Solo puede tomar AV1 y H.264: el video tambi茅n funcionar谩 para todos.

Para la compresi贸n, recomiendo tomar la consola FFmpeg . Hay muchas utilidades gr谩ficas, pero es m谩s f谩cil guardar las opciones en la consola y luego iniciar la conversi贸n autom谩ticamente. Aseg煤rese de usar la 煤ltima versi贸n de FFmpeg. Las versiones anteriores a 4.1 no admiten AV1 en MP4.

Para Mac OS X:

  1. Instalar Homebrew .
  2. brew install ffmpeg

Para Linux, es mejor tomar una nueva versi贸n del sitio oficial, mientras que en muchas distribuciones no hay una versi贸n con soporte para AV1 en MP4:

  1. wget https://johnvansickle.com/ffmpeg/releases/ffmpeg-release-amd64-static.tar.xz
  2. tar -xf ffmpeg-release-amd64-static.tar.xz
  3. sudo cp ffmpeg-4.1-64bit-static/ff* /usr/local/bin/

Para Windows, puede instalar FFmpeg de William Diaz .

Pasamos a la conversi贸n del archivo H.264, que necesitamos para navegadores m谩s antiguos. Como todos nuestros archivos usan el contenedor MP4, .av1.mp4 , .hevc.mp4 y .h264.mp4 . No se alarme por el largo equipo, luego lo analizaremos todo:

 #  SOURCE.mov     - ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libfdk_aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4 

Ahora abra video.h264.mp4 . Si la calidad es buena y el tama帽o es grande, intente aumentar -crf ( -crf 26 luego -crf 28 ). Esta opci贸n reducir谩 el tama帽o del archivo a costa de una calidad reducida. Equilibrar la calidad y el tama帽o es un arte.

Si no hay un archivo de video original, puede convertir el antiguo archivo H.264 a AV1.

Ahora es el momento de convertir AV1. Les recuerdo que ser谩 m谩s largo que H.264. El c贸dec a煤n no utiliza toda la potencia del procesador (tiene sentido comenzar a convertir varios archivos en paralelo).

 ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libopus -c:v libaom-av1 -crf 34 -b:v 0 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -strict experimental video.av1.mp4 

-crf con -crf nuevamente para -crf equilibrio perfecto entre calidad y tama帽o.

Ahora lo mismo para HEVC.

 ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libfdk_aac -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4 

Copie video.h264.mp4 , video.hevc.mp4 y video.av1.mp4 en la ra铆z de su sitio.

Comprender las opciones de FFmpeg


驴Los comandos anteriores se parecen a un hechizo de invocaci贸n de demonios? No te preocupes, esto no es PostCSS . Veamos las opciones.

-i SOURCE.mov indica el archivo de entrada, desde donde FFmpeg tomar谩 secuencias de video y audio, las comprimir谩 y las empacar谩 en un nuevo contenedor.

-map_metadata -1 eliminar谩 la metainformaci贸n del video (por ejemplo, el programa en el que se cre贸 el video). Dicha informaci贸n rara vez es 煤til en la Web.

-c:a libopus o -c:a libfdk_aac establece los c贸decs de audio. Si no necesita sonido, reempl谩celos con -an .

-c:v libaom-av1 selecciona el c贸dec de video, una biblioteca que comprimir谩 los cuadros de la transmisi贸n de video.

-crf 34 - Factor de tasa constante, un equilibrio de calidad y tama帽o. Es como un control deslizante de calidad JPEG, solo que va en una direcci贸n diferente (0 es la mejor calidad y el archivo m谩s grande). La escala CRF es diferente para H.264 y AV1: para H.264 sube a 51, para AV1 sube a 61. El CRF para AV1 y H.264 ser谩 diferente.

Facebook encontr贸 una correspondencia aproximada entre los valores de CRF para H.264 y AV1:
19 鈫 27, 23 鈫 33, 27 鈫 39, 31 鈫 45, 35 鈫 51, 39 鈫 57.

-preset veryslow obliga a los c贸decs H.264 y HEVC a comprimir el archivo a煤n m谩s a costa de un fuerte aumento en el tiempo de conversi贸n.

-profile:v main utilizado por H.264 para seleccionar un perfil de c贸dec . Solo "Main" funcionar谩 en Safari.

-b:v 0 establece la tasa de bits m铆nima para AV1 para que el video tenga una calidad constante.

-pix_fmt yuv420p (formato de p铆xel) es una forma complicada de reducir el tama帽o del archivo. Deja la resoluci贸n original para el brillo, pero reduce la resoluci贸n para el color. Nuestros ojos ven peor el color, por lo tanto, no se dan cuenta de este truco. Elimine esta opci贸n si en su caso interfiere.

-movflags +faststart mueve todo lo importante al comienzo del archivo para que el navegador pueda reproducir el video hasta que se complete la descarga.

-vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" cambiar谩 el tama帽o de los lados del video a los pares m谩s cercanos (algunos c贸decs pueden funcionar con una resoluci贸n de 300 脳 200 y 302 脳 200, pero no funcionar谩n con 301 脳 200). Si est谩 seguro de que en todas partes la resoluci贸n se divide por 2, puede eliminar esta opci贸n.

-strict experimental necesario para AV1, su codificador sigue siendo experimental.

video.av1.mp4 establece el nombre del archivo resultante.

Lanzamos video en navegadores


Ahora necesitamos que cada navegador descargue el video que admite. Para esto, <source> tiene un atributo de type . Y le aconsejo que lea sobre las opciones en <video> .

 <video controls width="600" height="400"> <source src="video.hevc.mp4" type="video/mp4; codecs=hevc,mp4a.40.2" /> <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus" /> <source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2" /> </video> 

<source> son como if鈥lse expresiones if鈥lse : el navegador las lee de arriba a abajo hasta que encuentra la que admite.

En type puede especificar el formato de archivo completo: contenedor ( video/mp4 para MP4), c贸dec de video ( av01.0.05M.08 para AV1, hevc para HEVC y avc1.4D401E para H.264) y c贸dec de audio ( opus para Opus y mp4a.40.2 para AAC).

Bonificaci贸n: c贸mo convertir GIF a AV1 y H.264


En 2019, usar GIF para videos cortos es un gran pecado. GIF pesa 20-40 veces m谩s que H.264 o AV1. GIF golpea la CPU con m谩s fuerza y 鈥嬧媓ace que la bater铆a gotee m谩s r谩pido. Si necesita un video corto en bucle, tome c贸decs de video. Y FFmpeg puede convertir videos directamente desde GIF.

Convierte GIF a H.264:

 ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4 

Genere un AV1 a煤n m谩s peque帽o:

 ffmpeg -i IMAGE.gif -map_metadata -1 -an opus -c:v libaom-av1 -crf 50 -b:v 0 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -strict experimental video.av1.mp4 

Ahora inserte animation.h264.mp4 y animation.av1.mp4 en el HTML.

 <video autoplay loop muted playsinline width="300" height="200"> <source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08" /> <source src="animation.h264.mp4" type="video/mp4" /> </video> 

Las opciones de autoplay y loop hacen que el video sea un "GIF", un video en bucle que se reproduce inmediatamente despu茅s de que se carga la p谩gina. playsinline impide que Safari abra el video en pantalla completa cuando hace clic en el video.

Tiempo de retiro


AV1 todav铆a es experimental. Pero ya se puede usar para hacer feliz a una cuarta parte de sus usuarios. Un par de comandos FFmpeg generar谩n archivos de video. <video> se cre贸 desde el principio para reproducir videos de acuerdo con las capacidades del navegador. Ya usamos AV1 en producci贸n y todo funciona bien (excepto el tiempo de espera hasta que el codificador AV1 termine de funcionar).

Source: https://habr.com/ru/post/442020/


All Articles