Les vidéos HTML5, c'est bien, c'est très bien même. Mais le format avec couche alpha n'est pas interprété par les navigateurs, c'est dommage...
Rassurez-vous, il y a une solution ! La preuve en image (en vidéo, même) :
Bon, la solution est un peu tordue, voire assez complexe mais grâce à ce petit plugin et en respectant quelques règles pour produire les fichiers vidéos, cela devient simple.
En deux mots, le fichier vidéo est en fait composé de deux vidéos l'une au dessus de l'autre.
Celle du haut est en RGB sans transparence et celle d'en dessous a juste la couche alpha.
La balise <video> est masquée en CSS.
On écrit deux balises <canvas> :
Une avec la classe .buffer, également masquée en CSS, a la même taille que la vidéo et en récupère toutes les images.
L'autre avec la classe .output a la taille finale de la vidéo (soit la même largeur et la hauteur divisée par deux) et affiche la vidéo avec couche alpha grâce à une boucle javascript qui récupère les données imageData de la partie haute du canvas.buffer et applique la transparence récupérée dans la partie basse du canvas.buffer là où il faut, c'est magique !
Inclure le plugin jQuery js/video-alpha-canvas.js.
Inclure la css css/video-alpha-canvas.css.
Déclarer le module au domready: $('.video-output').videoAlphaCanvas({'autoplay': true});
Code HTML :
Le plugin inclut du code qui passe la vidéo en pause lorsqu'elle quitte le viewport et la relance lorsqu'elle est visible pour soulager le navigateur et améliorer les performances.
Sur cette vidéo youtube, toutes les explications nécessaires pour produire le fichier vidéo qui va bien :https://www.youtube.com/watch?v=zYsz8xJndWI.
IE windows 7 n'arrive pas à afficher les vidéos HTML5 dont la hauteur dépasse 1088px... La vidéo à afficher ne doit donc pas dépasser 544px de hauteur.