Posso avere un video con sfondo trasparente usando il tag video HTML5?

Question

Abbiamo filmato un portavoce su uno schermo verde e abbiamo i file video pronti in più formati.

Con Flash potremmo usare il wmode trasparente all'interno dei tag param e embed, ma c'è qualcosa di simile a questo con i tag video e di origine in HTML5? È persino possibile salvare correttamente i video .m4v o .ogv in modo che possiamo riprodurre questi file con sfondi trasparenti sui nostri browser?

Grazie

Answer 1

In questo momento, l'unico codec video che supporta realmente un canale alfa è VP8, che utilizza Flash. MP4 probabilmente lo supporterà se il video è stato esportato come una sequenza di immagini, ma sono abbastanza certo che i file video Ogg non hanno alcun supporto per un canale alfa. Questo potrebbe essere uno di quei rari casi in cui il blocco di Flash ti può servire meglio.

Answer 2

Anche se non è possibile con il video stesso, è possibile utilizzare una tela per disegnare i fotogrammi del video, ad eccezione dei pixel in una gamma di colori o altro. Ci vorrebbero alcuni javascript e ovviamente. Vedere Video Puzzle (apparentemente rotto al momento), Exploding Video, e Realtime Video -> ASCII

Answer 3

Sì, questo genere di cose è possibile senza Flash:

• http://hacks.mozilla.org/2009/06/tristan-washing-machine/
• http://jakearchibald.com/scratch/alphavid/

Tuttavia, solo molto i browser moderni supportano i video HTML5 e questa dovrebbe essere la tua considerazione nella distribuzione in HTML 5 e dovresti fornire un fallback (probabilmente Flash o semplicemente omettere il trasparenza).

Answer 4

No. Questa è una limitazione dei codec video supportati dai browser: mp4, ogv e webm attualmente non supportano i canali alfa.

Esistono soluzioni alternative, ma riguardano il re-rendering del video tramite Canvas ed è una specie di modifica. seeThru è un esempio. Funziona piuttosto bene con i browser desktop HTML5 (anche IE9) ma non sembra funzionare molto bene sui dispositivi mobili. Non riuscivo a farlo funzionare su Chrome per Android. Ha funzionato su Firefox per Android ma con un framerate piuttosto scadente. Penso che potresti essere sfortunato per il cellulare, anche se mi piacerebbe essere smentito.

Answer 5

Chrome 30> supporta la trasparenza alfa video.

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

Answer 6

formato WebM è la soluzione migliore per Chrome> 29, ma non è supportato in Firefox IE e Safari, la migliore soluzione è l'uso di Flash (wmode = "transparent"). ma devi dimenticare "ios".

Answer 7

I movimenti Quicktime esportati come animazione funzionano solo in safari. Vorrei che ci fosse una soluzione completa (o formato) che coprisse tutti i principali browser.