Cómo hacer un vídeo de fondo en bucle sin corte para una web

Por qué se nota el corte en un vídeo en bucle

Un bucle muestra un corte cuando su último fotograma no coincide con el primero. El salto se ve sobre todo en lo que debería ser continuo, como un movimiento lento de cámara, un horizonte o la luz sobre una pared. Por eso es primero un problema de cámara, y el arreglo empieza al generar o rodar el clip.

El primer vídeo que hicimos para nuestro primer hero pedía una cámara fija, y el generador hizo una panorámica de todos modos. Su último fotograma coincidía con el primero solo en un 64 %, y salió a 832×464. Lo volvimos a generar.

Paso 1: fija la cámara y limita lo que se mueve

Pide que no haya movimiento de cámara con esas palabras e indica las pocas cosas que pueden moverse. Esta redacción nos dio un clip limpio de 5 segundos a 1280×720:

locked-off static camera, no camera movement, no zoom, no pan.
The woman stands perfectly still; only her hair and the hem of her dress move gently in the breeze.

Los generadores se toman las palabras de movimiento al pie de la letra. En nuestras pruebas con un modelo de vídeo, «calm» dio un clip casi congelado, mientras que «clearly visible» inventó gestos, nubes y ondas y dejó un final distinto del inicio. Pide un movimiento uniforme de un tamaño concreto, prohíbe por escrito lo que no quieras y cuenta con 2 intentos.

Si la herramienta tiene una opción de bucle, úsala. En Midjourney, escribir --loop en el prompt no nos bastó, y lo que marcó la diferencia fue el interruptor de la interfaz.

Paso 2: mide la unión en lugar de mirarla

Puntúa el último fotograma frente al primero con SSIM, y da el bucle por limpio cuando la unión llegue al menos al 95 % de la puntuación entre dos fotogramas normales. El ojo se acostumbra tras unas cuantas reproducciones, y un número no.

ffmpeg -i clip.mp4 -frames:v 1 first.png
ffmpeg -i clip.mp4 -vf "select=eq(n\,1)" -frames:v 1 second.png
ffmpeg -sseof -0.05 -i clip.mp4 -frames:v 1 last.png

# La unión y después el paso normal. Lee el valor "All:" de cada uno.
ffmpeg -i last.png -i first.png -lavfi ssim -f null -
ffmpeg -i first.png -i second.png -lavfi ssim -f null -

La comparación debe ser relativa. Un clip con grano puntúa bajo en cualquier par de fotogramas, así que un umbral fijo descartaría clips que enlazan a la perfección. El clip anterior puntuó 0,868 en la unión frente a 0,850 entre fotogramas, lo que significa que la unión no es mayor que cualquier otro paso del vídeo.

Paso 3: repara un clip que no pasa

La mayoría de los fallos se pueden reparar sin volver a generar, y la reparación adecuada depende de lo que haya fallado.

En clips muy sutiles, los fundidos estándar de 8 bits pueden dejar un escalón visible a mitad de la transición. Mezclar a 16 bits hizo que la unión pareciera un fotograma más en nuestro caso.

Paso 4: codifica un archivo por pantalla

Codifica en H.264 MP4 sin pista de audio, una vez para escritorio y otra como recorte vertical para móvil. El recorte debe centrarse en el sujeto, porque el archivo de escritorio reducido lo deja demasiado pequeño en un móvil.

# Escritorio
ffmpeg -i clip.mp4 -an -c:v libx264 -preset slow -crf 19 -pix_fmt yuv420p -profile:v high -movflags +faststart hero.mp4

# Móvil: recorte 9:16 a 540×960
ffmpeg -i clip.mp4 -an -vf "crop=ih*9/16:ih,scale=540:960:flags=lanczos" -c:v libx264 -preset slow -crf 21 -pix_fmt yuv420p -profile:v high -movflags +faststart hero-mobile.mp4

# Póster: el primer fotograma, para que nada salte cuando empieza el vídeo
ffmpeg -i clip.mp4 -frames:v 1 -q:v 3 hero-poster.jpg

-an quita la pista de audio, y +faststart lleva el índice del archivo al principio para que la reproducción pueda empezar antes de terminar la descarga. La guía de H.264 de FFmpeg (se abre en una pestaña nueva) indica que subir el CRF en 6 reduce el archivo aproximadamente a la mitad, así que es el primer valor que conviene ajustar. Estos son los pesos que salieron en nuestro catálogo.

El grano sale caro, porque cambia en cada fotograma. Una grabación de 64 segundos con grano de película pesaba 70 MB con CRF 25. Una reducción de ruido ligera (hqdn3d=4:3:12:12) y CRF 30 a 1280×800 la dejaron en 16 MB con el mismo nivel medio de grano. H.264 también es el formato común con mayor alcance, como muestra Can I use (se abre en una pestaña nueva).

Si prefieres partir de un bucle terminado, nuestros vídeos de fondo en bucle pasaron por estos mismos pasos.

Paso 5: intégralo para que siempre haya algo que mostrar

Pinta primero el póster, inicia el vídeo por script y gestiona el autoplay bloqueado. Quien visita la página debe ver una imagen terminada en todo momento, aunque el vídeo nunca llegue a reproducirse.

<video id="hero" muted loop playsinline poster="/hero-poster.jpg" width="1920" height="1080"></video>

<script>
  const hero = document.getElementById("hero");
  const phone = matchMedia("(max-width: 767px)").matches;
  const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (!still) {
    hero.src = phone ? "/hero-mobile.mp4" : "/hero.mp4";
    hero.play().catch((error) => {
      if (error.name === "NotAllowedError") showPlayButton();
    });
  }
</script>

Aquí importan cuatro detalles:

• Un vídeo silenciado puede arrancar solo. La política de autoplay de Chrome (se abre en una pestaña nueva) siempre lo permite, y las reglas de WebKit para iPhone (se abre en una pestaña nueva) añaden playsinline para reproducir dentro de la página.
• Solo un error significa bloqueo. play() (se abre en una pestaña nueva) falla con NotAllowedError en ese caso, y los demás errores significan otra cosa.
• El póster puede marcar tu puntuación de velocidad. web.dev (se abre en una pestaña nueva) cuenta el póster o el primer fotograma para el Largest Contentful Paint, lo que llegue antes. En el clip de 5 segundos anterior, los nuestros se quedaron en 50 a 85 KB.
• El contenido en movimiento necesita una pausa. WCAG 2.2.2 (se abre en una pestaña nueva) la pide cuando el movimiento empieza solo, dura más de 5 segundos y aparece junto a otro contenido.

El vídeo es una opción entre tres, así que lee nuestra comparativa de vídeo, WebGL y CSS como fondo de un hero antes de decidirte. Los fondos animados de nuestro catálogo pasaron por estos cinco pasos.