Mientras hacía unos experimentos, me encontré con un post the Google Chrome versión 30 en la que comentan que agregaron soporte para video con transparencias. Así que me puse a investigar para ver como funcionaban. Despúes de leer la documentación, esto es lo básico que hay que saber:
Hay que editar el video para quitar la pantalla verde de fondo (keyer).
El video necesita ser exportado en Apple ProRes4444, por que este codec tiene soporte para el “alpha channel”.
El archivo generado es un .mov de alta resolución y tamaño, por lo tanto es necesario comprimirlo y transformarlo a un formato amigable para la web. Es necesario tener dos versiones de este video para que funcione en los principales navegadores.
Safari/iOS:
avconvert --preset PresetHEVC1920x1080WithAlpha --source source.mov --output output.m4v
Chrome/Firefox:
ffmpeg -i source.mov -vf scale=1920:1080 output.webm
El html necesario es muy básico:
<video autolay muted loop playsinline>
<source src="output.m4v" type="video/quicktime" />
<source src="output.webm" type="video/webm" />
</video>
Y con eso tenemos videos con transparencias en web.