我可以使用HTML5視頻標籤製作具有透明背景的視頻嗎？

Question

我們在綠色屏幕上拍攝了發言人，並準備好多種格式的視頻文件。

使用Flash，我們可以在param和embed標籤中使用透明的wmode，但是在HTML5中有沒有類似於視頻和源標籤的東西？是否可以正確保存.m4v或.ogv視頻，以便我們可以在瀏覽器上以透明背景播放這些文件？

由於

Answer 1

此時，真正支持alpha通道的唯一視頻編解碼器是VP8，其中Flash使用。如果視頻是作爲圖像序列導出的，MP4可能會支持它，但我相當確定Ogg視頻文件不支持任何Alpha通道。這可能是堅持使用Flash可以更好地爲您提供服務的罕見情況之一。

Answer 2

雖然這對於視頻本身來說是不可能的，但您可以使用畫布繪製視頻的幀，除了顏色範圍內的像素或任何其他像素。這需要一些JavaScript，當然。見Video Puzzle（目前顯然打破），Exploding Video和Realtime Video -> ASCII

Answer 3

是的，這樣的事情可能沒有Flash：

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

然而，只有極現代瀏覽器支持HTML5視頻，這應該是您在使用HTML 5進行部署時的考慮因素，並且您應該提供一個後備（可能是Flash或只是省略透明度）。

Answer 4

不。這是瀏覽器支持的視頻編解碼器的限制：mp4，ogv和webm目前不支持Alpha通道。

有解決方法，但它們涉及使用畫布重新渲染視頻，這是一種破解。 seeThru就是一個例子。它在HTML5桌面瀏覽器（甚至IE9）上運行得非常好，但在移動設備上似乎不太適用。我無法在Android版Chrome上使用它。它在Android上的Firefox上工作，但有一個非常糟糕的幀率。我認爲你可能對移動運氣不太好，儘管我很樂意被證明是錯誤的。

Answer 5

Chrome 30>支持視頻alpha透明度。

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

Answer 6

WebM格式爲鉻> 29的最佳方案，但它不能在Firefox IE和Safari，最好的解決方案是使用閃存（WMODE = 「透明」）的支持。但你必須忘記「ios」。

Answer 7

Quicktime movs作爲動畫工作導出，但只在safari中導出。我希望有一個覆蓋所有主流瀏覽器的完整解決方案（或格式）。