What Is The Best Method To Make Videos Transparent These Days?

[Tom Houy]

I have a video of a person talking against a green screen, that I would like to place into a web page (more specifically, an animation I am working on in Adobe Edge Animate.). I would like the green screen portion of the video to be transparent to the rest of the page where it resides.

I know that this could be done with Flash, but I am trying to stick with just HTML/CSS/Javascript if possible.

I’ve seen a number of articles on various ways to accomplish this, but many of them go back several years and I am not clear what the most up to date method(s) are with decent browser support.

I’m not really worried about accommodating IE 9 or lower, so we don’t need to go back that far with support.

[Paulie_D]

Not sure this is something that HTML& CSS can deal with.

It sounds like you need to use video editing software like After Effects even then I’m not sure I’ve even seen a ‘see-through’ video on the web with web content behind it.

I’ve seen a number of articles on various ways to accomplish this.

Interesting..do you have links as this is not something I am aware of in HTML /CSS?

JS might have a solution but it sounds like a real memory/GPU hog.

[Tom Houy]

There was this method I came across, but it doesn’t work for me in the latest versions of Firefox and IE on my Win 7 (64) system:

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

I’m fine with creating an additional “alpha channel” type video if need be. I guess I was just wondering if perhaps there was some sort of JQuery or other Javascript library out there that could pull this off and be cross browser friendly.

[Author]

Posts