Cómo incrustar video generado por IA en sitios web sin destrozar el rendimiento

Hay una trampa silenciosa en la producción de medios sintéticos: generar el video es cada vez más barato, pero incrustarlo bien en la web sigue siendo técnicamente difícil. Y a medida que marcas y agencias producen más video con IA —Sora 2, Seedance, Wan, Kling— el problema se multiplica: diez videos mal optimizados pueden destruir el LCP, el CLS y el INP de cualquier sitio.

Este artículo no es una lista de herramientas. Es un marco de decisión basado en implementaciones reales para clasificar cada video que produces según su rol en la página y elegir la estrategia de embedding correcta sin sacrificar Core Web Vitals.

El problema: el costo oculto del video sintético

El video generado por IA tiene características que lo hacen particularmente costoso para el rendimiento web:

1. Bitrates impredecibles. Los modelos generativos producen salidas con compresión variable. Un video de 30 segundos puede pesar entre 8 MB y 45 MB dependiendo del modelo y la complejidad de la escena.
2. Falta de metadatos de streaming. La mayoría de las plataformas de IA generan MP4 directos, no segmentos HLS o DASH preparados para la web.
3. Sin variantes por resolución. Un mismo video sintético suele venir en una sola resolución, lo que obliga a servir 1080p a un móvil en 3G.

En un proyecto reciente para un cliente editorial en Ciudad de México, un artículo con tres videos generados por IA (dos demostrativos, uno decorativo) pasó de 1.2 MB a 23 MB en peso total de página. El LCP saltó de 1.8s a 6.4s. El problema no era el video: era cómo lo incrustamos.

Las cuatro estrategias de embedding

No todos los videos merecen el mismo tratamiento. Clasificamos cada activo en uno de cuatro niveles según su función en la página:

Nivel 1: Poster-first para video decorativo

El video decorativo (fondos animados, transiciones de sección, ambientación) es el más fácil de optimizar pero el que más se hace mal. La regla es simple: nunca dejes que un video decorativo compita por recursos con el contenido real.

<!-- Video decorativo con poster-first -->
<video
  poster="/images/poster-section-avif.webp"
  preload="none"
  muted
  loop
  playsinline
  aria-hidden="true"
>
  <source src="/video/decorativo-av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
  <source src="/video/decorativo-hevc.mp4" type="video/mp4; codecs=hvc1.1.6.L120.90">
  <source src="/video/decorativo-h264.mp4" type="video/mp4">
</video>

El poster debe ser AVIF o WebP, no un frame del video. En nuestro pipeline, generamos posters AVIF con resolución máxima de 1920px y los servimos con loading="lazy". El video nunca se descarga hasta que el navegador decide que el usuario podría verlo — y con preload="none", muchos navegadores ni siquiera inician la descarga hasta que el video entra al viewport.

Nivel 2: Miniatura + clic para reproducir

Para videos explicativos o demostrativos —tutoriales, showcases de producto, testimonios sintéticos— la estrategia de miniatura con reproducción bajo demanda es la que mejor equilibrio ofrece entre visibilidad y rendimiento.

El patrón es simple: una imagen estática (captura del primer frame o thumbnail generado por IA) con un overlay de play button. El <video> real no se monta hasta que el usuario hace clic. En implementación:

1. Renderizar <img> con el thumbnail como elemento principal
2. Overlay de botón play con CSS
3. Al hacer clic, ocultar la imagen y montar el <video>
4. Iniciar reproducción automáticamente
5. Si se sale del viewport, pausar y liberar recursos

En nuestras pruebas con Astro 6 y 7, esta estrategia redujo el peso inicial de página en un 73% para artículos con 2-3 videos. El LCP se mantuvo por debajo de 2.5s incluso en conexiones 3G simuladas.

Nivel 3: Streaming adaptativo para contenido principal

Cuando el video es el contenido —no un adorno— necesitas HLS o DASH. El MP4 directo no sirve aquí. Un video de 5 minutos a 1080p pesa entre 60 y 200 MB. Descargarlo completo antes de reproducir es inviable.

La arquitectura que usamos:

El paso crítico que la mayoría omite: el poster debe estar en el HTML antes que el reproductor. Cuando HLS.js inicia, necesita descargar el manifiesto (.m3u8), negociar el segmento inicial y decodificarlo. Sin un poster, ese tiempo (1-3 segundos en promedio) es LCP muerto.

Para contenido generado por IA, la transcodificación a segmentos HLS es particularmente importante porque los bitrates de salida de los modelos generativos son inconsistentes. FFmpeg con -crf 23 en AV1 produce segmentos consistentes de ~2-4 Mbps que ABR maneja bien.

Nivel 4: Hero con poster optimizado

El video hero autoplay —el que ves al cargar una página— es el caso más complejo porque impacta directamente el LCP. La estrategia aquí prioriza el poster sobre el video:

1. Renderizar <img> con poster AVIF optimizado (≤100 KB, 1920px)
2. El poster es el LCP candidate (debe cargar primero que el video)
3. <video> con preload="none", autoplay y poster apuntando al mismo AVIF
4. Al hacer clic o al completar carga de LCP, iniciar reproducción
5. Usar IntersectionObserver para pausar si no está en viewport

Este patrón lo implementamos en el rediseño de un sitio de portfolio creativo con videos generados por IA como hero. El LCP pasó de 4.2s a 1.9s —sin sacrificar el autoplay— simplemente moviendo el poster al flujo crítico y relegando el video a segundo plano.

Accesibilidad del video sintético: no es opcional

El European Accessibility Act (EAA) 2025 y WCAG 3.0 (Bronce como nivel base desde 2026) exigen que todo video tenga alternativas textuales. Para video generado por IA, esto significa:

• Transcripciones generadas por el mismo modelo que creó el video. Muchas plataformas (Synthesia, HeyGen) ya exportan VTT automático. Si tu pipeline no lo incluye, estás incumpliendo desde el día uno.
• Subtítulos (captions) incrustados o sidecar. Para video sintético con voz generada, los captions synchronized son obligatorios. Servimos WebVTT con <track> y fallback a JSON incrustado.
• Pausa automática de animaciones. Si el video decorativo tiene movimiento, debe respetar prefers-reduced-motion. En Astro, esto se maneja con media queries CSS que muestran el poster estático en lugar del video cuando la preferencia está activa.

Cuándo NO usar video sintético en la web

Basado en errores que hemos cometido y corregido:

1. Nunca incrustes 3+ videos autoplay en una misma página. El navegador compite consigo mismo por ancho de banda. Nuestro límite es un hero autoplay + un video bajo demanda por sección, máximo.
2. No sirvas MP4 directo para videos de más de 60 segundos. La experiencia de usuario se degrada, el ABR no funciona y los datos móviles se disparan.
3. No generes videos en resoluciones que no vas a usar. Si el diseño del contenedor es 720px, generar en 4K es desperdiciar ancho de banda y almacenamiento.
4. No asumas que el video generado por IA tiene metadatos correctos. Siempre verifica el bitrate, la duración real y el perfil de codec antes de publicar.

Decision matrix: qué estrategia usar

¿El video es decorativo o de fondo?
  → Sí → Nivel 1: Poster-first
  → No → ¿El video es esencial para entender el contenido?
    → Sí → ¿Dura más de 60 segundos?
      → Sí → Nivel 3: Streaming adaptativo
      → No → Nivel 2: Miniatura + click-to-play
    → No → ¿Está above the fold?
      → Sí → Nivel 4: Hero con poster
      → No → Nivel 1: Poster-first

Este árbol de decisión lo usamos internamente en todos los proyectos con medios sintéticos. Nos ha ahorrado múltiples iteraciones de performance budget y, sobre todo, clientes frustrados porque su sitio cargaba lento.

Si trabajas con producción de video generado por IA y necesitas integrarlo en sitios web sin destruir el rendimiento, podemos ayudarte a diseñar el pipeline de publicación. También te puede interesar nuestro análisis de video adaptativo con Astro o el framework de accesibilidad para medios sintéticos.