Comment créer une vidéo h264 avec un canal alpha pour une utilisation avec HTML5 Canvas?
J'ai été intéressé par cette démo: http://jakearchibald.com/scratch/alphavid/
J'ai aussi vu cette question sur ici:
Puis-je avoir une vidéo avec un fond transparent à l'aide de balise vidéo HTML5?
Mais je n'arrive pas à comprendre: Comment créez-vous h264, ogg et webm fichiers vidéo avec des canaux alpha?
OriginalL'auteur chuls | 2011-02-20
Vous devez vous connecter pour publier un commentaire.
Si vous ouvrez cette vidéo de votre démo avec QuickTime, vous verrez une vidéo avec différents RVB et Une régions:
Ensuite, si vous regardez le code pour la démo, vous verrez que c'est à l'aide de l'un à l'écran HTML5 Canvas pour dessiner chaque image de la vidéo, de la lecture de l'alpha pixels à partir de la deuxième moitié de cette toile pour définir explicite par pixel valeurs alpha dans la première moitié, puis à l'aide de
putImageData
pour pousser le fruit à l'autre HTML5 Canvas qui est en fait l'affichage de la vidéo.Couplé avec différents états à travers le web que le H. 264 ne supporte pas l'alpha et je presque se sentir confiants que H. 264 ne peut pas avoir de alpha. Je dis cela parce que je trouve de multiples références à ce 2006 citation de Apple computer concernant la mise à jour de QuickTime dans leur "Leopard" version de mac OS X:
La seule chose que j'ai trouvé liées à cette commercialisation devis, cependant, est ce document montrant comment modifier l'opacité d'un calque vidéo en QuickTime Pro.
Corriger: le
data
attribut d'unImageData
objet est un tableau plat-comme structure appeléeCanvasPixelArray
qui a toutes les valeurs RGBA en série. Le script ci-dessus est en prenant les valeurs du canal bleu dans la moitié inférieure de l'image et de les utiliser comme valeurs alpha dans la moitié supérieure. Puis il copie cette nouvelle image-avec-alpha créé chaque image à la sortie.Je vous remercie beaucoup pour votre aide, je comprends enfin ce qui se passe ici.
OriginalL'auteur Phrogz
WebM prend en charge la transparence maintenant, et Chrome 29+ peut lire sans un drapeau.
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
Mais il ne fonctionne pas sur Chrome pour Android.
OriginalL'auteur RandallB