Códecs y contenedores: qué codificar en 2026 y para quién

El vídeo es, por goleada, el recurso más pesado que puede servir una página: un minuto de 1080p mal codificado son 30 megas, y bien codificado son 6. La diferencia entre esas dos cifras no está en el ancho de banda ni en la CDN, está en la elección del códec y en saber a quién puedes servirlo. Y esa decisión está más condicionada por el hardware de decodificación que por el navegador, algo que no ocurre con ningún otro tipo de recurso.

Códec y contenedor no son lo mismo

El códec es el algoritmo que comprime y descomprime los fotogramas: H.264, VP9, HEVC, AV1. El contenedor es el formato de fichero que envuelve las pistas de vídeo, audio, subtítulos y metadatos, y las sincroniza: MP4, WebM, MKV. Un mismo códec puede viajar en varios contenedores, y un mismo contenedor puede llevar códecs distintos. AV1 se sirve tanto en MP4 como en WebM, y funciona igual.

Esta separación no es trivia: es la razón de que la extensión del fichero no te diga si el navegador puede reproducirlo. Un .mp4 puede contener H.264 —que reproduce todo el mundo— o HEVC —que no reproduce Firefox—, y el navegador no lo sabe hasta que lee la cabecera. De ahí que el atributo type de <source> acepte la cadena completa con los parámetros del códec, y de ahí que omitirla obligue al navegador a descargar cabeceras de cada fuente para probar, gastando peticiones y tiempo.

<video controls width="1280" height="720" poster="portada.avif" playsinline>
  <source src="clip.webm" type='video/webm; codecs="av01.0.05M.08, opus"'>
  <source src="clip-hevc.mp4" type='video/mp4; codecs="hvc1.1.6.L93.B0, mp4a.40.2"'>
  <source src="clip-h264.mp4" type='video/mp4; codecs="avc1.640028, mp4a.40.2"'>
  <track kind="captions" src="es.vtt" srclang="es" label="Español" default>
  Tu navegador no puede reproducir vídeo. <a href="clip-h264.mp4">Descargar el clip</a>.
</video>

El navegador recorre las fuentes en orden y se queda con la primera que declara poder reproducir. Por eso el orden es de más eficiente a más compatible, nunca al revés. Y por eso las cadenas de códec largas importan: avc1.640028 significa H.264 perfil High nivel 4.0, y un dispositivo que solo soporte perfil Baseline lo rechazará correctamente en lugar de intentarlo y fallar a mitad.

Para comprobar soporte desde JavaScript sin adivinar existe el método del elemento, que devuelve una cadena y no un booleano:

const v = document.createElement('video');
// Devuelve "probably", "maybe" o "" (cadena vacía = no)
console.log(v.canPlayType('video/mp4; codecs="av01.0.05M.08"'));
console.log(v.canPlayType('video/mp4; codecs="hvc1.1.6.L93.B0"'));

La respuesta "" es un no rotundo. "maybe" significa que el contenedor es reconocido pero el navegador no ha podido confirmar el códec. "probably" es lo más cerca de un sí que la API concede, y la razón de esa cautela es que la reproducción depende del decodificador del sistema, que puede fallar por razones ajenas al navegador.

El estado real del soporte

Esta es la tabla que hay que tener delante al decidir qué generar. Todo verificado a mediados de 2026.

La fila de AV1 es la que exige matices. Safari lo reproduce desde la versión 17, pero únicamente en dispositivos con decodificador AV1 por hardware: Macs con silicio M3 y posteriores, iPad Pro con M4, iPhone 15 Pro y toda la familia del 16 en adelante. Apple no ha añadido un decodificador AV1 por software para reproducción de vídeo, así que un Mac con M1 o un iPhone 14 simplemente no aceptan la fuente y pasan a la siguiente. Eso significa que AV1 no puede ser tu única fuente, ni siquiera contando solo con navegadores actualizados.

La combinación que cubre prácticamente el parque completo es AV1 más HEVC, que en las mediciones agregadas de sesiones reales llega al 99,7 por ciento: AV1 se lleva Chrome, Edge y Firefox, y HEVC se lleva Safari en cualquier hardware Apple de la última década. Pero HEVC arrastra un problema que no es técnico: es un códec con licencias de patentes activas, con varios grupos de patentes reclamando royalties, y por eso Firefox no lo implementa y muchos equipos prefieren no tocarlo. Si esa es tu situación, la combinación AV1 más H.264 cubre lo mismo con una penalización de bytes en Safari sobre hardware antiguo.

VP9 ocupa un hueco cada vez más estrecho: es libre de royalties, tiene soporte universal y comprime bien, pero AV1 lo supera en todo salvo en coste de codificación. Sigue siendo la elección sensata como escalón intermedio si ya lo tienes generado, y no merece la pena añadirlo si estás empezando de cero.

Cuánto cuesta codificar y cuántas versiones generar

El ahorro de bytes de AV1 no es gratis: codificar en AV1 cuesta entre cinco y veinte veces más CPU que codificar en H.264 con codificadores de software, según el preajuste de velocidad. Para un catálogo de vídeo eso es un coste real de infraestructura que hay que meter en la ecuación. Para tres clips de la página de inicio, es irrelevante: lo codificas una vez y ya está.

Un comando de referencia con ffmpeg y el codificador rápido de AV1, que es el que hace la combinación de calidad y velocidad usable en producción:

# AV1 en MP4, calidad constante. crf 30 es un buen punto para web.
ffmpeg -i original.mov \
  -c:v libsvtav1 -crf 30 -preset 6 -g 120 -pix_fmt yuv420p \
  -c:a libopus -b:a 96k \
  -movflags +faststart \
  clip-av1.mp4

# H.264 de respaldo, perfil High nivel 4.0
ffmpeg -i original.mov \
  -c:v libx264 -crf 23 -preset slow -profile:v high -level 4.0 -pix_fmt yuv420p \
  -c:a aac -b:a 128k \
  -movflags +faststart \
  clip-h264.mp4

La bandera -movflags +faststart es la que más gente olvida y la que más se nota. Mueve el índice del fichero MP4 —el átomo moov— del final al principio, de modo que el navegador puede empezar a reproducir en cuanto tiene los primeros cientos de kilobytes en lugar de tener que descargar el fichero entero para saber dónde están los fotogramas. Sin ella, un MP4 de 40 MB tarda en empezar lo que tarda en descargarse completo. Es la diferencia entre un vídeo que arranca en 400 milisegundos y uno que arranca en veinte segundos, y no cuesta ni un byte.

const info = await navigator.mediaCapabilities.decodingInfo({
  type: 'file',
  video: { contentType: 'video/mp4; codecs="av01.0.05M.08"',
           width: 1920, height: 1080, bitrate: 3_000_000, framerate: 30 },
});
console.log(info.supported, info.smooth, info.powerEfficient);

Qué generar si empiezas hoy

Para una página con vídeo decorativo o de producto, tres o cuatro clips en total: genera AV1 y H.264, a una sola resolución si el vídeo se ve siempre al mismo tamaño, o a dos si hay diferencia grande entre móvil y escritorio. Nada más. La complejidad adicional no se paga.

Para un catálogo con decenas o cientos de vídeos y usuarios que los ven enteros: AV1 y HEVC si puedes con las licencias, con H.264 como red de seguridad, y en varias resoluciones servidas por streaming adaptativo, que es el tema de la siguiente lección.

Y para animaciones cortas en bucle que antes eran GIF, la respuesta cambia de forma y merece su propio tratamiento, porque ahí el códec importa menos que quitar el audio y el contenedor: lo verás en sustituir GIF por vídeo.