Puis-je avoir une vidéo avec un arrière-plan transparent à l'aide d'une balise vidéo HTML5?
Nous avons filmé un porte-parole sur un écran vert et avons préparé les fichiers vidéo dans plusieurs formats.
Avec Flash, nous pourrions utiliser wmode transparent dans les balises param et embed, mais existe-t-il quelque chose de similaire avec les balises video et source en HTML5? Est-il même possible de sauvegarder correctement les vidéos .m4v ou .ogv afin que nous puissions lire ces fichiers avec des arrière-plans transparents sur nos navigateurs?
Merci
Oui, ce genre de chose est possible sans Flash:
- http://hacks.mozilla.org/2009/06/tristan-washing-machine/
- http://jakearchibald.com/scratch/alphavid/
Cependant, seuls les navigateurs très modernes prennent en charge les vidéos HTML5, ce qui devrait être pris en compte lors du déploiement en HTML 5, et vous devez fournir un repli (probablement Flash ou omettre simplement la transparence).
Chrome 30> prend en charge la transparence alpha de la vidéo.
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
Non. Il s'agit d'une limitation du nombre de codecs vidéo pris en charge par les navigateurs: mp4, ogv et webm ne prennent actuellement pas en charge les canaux alpha.
Il existe des solutions de contournement, mais elles impliquent un nouveau rendu de la vidéo à l’aide de Canvas et c’est un peu un hack. seeThru est un exemple. Cela fonctionne assez bien sur les navigateurs de bureau HTML5 (même IE9) mais cela ne semble pas très bien fonctionner sur mobile. Je ne pouvais pas le faire fonctionner du tout sur Chrome pour Android. Cela a fonctionné sur Firefox pour Android mais avec un framerate assez moche. Je pense que vous pourriez ne pas avoir de chance pour le mobile, même si j'aimerais avoir tort.
À l’heure actuelle, le seul codec vidéo qui prend réellement en charge un canal alpha est VP8, que Flash utilise. MP4 le prendrait probablement en charge si la vidéo était exportée sous forme de séquence d'images, mais je suis assez certain que les fichiers vidéo Ogg ne prennent absolument en charge aucun canal alpha. Cela pourrait être l’un des rares cas où coller avec Flash vous servirait mieux.
Bien que cela ne soit pas possible avec la vidéo elle-même, vous pouvez utiliser un canevas pour dessiner les images de la vidéo, à l'exception des pixels dans une plage de couleurs ou autre. Cela prendrait du javascript et bien sûr. Voir Puzzle vidéo (apparemment cassé pour le moment), Vidéo explosive , et Vidéo en temps réel -> ASCII
Les fichiers Mp4 peuvent être lus avec un arrière-plan transparent à l’aide de la bibliothèque seeThrou Js. Tout ce dont vous avez besoin pour combiner une vidéo réelle et un canal alpha dans une seule vidéo. Assurez-vous également de conserver une dimension de hauteur vidéo inférieure à 1400 px, car certains des anciens appareils iPhone ne liront pas les vidéos dont la dimension est supérieure à 2000. C’est très utile dans les appareils Safari de bureau et les appareils mobiles qui ne prennent pas en charge WebM pour le moment.
plus de détails peuvent être trouvés dans le lien ci-dessous https://github.com/m90/seeThru
le format Webm est la meilleure solution pour Chrome> 29, mais il n'est pas pris en charge par Firefox IE et Safari, la meilleure solution consiste à utiliser Flash (wmode = "transparent"). mais vous devez oublier "ios".
Quicktime movs exportés en tant qu'animation mais uniquement en safari. J'aimerais qu'il existe une solution complète (ou un format) couvrant tous les principaux navigateurs.