Problema común para diseñadores de motion graphics y editores de video que comienzan con sitios web: “Hice una animación hermosa en Adobe After Effects, renderice a .mov (en la mejor calidad!), subí a WordPress… y nada. Pantalla negra, error, o el archivo pesa 500 MB y carga durante una hora.”
El archivo no está roto. Está hecho para una sala de montaje, y un navegador no es una sala de montaje.
El problema con los archivos .MOV
El formato .mov (contenedor QuickTime) es estándar en el trabajo creativo, especialmente en Mac. .mov es un contenedor, no un codec: lo que lo vuelve inservible en la web es casi siempre lo que lleva dentro, ProRes o fotogramas sin comprimir.
Los tamaños no son cuestión de opinión, los publica Apple. A 1920x1080 y 29,97 fps, el documento técnico de ProRes da tasas objetivo de 45 Mbps para 422 Proxy, 102 Mbps para 422 LT, 147 Mbps para 422, 220 Mbps para 422 HQ, 330 Mbps para 4444 y 495 Mbps para 4444 XQ. El apéndice del mismo documento las repite en gigabytes por hora: 422 HQ son 99 GB por hora, alrededor de 1,65 GB por un solo minuto de metraje.
A partir de ahí fallan dos cosas dentro de WordPress, en este orden.
La subida puede no terminar siquiera. wp_max_upload_size() lee upload_max_filesize y post_max_size de PHP y devuelve el menor de los dos. En alojamiento compartido esos valores suelen quedarse en un valor por defecto modesto, y un POST de varios cientos de megabytes muere antes de que la biblioteca de medios lo vea.
Si termina, aun así no se reproduce. WordPress acepta el archivo porque wp_get_mime_types() contiene 'mov|qt' => 'video/quicktime'. Pero wp_get_video_extensions(), la función que decide qué considera el núcleo una fuente de video reproducible, devuelve solo mp4, m4v, webm, ogv y flv. MOV no está en esa lista. El adjunto se queda en la biblioteca con aspecto de video y comportamiento de descarga.
Escribir la etiqueta a mano tampoco salva la situación. La guía de contenedores de MDN registra que no hay reproducción de QuickTime en las versiones actuales de Chrome, Edge, Firefox ni Safari, y recuerda que el propio framework QuickTime desapareció de macOS en 10.15 Catalina. Un flujo ProRes no tiene decodificador en ningún navegador en circulación.
Por qué ProRes no es para la web
El codec ProRes fue diseñado para la edición profesional de video, donde la prioridad es mantener la máxima calidad posible entre rondas de edición. Cada fotograma se almacena con compresión ligera e intrafotograma, lo que resulta en archivos enormes pero cómodos para postproducción.
Sin embargo, la web tiene prioridades completamente diferentes. Los usuarios esperan que los videos carguen en segundos, no minutos. Las conexiones móviles tienen ancho de banda limitado. Y los navegadores necesitan codecs optimizados para decodificación eficiente, no para edición.
La trampa del “Mejor calidad”
Muchos diseñadores cometen el error de pensar que “mejor calidad = mejor experiencia para el usuario”. En realidad, un archivo de máster que tarda minutos en llegar ofrece una experiencia peor que una copia comprimida que empieza a reproducirse de inmediato y que el espectador casual no distingue del máster en una pantalla de portátil.
Estándar HTML5: MP4 (H.264) y WebM
Dos formatos cubren toda la web, y la elección entre ellos es hoy menos dramática que cuando se escribió este artículo por primera vez.
1. MP4 con codec H.264 (AVC)
Este es el “estándar de oro”. La elección más segura: caniuse le da cerca del 97 por ciento de soporte global. Si solo va a publicar un archivo, publique este.
Dos ajustes deciden si su exportación funciona de verdad, y ninguno de los dos se ve en un reproductor de previsualización.
Submuestreo de croma. ProRes 422 es, como dice su nombre, 4:2:2, y la familia 422 es de 10 bits. Si entrega eso a libx264 sin instrucciones, codificará un flujo con perfil High 4:2:2 que ningún navegador puede decodificar. Fuerce 8 bits y 4:2:0 con -pix_fmt yuv420p.
Dónde vive el índice. La documentación del muxer de FFmpeg describe -movflags +faststart como una segunda pasada que mueve el índice (el átomo moov) al principio del archivo, y advierte que no está activado por defecto. Sin él, el navegador no puede empezar a reproducir hasta que ha llegado el archivo entero, que es exactamente el síntoma de “carga durante una hora”.
Si exporta desde Adobe Media Encoder en lugar de la línea de comandos, elija H.264 como formato, no QuickTime, y después compruebe esas dos cosas sobre el resultado. La lista de formatos es lo único que importa; los nombres de los presets cambian entre versiones.
Configuración óptima de exportación H.264
Para obtener resultados predecibles al exportar para WordPress:
- Resolución: 1920x1080 para videos de contenido, 1280x720 para videos secundarios
- Calidad: CRF entre 23 y 28 en
libx264, en lugar de perseguir una tasa de bits fija - Fotogramás por segundo: Mantenga el mismo que la fuente (generalmente 24, 25 o 30 fps)
- Audio: AAC, 128-192 kbps, estéreo, o sin pista de audio si el clip es decorativo
- Formato de pixel:
yuv420p, verificado conffprobesobre el archivo exportado
2. WebM con codec VP9 (o AV1)
Formato abierto desarrollado por Google. La propia página de VP9 afirma que el codec “puede reducir la tasa de bits hasta un 50% frente a otros codecs conocidos”. Tómelo como un techo que se alcanza con material difícil, no como una cifra que vaya a repetirse en cada clip, aunque el ahorro en un motion graphic plano es real.
El consejo obsoleto sobre este tema es que WebM es un formato de Chrome y Firefox. No lo es, y hace años que dejó de serlo: caniuse registra soporte completo de WebM en Safari de macOS desde la versión 16 y en Safari de iOS desde 17.4, lo que deja el soporte global en 96,25 por ciento, menos de un punto por detrás de H.264 en MP4.
El futuro: codec AV1
AV1 es la generación siguiente de codecs de video abiertos y comprime mejor que VP9, pero su despliegue va por detrás. caniuse le da 79,26 por ciento de soporte completo, que sube a 94,28 por ciento solo si se cuenta el soporte parcial, y Safari es precisamente el caso parcial porque allí la reproducción depende de la decodificación por hardware. Eso convierte a AV1 en una primera <source>, nunca en la única.
Además, la codificación AV1 es significativamente más lenta que H.264 o VP9, por lo que es más práctica para contenido que se codifica una vez y se reproduce muchas veces.
Estrategia de “Video Tag” en HTML5
La mejor práctica (si debe alojar video usted mismo, por ejemplo, como fondo de sección Hero) es listar las fuentes de mejor a peor. El navegador toma la primera que puede decodificar y no vuelve a mirar el resto.
<video autoplay loop muted playsinline preload="none"
poster="/media/hero-poster.avif"
width="1920" height="1080">
<source src="animacion.webm" type="video/webm; codecs=vp9">
<source src="animacion.mp4" type="video/mp4; codecs=avc1.42E01E">
Su navegador no soporta video.
</video>Note los atributos:
muted: Los navegadores móviles requieren silenciar para permitir la reproducción automática.playsinline: Requerido en iOS (iPhone) para que el video no abra pantalla completa inmediatamente.preload="none": no se descarga nada hasta que se pide la reproducción, así que el poster carga el primer pintado. Usemetadatasi necesita la duración por adelantado, yautocasi nunca.- la parte
codecs=de la cadenatype: permite al navegador descartar una fuente sin descargar un solo byte. widthyheight: especifique siempre las dimensiones para evitar el Cumulative Layout Shift (CLS), una métrica de Core Web Vitals.
Los mismos atributos en el editor de bloques
No hace falta escribir esa etiqueta a mano. El bloque Video del núcleo expone como atributos autoplay, controls, loop, muted, playsInline, poster, preload, src y tracks, y playsInline aparece en la barra lateral como el interruptor “Reproducir en línea”. El bloque Cover no tiene ese atributo: su block.json no declara ninguna clave playsInline y su salida lo fija en el video de fondo, de modo que un fondo de video en Cover siempre es inline y no hay interruptor que revisar.
Optimización del tamaño del archivo de video
El tamaño del archivo es crítico para la experiencia del usuario y el SEO. Un video que tarda demasiado en cargar aumenta la tasa de rebote y empeora los Core Web Vitals.
No hay una tabla universal de pesos objetivo: el mismo segundo de imagen pesa muy distinto en un plano estático y en una panorámica con grano. Fije la calidad con CRF, mida el archivo resultante y decida sobre ese número.
Herramientas de compresión gratuitas
- HandBrake: Aplicación gratuita y de código abierto. Su lista de características nombra AV1, H.265, H.264, VP8 y VP9 como codificadores, con MP4, MKV y WebM como contenedores.
- FFmpeg: Herramienta de línea de comandos extremadamente poderosa para cualquier operación de video.
- Shutter Encoder: Interfaz gráfica para FFmpeg, más fácil de usar.
Ejemplo de compresión con FFmpeg
# Convertir MOV a MP4 optimizado para web
ffmpeg -i input.mov -c:v libx264 -preset slow -crf 23 \
-pix_fmt yuv420p -c:a aac -b:a 128k \
-movflags +faststart output.mp4
# Convertir a WebM con VP9
ffmpeg -i input.mov -c:v libvpx-vp9 -crf 33 -b:v 0 -row-mt 1 \
-pix_fmt yuv420p -c:a libopus -b:a 96k output.webm
# Crear versión para móvil (720p)
ffmpeg -i input.mov -vf scale=1280:720 -c:v libx264 -preset slow -crf 23 \
-pix_fmt yuv420p -movflags +faststart output-mobile.mp4El parámetro -crf controla la calidad: valores más bajos significan mayor calidad y mayor tamaño de archivo. Para web, un CRF de 23-28 para H.264 o 30-35 para VP9 ofrece un buen equilibrio.
Verifique la exportación en lugar de darla por buena, porque la ausencia de +faststart es silenciosa:
grep -abo -m2 -e moov -e mdat output.mp4Eso imprime el desplazamiento en bytes del primer moov y del primer mdat. El de moov tiene que ser el menor.
Transparencia, el caso sin solución única
VP9 en WebM transporta canal alfa si se codifica a yuva420p, y Chromium y Firefox lo renderizan. Safari no lo lee: la vía de Apple es HEVC con alfa, documentada en su HEVC Video with Alpha Interoperability Profile. Si una composición de After Effects necesita alfa real en la web, va a publicar dos archivos y un color de fondo como reserva.
¿O quizás YouTube / Vimeo?
Si su video tiene sonido, dura más de 30 segundos y es contenido (por ejemplo, vlog, entrevista), no lo suba a WordPress. Use YouTube o Vimeo.
- Ahorra ancho de banda del servidor.
- Estas plataformas ajustan automáticamente la calidad a la conexión del usuario (streaming adaptativo). WordPress no puede hacerlo: el núcleo no incluye transcodificador, genera versiones redimensionadas de las imágenes al subirlas y nada equivalente para el video, así que sirve un único archivo por descarga progresiva y se atasca en una conexión móvil débil.
Cuando alojar video en su propio servidor
Hay situaciones específicas donde el alojamiento propio tiene sentido:
- Videos de fondo: Animaciones cortas y sin sonido para secciones hero
- Videos privados: Contenido que no debe estar en plataformas públicas
- Requisitos de marca: Cuando necesita un reproductor completamente personalizado sin logotipos de terceros
- Velocidad de carga: Para videos muy cortos, la incrustación de YouTube arrastra un reproductor de terceros y sus cookies para algo que se parece más a un fondo en movimiento
Cuando usar YouTube o Vimeo
- Cualquier video con sonido de más de 30 segundos
- Contenido educativo o de marketing que se beneficia de la búsqueda de YouTube
- Videos que desea que se compartan en redes sociales
- Sitios con ancho de banda limitado donde el streaming adaptativo es esencial
El ancho de banda es la otra mitad de esa decisión. Un bucle de 10 MB en una página con cincuenta mil visitas al mes son quinientos gigabytes de tráfico de salida, y en alojamiento de entrada eso acaba en una conversación con su proveedor.
Implementación responsive de video en WordPress
WordPress no adapta automáticamente el video autoalojado a los tamaños de pantalla, así que esa parte la escribe usted.
CSS para video responsive
/* Contenedor responsive para video */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 */
height: 0;
overflow: hidden;
}
.video-container video,
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}Servir diferentes resoluciones según el dispositivo
<video autoplay loop muted playsinline>
<!-- Dispositivos móviles: 720p -->
<source
src="video-720p.webm"
type="video/webm"
media="(max-width: 768px)"
>
<!-- Desktop: 1080p -->
<source src="video-1080p.webm" type="video/webm">
<source src="video-1080p.mp4" type="video/mp4">
</video>Accesibilidad del video en WordPress
El video accesible no es solo una buena práctica: en el sector público europeo lo exige la directiva de accesibilidad de sitios web y aplicaciones móviles, y en el resto de casos mejora la comprensión del contenido.
Requisitos mínimos de accesibilidad
- Subtítulos cerrados: Para usuarios sordos o con dificultades auditivas
- Audio descripción: Para usuarios ciegos, describiendo elementos visuales
- Controles de teclado: El reproductor debe ser navegable sin ratón
- Texto alternativo: La miniatura del video debe tener un atributo alt descriptivo
- Sin autoplay con sonido: Los videos con sonido nunca deben reproducirse automáticamente
Carga diferida para rendimiento
El atributo loading="lazy" del núcleo de WordPress se aplica a imágenes e iframes, no al elemento <video>, que no admite ese atributo. Para un video autoalojado, lo que difiere la descarga es preload="none" junto con un poster; si hace falta más, cargue la fuente por JavaScript cuando el elemento entre en el viewport con un IntersectionObserver.
Resumen del flujo de trabajo
- Trabaje en After Effects/Premiere con archivos de alta calidad (
.mov). Esa parte nunca estuvo mal. - Exporte para web como H.264 (.mp4), forzando
-pix_fmt yuv420py-movflags +faststart. - Confirme la exportación:
moovcon un desplazamiento menor quemdat, y formato de pixelyuv420psegúnffprobe, noyuv422p10le. - Añada una copia WebM con VP9 y colóquela antes del MP4 en el elemento
<video>. AV1 por encima de ambos solo si persigue los últimos cientos de kilobytes. - Dé al elemento una imagen
posterypreload="none", y mantengamutedyplaysinlineen cualquier bucle con reproducción automática. - Especifique siempre dimensiones de ancho y alto para evitar Layout Shift.
- Si el clip tiene sonido y alguien debe sentarse a verlo, súbalo a YouTube o Vimeo e incrústelo.
Si esto vive dentro de un proyecto que mantenemos, dejamos el paso de codificación configurado una sola vez en el pipeline de despliegue para que nadie tenga que recordar los flags. Forma parte de nuestros servicios de desarrollo WordPress.
