Ir al contenido
charmotion
Empieza ahora

Video con fondo transparente en sitios web (incluido Safari)

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía: Video con fondo transparente en sitios web (Safari incluido), con personajes de demostración de Charmotion

Para mostrar un video con fondo transparente en todos los navegadores principales, incluye dos archivos en un solo elemento <video>: un .mov en HEVC con canal alfa en primer lugar para Safari y luego un WebM en VP9 con canal alfa para Chrome, Edge y Firefox. Agrega autoplay muted loop playsinline. Safari reproduce WebM pero descarta su canal alfa, por eso el orden de las fuentes importa.

Puntos clave

  • VP9 WebM con canal alfa es transparente en Chrome, Edge y Firefox, pero no en Safari.
  • Safari e iOS 13+ reproducen HEVC con canal alfa en un contenedor .mov; inclúyelo como el primer <source>.
  • Usa autoplay muted loop playsinline, o el iPhone no reproducirá el video automáticamente dentro de la página.
  • Codifica VP9 con canal alfa usando libvpx-vp9 de ffmpeg y yuva420p; codifica HEVC con canal alfa en una Mac con avconvert de Apple, Compressor o AVFoundation.
  • Para personajes interactivos o basados en estados, un archivo de Rive suele pesar menos que un video por cada estado.

¿Qué navegadores admiten WebM con fondo transparente?

Los navegadores basados en Chromium y Firefox reproducen video WebM con canal alfa. Chrome respeta el canal alfa en WebM VP8 desde Chrome 31 y también admite VP9 con canal alfa, y Edge hereda ese comportamiento de Chromium. Firefox también muestra correctamente VP9 con canal alfa.

Safari es la excepción. Reproduce WebM desde hace tiempo (soporte completo desde Safari 16 en macOS y Safari 17.4 en iOS, según Can I use), pero descarta el plano alfa. El video se reproduce y todos los píxeles transparentes se vuelven opacos.

NavegadorVP9 WebM con canal alfaHEVC MOV con canal alfa
Chrome, Edge (escritorio)TransparenteNo en Windows ni Linux; Chrome en macOS lo mostró transparente en nuestra prueba de octubre de 2026
FirefoxTransparenteNo transparente
Safari en macOS Catalina+Se reproduce, sin canal alfaTransparente
Safari en iOS 13+Se reproduce (17.4+), sin canal alfaTransparente

El soporte en móviles es menos confiable. En las pruebas de Jake Archibald de 2024, Chrome en Android tenía un error con el canal alfa que en ese momento ya estaba corregido en Canary, y Firefox en Android a veces detenía la reproducción. Prueba en dispositivos reales antes de publicar.

¿Por qué mi WebM con fondo transparente se ve negro en Safari?

Porque el decodificador de WebM de Safari ignora el canal alfa de VP9. Los fotogramas de color se decodifican bien, pero los datos de transparencia, que van por separado, se descartan, así que el fondo se ve negro o gris en lugar de mostrar la página que hay detrás.

Es una carencia conocida de WebKit, no un problema de tu archivo. En mayo de 2026 se envió un parche para el bug 275908 de WebKit como pull request #64837. Su descripción dice: "los datos del plano alfa se descartaban durante el análisis, lo que hacía que los videos transparentes se reprodujeran completamente opacos". Al 12 de octubre de 2026 ese pull request sigue abierto, así que ninguna versión publicada de Safari muestra WebM con fondo transparente.

La solución hoy no es otro ajuste de WebM. Es un segundo archivo en un formato que Safari sí muestra con transparencia: HEVC con canal alfa. Luego dejas que cada navegador elija el archivo que puede mostrar correctamente, que es lo que hace el marcado de abajo.

Comparación ampliada de un borde suave con canal alfa y un borde dentado de GIF de un bit sobre un degradado

No recurras al GIF para la transparencia. GIF solo admite un índice de paleta totalmente transparente, así que los bordes suaves, las sombras y el antialiasing se convierten en un borde dentado, como muestra la comparación de arriba.

¿Qué es HEVC con canal alfa?

HEVC con canal alfa es la forma que tiene Apple de guardar un canal de transparencia junto con el video H.265 (HEVC). Apple introdujo la reproducción en iOS 13, tvOS 13 y macOS Catalina, y Safari en esos sistemas puede reproducirlo en un elemento <video> normal.

El archivo suele ser un .mov de QuickTime etiquetado como hvc1. La sesión de Apple en la WWDC19 "HEVC Video with Alpha" explica la codificación con AVFoundation (AVAssetWriter, AVAssetExportSession) y VideoToolbox. Compressor y el comando integrado avconvert usan el mismo codificador del sistema.

Dos puntos prácticos:

  • Solo puedes confiar en las plataformas de Apple. Chrome en macOS puede decodificarlo mediante el decodificador del sistema (lo mostró transparente en nuestra prueba de octubre de 2026), pero ni Chrome en Windows, Linux y Android ni Firefox pueden hacerlo, por eso sigues necesitando el WebM.
  • Suele pesar más. En la prueba de Archibald, el mismo clip pesaba 1.1 MB en VP9 con canal alfa y 3.4 MB en HEVC con canal alfa. La proporción depende del contenido y de los ajustes, así que mide tus propios archivos.

Un MP4 estándar en H.264 no puede contener transparencia en absoluto. Si una herramienta ofrece "MP4 transparente", revisa qué códec escribe realmente.

¿Qué marcado HTML funciona en todos los navegadores?

Usa un solo elemento <video> con dos hijos <source>. El archivo HEVC debe ir primero. Los navegadores toman la primera fuente que pueden reproducir, y Safari puede reproducir VP9, así que si el WebM fuera primero, Safari lo elegiría y perdería la transparencia.

<video autoplay muted loop playsinline width="480" height="480">
  <source src="/media/mascot-idle.mov"
          type='video/quicktime; codecs="hvc1.1.6.H120.b0"'>
  <source src="/media/mascot-idle.webm"
          type='video/webm; codecs="vp09.00.41.08"'>
</video>

Para qué sirve cada atributo:

  • autoplay y muted: los navegadores permiten la reproducción automática sin sonido. La política de Chrome dice: "La reproducción automática sin sonido siempre está permitida".
  • playsinline: sin él, Safari en iPhone reproduce el video en pantalla completa en lugar de dentro de la página.
  • loop: repite el clip como un GIF.
  • width y height: reservan el espacio y evitan el layout shift (salto de diseño).

Safari reconoce la cadena de códec HEVC y se detiene en la primera fuente. En las pruebas de Archibald, Chrome y Firefox la omiten y reproducen el WebM. Si además quieres una alternativa sin transparencia para navegadores muy antiguos, puedes agregar un MP4 en tercer lugar, sobre un fondo que coincida con tu página.

¿Cómo codifico VP9 y HEVC con canal alfa?

Parte de un máster que ya tenga canal alfa, como una secuencia PNG o un .mov en ProRes 4444. Luego crea un archivo por formato.

VP9 WebM con canal alfa (cualquier plataforma)

ffmpeg -i master.mov -pix_fmt yuva420p -an \
  -c:v libvpx-vp9 -crf 45 -b:v 0 mascot-idle.webm

El formato de píxel yuva420p es lo que conserva el plano alfa. Un CRF más alto significa un archivo más liviano y menor calidad. El script de Archibald también usa codificación en dos pasadas, lo que ayuda a reducir el peso con la misma calidad.

HEVC MOV con canal alfa (solo macOS)

avconvert -s master.mov -p PresetHEVCHighestQualityWithAlpha -o mascot-idle.mov

avconvert viene con macOS y usa el propio codificador HEVC con canal alfa de Apple; dale un máster con canal alfa que macOS pueda leer, como un .mov en ProRes 4444. En nuestra prueba de octubre de 2026, el resultado se leyó mediante AVFoundation con la transparencia intacta. El codificador hevc_videotoolbox de ffmpeg también tiene una opción -alpha_quality, pero los archivos que generó con ffmpeg 7.1.1 no se pudieron abrir en AVFoundation en la misma prueba, así que revisa en Safari cualquier archivo HEVC hecho con ffmpeg antes de publicarlo. Compressor y AVFoundation (AVAssetWriter) son las otras vías confiables.

Elimina la pista de audio (-an) en ambos. Un archivo sin sonido pesa menos y cumple las reglas de reproducción automática sin depender solo del atributo muted.

¿Por qué mi video no se reproduce automáticamente en iPhone?

Safari en iOS reproduce automáticamente un <video autoplay> solo cuando se cumplen tres condiciones. El video no tiene pista de audio o está silenciado. Está visible en pantalla. En iPhone, además, necesita playsinline; de lo contrario, solo se reproduce en pantalla completa. Estas reglas vienen de "New video policies for iOS" de WebKit.

Trata la reproducción automática como una solicitud, no como una garantía. play() devuelve una Promise que se rechaza cuando no se cumplen las reglas, y MDN recomienda manejarla y ofrecer un botón de reproducción:

const video = document.querySelector("video");
video.play().catch(() => {
  // NotAllowedError: show a static poster or a play button instead.
  video.controls = true;
});

Define siempre una imagen poster que coincida con el primer fotograma. Se muestra mientras el video carga y cuando se rechaza la reproducción automática. Usa un poster en PNG o WebP con fondo transparente para que la alternativa conserve el efecto de transparencia.

¿Cómo mantengo ligeros los archivos de video con fondo transparente?

El video con canal alfa pesa más que el video opaco porque guarda un plano adicional. Algunos hábitos ayudan a controlarlo:

  • Haz loops cortos. Un loop continuo de 3 a 5 segundos suele bastar para un estado de reposo (idle) o de atención.
  • Ajusta el tamaño a la pantalla. Codifica al tamaño más grande que realmente muestres, a menudo de 480 a 720 px para un personaje integrado en la página, no a 1080 px.
  • Recorta al máximo. El área transparente vacía también consume bits.
  • Ajusta la calidad según el formato. Sube el CRF en WebM y baja -q:v o -alpha_quality en HEVC hasta que los bordes empiecen a romperse; luego retrocede un paso.
  • Usa carga diferida debajo del primer pantallazo con preload="none" y una imagen poster.
Gráfico de barras con pesos de archivo reales de un set de 17 animaciones: Rive 40 KB frente a MP4 de 2.6 MB, WebM con fondo transparente de 6.1 MB, GIF de 8.0 MB y MOV HEVC de 9.4 MB
Pesos de archivo de un set real de Charmotion (Pip). Los pesos de video corresponden a una sola animación de 4 segundos.

Como referencia, un loop en reposo de 4 segundos y 1080×1080 de un set de Charmotion pesa 208 KB como MP4 opaco, 488 KB como WebM con VP9 y alfa, y 728 KB como MOV con HEVC y alfa. El archivo Rive del mismo set contiene las 17 animaciones en 40 KB.

¿Qué pasa con Windows, los iPhone que se ven deslavados y la conversión de MOV a WebM?

Hay tres problemas que aparecen cuando el marcado ya funciona:

  • No tienes Mac para el archivo HEVC. Los codificadores de Apple solo funcionan en macOS. FFmpeg 8.0 agregó codificación con alfa en libx265, pero prueba el resultado en Safari antes de depender de él. Además, Windows necesita las HEVC Video Extensions de pago de Microsoft solo para reproducir HEVC, y de todos modos los navegadores ahí no muestran transparencia en HEVC.
  • Convertir un MOV a WebM. ffmpeg lee el alfa de ProRes 4444, pero en nuestras pruebas ffmpeg 7.1.1 decodificó los MOV con HEVC y alfa sin su canal alfa. Pasa primero por ProRes 4444 con avconvert.
  • Transparencia más brillante o deslavada en iPhone. Hay desarrolladores que reportan que las zonas transparentes aclaran lo que hay detrás en iPhone y iPad, sin una solución confirmada; revisa las etiquetas de color del archivo en el Web Inspector de Safari y prueba en un dispositivo.

Los comandos y detalles de los tres casos están en MP4 transparente y HEVC con alfa.

¿Cuándo conviene usar Rive en lugar de video con fondo transparente?

El video con fondo transparente es la herramienta adecuada para un solo loop decorativo, un fondo de sección hero o una toma de producto. Funciona sin JavaScript y es fácil de reemplazar después.

Se complica cuando un personaje tiene que reaccionar. Cada estado se convierte en otro par de archivos, y cambiar entre ellos implica reemplazar las fuentes, lo que puede provocar parpadeos o tirones. Un archivo Rive es vectorial y transparente por naturaleza sobre un canvas, y su máquina de estados (state machine) pasa entre reposo, carga, éxito y error dentro de un solo archivo.

La contrapartida es el reproductor. El runtime web de Rive es un módulo WASM de aproximadamente 222 a 648 KB comprimido con brotli, según el paquete (tabla de tamaños del runtime de Rive); el paquete canvas-lite 2.44.0 que usamos midió unos 373 KB con brotli en octubre de 2026, y se carga una sola vez por sitio. Ese costo vale la pena cuando muestras varios estados o varios personajes, no para un único loop ornamental. Para una comparación formato por formato, consulta GIF vs WebM vs MP4 vs Lottie vs Rive.

Cómo agregar un video con fondo transparente a un sitio web

  1. Exporta un máster con alfa. Renderiza tu animación como secuencia PNG o como .mov en ProRes 4444 con fondo transparente.
  2. Codifica el WebM. Ejecuta ffmpeg con -pix_fmt yuva420p -c:v libvpx-vp9 y sin pista de audio para crear un .webm con VP9 y alfa.
  3. Codifica el MOV en HEVC. En una Mac, ejecuta avconvert con el preset PresetHEVCHighestQualityWithAlpha sobre un máster en ProRes 4444, o exporta HEVC con alfa desde Compressor o AVFoundation.
  4. Agrega ambas fuentes, HEVC primero. Coloca la fuente .mov antes de la fuente .webm dentro de un mismo elemento <video> para que Safari elija el archivo que reproduce con transparencia.
  5. Define los atributos de reproducción. Agrega autoplay muted loop playsinline, ancho, alto y una imagen poster transparente.
  6. Prueba en dispositivos reales. Revisa Safari en iPhone y Mac, Chrome en Android y escritorio, y Firefox, sobre fondos claros y oscuros.

Preguntas frecuentes

¿Un MP4 puede tener fondo transparente?

Un MP4 estándar en H.264 no, porque no tiene canal alfa. Usa WebM con VP9 para Chrome, Edge y Firefox, y HEVC con alfa en un .mov para Safari. ProRes 4444 también lleva alfa, pero es un formato de edición y pesa demasiado para servirlo en una página web.

¿Safari llegará a admitir WebM transparente?

Es posible. Un parche de WebKit para VP9 con alfa (bug 275908, pull request #64837) se envió en mayo de 2026 y seguía abierto el 12 de octubre de 2026. Hasta que llegue a una versión estable de Safari y las versiones anteriores dejen de usarse, sigue sirviendo primero HEVC con alfa.

¿Necesito el parámetro codecs en el atributo type?

Es muy recomendable. La cadena del códec permite que cada navegador decida, antes de descargar nada, si realmente puede decodificar el archivo, y eso es lo que hace que el orden de las fuentes funcione de forma fiable. Los valores habituales son hvc1.1.6.H120.b0 para el .mov en HEVC y vp09.00.41.08 para el WebM en VP9.

¿Un video con fondo transparente afecta el rendimiento de la página?

Puede afectarlo, porque el video con alfa pesa más que el video opaco. Haz loops cortos, codifica al tamaño de visualización, usa preload="none" debajo del primer pantallazo y agrega una imagen poster. Chrome puede contar el poster de un video o su primer fotograma pintado como el elemento LCP, así que un poster ligero importa si el video está en tu sección hero.

Respuestas rápidas de esta guía

Fuentes

Guías relacionadas