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

Question

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 em

Answer 1

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

Answer 2

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

Answer 3

Chrome 30> supports video alpha transparency.

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

Answer 4

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".

Answer 5

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).

Answer 6

These days, if you use two different video formats (WebM and HEVC), you can have a transparent video that works in all of the major browsers except Internet Explorer with a simple <video> tag:

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mov" type="video/quicktime">
</video>

Here's a demo you can test with