Puis-je avoir une vidéo avec un arrière-plan transparent en utilisant une balise vidéo HTML5?

Nous avons filmé un porte-parole sur un écran vert et avons les fichiers vidéo prêts dans plusieurs formats. Avec Flash, nous pourrions utiliser le wmode transparent dans les balises param et embed, mais y a-t-il quelque chose de similaire avec les tags vidéo et source en HTML5? Est-il même possible de sauvegarder correctement les vidéos .m4v ou .ogv afin de pouvoir lire ces fichiers avec des arrière-plans transparents sur nos navigateurs?Puis-je avoir une vidéo avec un arrière-plan transparent en utilisant une balise vidéo HTML5?

Merci

Source

2010-11-01 DavidE

A cette époque, le seul codec vidéo qui prend en charge vraiment un canal alpha est VP8, qui Flash utilise. MP4 le supporterait probablement si la vidéo était exportée en tant que séquence d'images, mais je suis à peu près certain que les fichiers vidéo Ogg n'ont aucun support pour un canal alpha. Cela pourrait être l'un de ces rares cas où coller avec Flash vous servirait mieux.

Source

2010-11-05 12:41:08 Andrew

Bien que ce ne soit pas possible avec la vidéo elle-même, vous pouvez utiliser une zone de dessin pour dessiner les images de la vidéo, sauf pour les pixels d'une gamme de couleurs ou autre. Il faudrait du javascript et bien sur. Voir Video Puzzle (apparemment cassé au moment), Exploding Video et Realtime Video -> ASCII

Source

2010-11-05 12:50:58 cthom06

Oui, ce genre de chose est possible sans Flash:

Cependant, seulement très les navigateurs modernes prennent en charge les vidéos HTML5, et cela devrait être votre considération lors du déploiement en HTML 5, et vous devriez fournir un repli (probablement Flash ou simplement omettre le transparence).

Source

2010-11-05 13:18:41

+26

La première démo utilise l'écrêtage SVG pour 'créer' des régions alpha pour la vidéo. La seconde démo utilise deux canevas HTML5 avec une vidéo avec [pixels alpha explicites] (http://jakearchibald.com/scratch/alphavid/compressed.mp4) pour définir explicitement l'alpha à chaque image. Aucune d'entre elles n'est une vidéo avec un canal alpha. – Phrogz

Avec Flash vous pouvez faire une vidéo d'arrière-plan transparent avec un fichier FLV, je l'ai fait avant, et c'était autour de 2008. – Max

Est-ce le travail avec une vidéo qui a un fond blanc? – Carlos

Non. Il s'agit d'une limitation des codecs vidéo pris en charge par les navigateurs: mp4, ogv et webm ne supportent actuellement pas les canaux alpha.

Il existe des solutions de contournement, mais elles impliquent de re-rendre la vidéo à l'aide de Canvas et c'est une sorte de piratage. seeThru est un exemple. Il fonctionne assez bien sur les navigateurs de bureau HTML5 (même IE9) mais il ne semble pas très bien fonctionner sur les mobiles. Je n'arrivais pas à le faire fonctionner sur Chrome pour Android. Cela a fonctionné sur Firefox pour Android mais avec un framerate plutôt moche. Je pense que vous pourriez être hors de la chance pour mobile, bien que j'aimerais être mal prouvé.

Source

2013-03-12 19:08:16 nullability

Chrome 30> prend en charge la transparence alpha vidéo.

http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video

Source

2013-08-15 05:25:30

WebM est requis pour que cela fonctionne, fonctionne uniquement avec cela. – nycynik

Pas encore de support firefox, mais toujours cool! – ubershmekel

Ceci est la seule vraie réponse - en utilisant réellement '

format WebM est la meilleure solution pour Chrome> 29, mais il est pas pris en charge dans Firefox IE et Safari, la meilleure solution est l'utilisation de Flash (wmode = "transparent"). mais vous devez oublier "ios".

Source

2013-12-10 10:45:33 prakashapkota

Mouvements Quicktime exportés en animation mais en safari uniquement. Je souhaite qu'il y avait une solution complète (ou format) qui couvrait tous les principaux navigateurs.

Source

2014-07-30 22:54:05 user3893535

Puis-je avoir une vidéo avec un arrière-plan transparent en utilisant une balise vidéo HTML5?

Répondre

Questions connexes