Vídeo en la web: fondos, autoplay, formatos y rendimiento

Hace unos meses un hotel nos pidió «un vídeo de fondo como el de las webs grandes». Tenían un material precioso: piscina al amanecer, un camarero sirviendo un café en la terraza, el mar entre las palmeras. El problema era el archivo que nos mandaron, un MP4 de cuatro minutos y 380 MB exportado directamente desde la edición. Puesto tal cual en la cabecera, habría convertido la home en una sala de espera.

Acabamos usando doce segundos de aquel material, en bucle, sin sonido, a 1,8 MB. La sensación era la misma, la web cargaba en un instante y el vídeo completo pasó a vivir en una sección propia, donde quien quería verlo pulsaba y lo veía con sonido y a buena calidad.

Esa es, en el fondo, la idea de esta guía. El vídeo es un recurso extraordinario en una web, siempre que cada pieza tenga claro su papel: ambientar, explicar o emocionar. Cada papel pide un formato, un peso y una forma de integrarlo distintos.

01Tres usos del vídeo en una web, tres formas de integrarlo

Antes de hablar de códecs conviene decidir qué hace el vídeo en la página.

El error más común es mezclar papeles: usar el vídeo corporativo completo como fondo, o meter un clip ambiental en un reproductor de YouTube con todos sus controles. Cuando cada pieza está en su sitio, el rendimiento casi se resuelve solo.

02Vídeo de fondo: cuándo aporta y cómo prepararlo

Un vídeo de fondo funciona cuando transmite algo que la foto no puede: el movimiento del agua, el ritmo de una cocina, la luz cambiando en un espacio. Si el plano es casi estático, una buena fotografía cuenta lo mismo con una fracción del peso.

Criterios de rodaje y edición

• →Planos tranquilos. Movimientos de cámara lentos o cámara fija con acción suave. Los cortes rápidos distraen del texto que va encima y comprimen peor.
• →Bucle limpio. Que el último fotograma enlace con el primero, o un fundido suave, para que el salto no se note.
• →Zona tranquila para el texto. Si el titular va encima, el encuadre necesita un área con poco contraste y poco movimiento.
• →Sin información imprescindible. Nada que el usuario tenga que ver para entender la página; el vídeo acompaña, el texto informa.

Exportar ligero

Para un fondo, en nuestros proyectos solemos trabajar con estas referencias orientativas:

• →1080p para escritorio y 720p para móvil, a 24 o 25 fotogramas por segundo.
• →Entre 8 y 15 segundos de duración.
• →Pista de audio eliminada del archivo, no solo silenciada.
• →Un peso final de 1 a 3 MB en escritorio y por debajo de 1 MB en móvil.

Con la herramienta libre FFmpeg, una exportación típica en dos formatos queda así (la primera línea genera el MP4 con H.264, compatible con todo; la segunda, el WebM con VP9, normalmente más ligero):

ffmpeg -i original.mov -t 12 -an -vf "scale=1920:-2" -c:v libx264 -crf 26 -preset slow -pix_fmt yuv420p -movflags +faststart fondo-1080.mp4
ffmpeg -i original.mov -t 12 -an -vf "scale=1920:-2" -c:v libvpx-vp9 -crf 36 -b:v 0 fondo-1080.webm

El parámetro -an elimina el audio, -crf controla la calidad (más alto, más ligero) y +faststart coloca la información del archivo al principio para que empiece a reproducirse antes de descargarse entero.

03MP4, WebM y AV1: formatos y códecs sin lío

Un archivo de vídeo tiene dos capas: el contenedor (MP4, WebM) y el códec, que es el sistema de compresión (H.264, H.265/HEVC, VP9, AV1). Lo que importa para la compatibilidad es la combinación.

Con el elemento video puedes ofrecer varias fuentes y el navegador elige la primera que sabe reproducir. El orden importa: primero la más eficiente, al final la universal.

04Autoplay en móvil: los atributos que lo hacen funcionar

Los navegadores permiten la reproducción automática solo cuando el vídeo no tiene sonido. Es una política pensada para el usuario, y para un fondo es justo lo que queremos. Este es el marcado completo de un vídeo de fondo bien resuelto:

<video autoplay muted loop playsinline preload="metadata"
       poster="/video/fondo-poster.avif"
       width="1920" height="1080" aria-hidden="true">
  <source src="/video/fondo-1080.webm" type="video/webm">
  <source src="/video/fondo-1080.mp4" type="video/mp4">
</video>

• →`autoplay` y `muted` van juntos: sin muted, el navegador bloquea la reproducción.
• →`playsinline` evita que iOS intente abrir el vídeo a pantalla completa.
• →`loop` repite el clip indefinidamente.
• →`poster` es la imagen que se ve mientras carga, y conviene que sea el primer fotograma, exportado en AVIF o WebP.
• →`preload="metadata"` descarga solo la información básica hasta que hace falta.
• →`width` y `height` reservan el espacio y evitan saltos de diseño.
• →`aria-hidden="true"` indica a los lectores de pantalla que es decorativo.

Versión para móvil y para quien prefiere menos movimiento

Hay dos situaciones en las que conviene no reproducir el fondo: pantallas pequeñas con datos limitados y personas que han activado en su sistema la opción de reducir el movimiento. Para la segunda existe la consulta CSS prefers-reduced-motion, y con un pequeño script se puede pausar el vídeo y dejar solo el póster.

<script>
  const v = document.querySelector('video[autoplay]');
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    v.removeAttribute('autoplay'); v.pause();
  }
</script>

Para servir un clip más ligero en móvil, la forma más robusta es decidir la fuente con JavaScript según el ancho de pantalla antes de asignar el src, o directamente mostrar solo el póster por debajo de cierto tamaño. Muchas veces, en el móvil, una buena foto es la mejor versión del vídeo.

05Vídeo y velocidad: póster, LCP y carga diferida

Un vídeo bien comprimido puede seguir penalizando si se gestiona mal la carga. Tres pautas:

1. 01El póster es tu LCP. En una cabecera, el navegador suele tomar la imagen de póster como el elemento de mayor contenido. Trátala como cualquier imagen principal: ligera, en formato moderno y con prioridad. Si quieres el detalle, está en la guía de imágenes AVIF y WebP.
2. 02Lo que no se ve, no se descarga. Los vídeos que están más abajo en la página deberían cargar con preload="none" y empezar solo cuando entran en pantalla, con un IntersectionObserver (la API del navegador que avisa de cuándo un elemento es visible).
3. 03Un vídeo pesado por página. Varios fondos en movimiento compiten entre sí por la conexión y la batería. Elige el momento estelar y deja que el resto sean imágenes.

Si quieres entender bien qué mide cada métrica y qué valores se consideran buenos, te lo contamos en qué son las Core Web Vitals.

06Clips de demostración: enseñar cómo funciona algo

Entre el fondo ambiental y el vídeo largo hay un formato que usamos cada vez más: el clip corto que enseña algo concreto. Una interfaz en uso, cómo se pliega un mueble, el antes y el después de una reforma. Sustituye con ventaja a un GIF animado, que pesa muchísimo más para la misma calidad.

Funcionan mejor con unas pautas sencillas:

• →Un gesto por clip. Una acción completa en 5–20 segundos, sin introducción ni cierre.
• →Reproducción al entrar en pantalla. Que arranque solo cuando el usuario llega a esa sección, y se pause al salir.
• →Controles visibles si dura más. Si pasa de unos segundos o la persona necesita verlo con calma, añade el atributo controls.
• →Grabación limpia. En interfaces, cursor visible pero sin movimientos nerviosos, y a la resolución exacta en la que se va a mostrar, para que el texto de pantalla se lea nítido.

Un detalle que marca la diferencia: acompaña cada clip de una frase que explique lo que se ve. Quien no pueda o no quiera reproducirlo entiende igual el mensaje.

07YouTube y Vimeo sin cargar la página

El reproductor estándar de YouTube descarga cientos de kilobytes de scripts aunque nadie llegue a pulsar el botón. Con dos o tres vídeos en una página, el efecto en la velocidad es evidente.

La solución habitual es una fachada de carga: mostrar una imagen con un botón de reproducir, y solo al hacer clic sustituirla por el reproductor real. Hay componentes libres muy conocidos que lo hacen, como lite-youtube-embed, y muchos frameworks y CMS lo traen integrado. El usuario apenas nota la diferencia; la página, mucho.

<button class="video-fachada" data-id="ID_DEL_VIDEO"
        aria-label="Reproducir vídeo: así trabajamos en el estudio">
  <img src="/video/estudio-miniatura.avif" alt="" width="1280" height="720" loading="lazy">
</button>

Al pulsar, un pequeño script crea el iframe con la URL de youtube-nocookie.com, el dominio de YouTube que no instala cookies de seguimiento hasta que se reproduce el vídeo. Esto, además, simplifica la gestión del consentimiento de cookies que exige el RGPD.

Cuándo pasar a streaming adaptativo

Si alojas tú mismo vídeos largos, de más de un minuto, un MP4 único obliga a todos los usuarios a descargar la misma calidad. El streaming adaptativo (HLS o DASH) divide el vídeo en fragmentos a varias calidades y el reproductor va eligiendo según la conexión. Las plataformas de vídeo lo hacen por ti; montarlo en un servidor propio solo compensa con mucho volumen o requisitos de privacidad.

08Accesibilidad: que el vídeo sume para todos

Las pautas WCAG 2.2 incluyen varios criterios directamente relacionados con el vídeo:

• →Pausar, detener, ocultar (2.2.2). Todo contenido en movimiento que empiece solo y dure más de cinco segundos necesita un mecanismo para pausarlo. En un fondo, un pequeño botón de pausa en una esquina lo resuelve con elegancia.
• →Control del audio (1.4.2). Si un sonido se reproduce automáticamente más de tres segundos, el usuario tiene que poder pararlo. Otro motivo para que los fondos sean mudos.
• →Subtítulos (1.2.2). Los vídeos con diálogo o locución necesitan subtítulos sincronizados. Lo desarrollamos en la guía de subtítulos y accesibilidad en vídeo.
• →Destellos (2.3.1). Nada que parpadee más de tres veces por segundo.

09El movimiento, al servicio de la historia

Cuando el vídeo se integra con criterio, la web gana algo difícil de conseguir de otra manera: atmósfera. Se siente el lugar, el ritmo, a las personas. En SIMA rodamos y editamos pensando ya en dónde va a vivir cada pieza, con el equipo de producción audiovisual trabajando codo con codo con el de diseño web, para que lo que se ve en pantalla emocione y cargue igual de bien. Si tienes material que te gustaría aprovechar en tu web, o quieres rodar algo nuevo, escríbenos y lo pensamos contigo.