问题
We filmed a spokesperson on a green screen and have the video files ready in multiple formats.
With Flash we could use the wmode transparent within the param and embed tags, but is there something similar to this with the video and source tags in HTML5? Is it even possible to properly save .m4v or .ogv videos so that we can play these files with transparent backgrounds on our browsers?
Thanks
回答1:
Yes, this sort of thing is possible without Flash:
- http://hacks.mozilla.org/2009/06/tristan-washing-machine/
- http://jakearchibald.com/scratch/alphavid/
However, only very modern browsers supports HTML5 videos, and this should be your consideration when deploying in HTML 5, and you should provide a fallback (probably Flash or just omit the transparency).
回答2:
Chrome 30> supports video alpha transparency.
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
回答3:
Update: Webm with an alpha channel is now supported in Chrome and Firefox.
For other browers, there are workarounds, but they involve re-rendering the video using Canvas and it is kind of a hack. seeThru is one example. It works pretty well on HTML5 desktop browsers (even IE9) but it doesn't seem to work very well on mobile. I couldn't get it to work at all on Chrome for Android. It did work on Firefox for Android but with a pretty lousy framerate. I think you might be out of luck for mobile, although I'd love to be proven wrong.
回答4:
At this time, the only video codec that truly supports an alpha channel is VP8, which Flash uses. MP4 would probably support it if the video was exported as an image sequence, but I'm fairly certain Ogg video files have no support whatsoever for an alpha channel. This might be one of those rare instances where sticking with Flash would serve you better.
回答5:
While this isn't possible with the video itself, you could use a canvas to draw the frames of the video except for pixels in a color range or whatever. It would take some javascript and such of course. See Video Puzzle (apparently broken at the moment), Exploding Video, and Realtime Video -> ASCII
回答6:
Mp4 files can be playable with transparent background using seeThrou Js library. All you need to combine actual video and alpha channel in the single video. Also make sure to keep video height dimension below 1400 px as some of the old iphone devices wont play videos with dimension more than 2000. This is pretty useful in safari desktop and mobile devices which doesnt support webm at this time.
more details can be found in the below link https://github.com/m90/seeThru
回答7:
webm format is the best solution for Chrome > 29, but it is not supported in Firefox IE and Safari, the best solution is using Flash (wmode="transparent"). but you have to forget "ios".
回答8:
Quicktime movs exported as animation work but in safari only. I wish there was a complete solution (or format) that covered all major browsers.
来源：https://stackoverflow.com/questions/4073303/can-i-have-a-video-with-transparent-background-using-html5-video-tag