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

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

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

Grazie

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

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

Chrome 30> supporta la trasparenza alfa video.

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

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

Ci sono soluzioni alternative, ma riguardano il re-rendering del video tramite Canvas ed è una sorta di hack. 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.

Al momento, l’unico codec video che supporta veramente 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.

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

Il formato webm è la soluzione migliore per Chrome> 29, ma non è supportato in Firefox IE e Safari, la soluzione migliore è l’utilizzo di Flash (wmode = “transparent”). ma devi dimenticare “ios”.

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.