Intégration d'une vidéo avec fond transparent pour le web

Pourquoi une vidéo avec fond transparent

Pour la mise en page d'éléments animés sur fond transparent, l'usage de vidéos est un choix possible et conseillé à moins de vouloir rendre l'animation interactive . 20 fois moins lourd qu'un GIF, ou une animation APNG ou WEBP ou 10 fois moins lourd qu'un atlas en PNG-8 pour un fichier qu'il m'a été donné de tester, la vidéo avec transparence semble le choix idéal. L'intérêt de la vidéo avec fond transparent étant de pouvoir l'intégrer facilement dans une page en total adéquation avec le fond du site web.

Comment exporter ces vidéos

Cela dit 2 formats doivent être utilisés conjointement, le WebM (vérifier le support du webm) ainsi que le MP4 ou MOV avec le codec HEVC/H.265 qui sera lui nécessaire pour supporter les navigateurs Safari. Alors qu'il suffit de bien cocher RGBA ou transparency pour exporter une vidéo webm depuis Blender ou After Effect, il faudra utiliser ffmpeg en ligne de commande sur Mac pour exporter une vidéo HEVC. La librairie x265 ne supportant pas encore l'alpha, il faut utiliser la librairie hevc_videotoolbox d'Apple.

ffmpeg -i myvideo.mov -c:v hevc\_videotoolbox -allow\_sw 1 -alpha\_quality 0.75 -b:v 2000k -vtag hvc1/ output.mov

Installation de ffmpeg sur mac

Pour installer ffmpeg sur mac :

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Puis :

brew install ffmpeg

Il suffit ensuite d'insérer ses vidéos comme cela et le navigateur se chargera se télécharger celle qu'il supporte :

<video playsinline muted autoplay loop><source src="myvideo.webm" type="video/webm"><source src="myvideo.mov" type="video/quicktime"></video>