Html5 and alpha channels options


    I am currently converting a flash site to html5 and would like some clarification on the abilities / limitations of html5 and its support with alpha channels.

 1. Do the video or canvas tag elements even allow the ability to work with alpha channels ?

 If yes....
 2. What is the best video format / codec with alpha channels for support with html5?

    While researching on information for .h264 with alpha channels i came across using offscreen HTML5 Canvas to basically composite 2 separate clips ( h.264 and alpha ) together.

    This seems like a huge workaround, taxing and would be computationally heavy.

Any comments or input on these issues would be much appreciated.

There isn’t a video codec that supports alpha channel that is supported in browsers, AFAIK. So you would have to use a heavy workaround.

For <video>, in theory it would support alpha if the video codec has alpha channel information. You can change the alpha channel of the whole thing with CSS, or maybe regions of it with masks and/or filters.

<canvas> supports alpha channel, as can be seen in the demo you linked to, which paints the video on a canvas and changes the alpha channel of each pixel with ImageData.