Can I have a video with a transparent background using the HTML5 tag?

Question

We shot a representative on a green screen and prepared video files in several formats.

With Flash, we could use transparent wmode in param and embed tags, but is there something similar to this with video and source tags in HTML5? Is it even possible to save .m4v or .ogv video correctly so that we can play these files with a transparent background in our browsers?

thank

Answer 1

Yes, this kind of thing is possible without Flash:

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

However, only the most modern browsers support HTML5 video, and this should be your consideration when deploying to HTML 5, and you should provide a backup (perhaps Flash or just omit transparency).

Answer 2

Chrome 30> supports alpha transparency video.

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

Answer 3

No. This is a limitation of the video codecs supported by browsers: mp4, ogv, and webm do not currently support alpha channels.

There are workarounds, but they require re-rendering the video using Canvas, and this is a kind of hack. seeThru is one example. It works great on HTML5 desktop browsers (even IE9), but it doesn't seem to work very well on mobile devices. I could not get it to work on Chrome for Android. It worked on Firefox for Android, but with a pretty lousy frame rate. I think you might be out of luck with your mobile phone, although I would like you to be proven wrong.

Answer 4

Currently, the only video codec that truly supports the alpha channel is VP8, which uses Flash. MP4 will probably support it if the video is exported as a sequence of images, but I am sure that the Ogg video files do not have any support for the alpha channel. This may be one of those rare cases where sticking to Flash will help you better.

Answer 5

While this is not possible with the video itself, you can use the canvas to draw frames of the video except pixels in the color gamut, etc. This will require some javascript and of course this. See Video Puzzle (apparently broken at the moment), Explosive Video , and Live Video → ASCII

Answer 6

webm format is the best solution for Chrome> 29, but it is not supported in Firefox IE and Safari, the best solution is to use Flash (wmode = "transparent"). but you have to forget "ios".

Answer 7

Quicktime movs is exported as animation, but only in safari. I wish there was a complete solution (or format) that covered all major browsers.