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

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

Solution 2

Chrome 30> supports video alpha transparency.

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

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

Solution 4

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

Solution 5

I struggled with this, too. Here's what I found. Expanding on Adam's answer, here's a bit more detail, including how to encode VP9 with alpha in a Webm container.

First, Here's a CodePen playground you can play with, feel free to use my videos for testing.

        <video width="600" height="100%" autoplay loop muted playsinline>
        <source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4'; codecs="hvc1">
        <source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">
        </video>

And here's a full demo page using z-index to layer the transparent video on top and below certain elements. (You can clone the Webflow template)

So, we'll need a Webm movie for Chrome, and an HEVC with Alpha (supported by Safari on all platforms since 2019)

Which browsers are supported?

For Chrome, I've tested successfully on version 30 from 2013. (Caniuse webm doesn't seem to say which webm codec is supported, so I had to try my way). Earlier versions of chrome seem to render a black area.

For Safari, it's simpler: Catalina (2019) or iOS 11 (2019)

Encoding

Depending on which editing app you're using, I recommend exporting the HEVC with Alpha directly.

But many apps don't support the Webm format, especially on Mac, since it's not a part of AVFoundation.

I recommend exporting an intermediate format like ProRes4444 with an alpha channel to not lose too much quality at this step. Once you have that file, making your webm is as simple as

ffmpeg -i "your-movie-in-prores.mov" -c:v libvpx-vp9 movie-webm.webm

See more approaches in this blog post.

View more solutions

Comments

[Phrogz]

The first demo uses SVG clipping to 'create' alpha regions for the video. The second demo uses two HTML5 Canvas along with a video with explicit alpha pixels to explicitly set the alpha every frame. Neither of these are a video with an alpha channel.

[nycynik]

WebM is required for this to work, only works with that.

[Max S.]

With Flash yo can do transparent background video with an FLV file, I did it before, and that was around 2008.

[mikemaccana]

This is the only real answer - actually using <video>. See developers.google.com/web/updates/2013/07/… for more.

[Derzu]

I tried the second solution. It is working on a desktop, but not on mobile, is it supposed to work on mobile also?

[Derzu]

I also had no success on mobile devices, just on desktop. Is there any solution?

[Michael Giovanni Pumo]

Do you also lose control of video playback by using Canvas? I would imagine that you do.

[movAX13h]

you can now use webm with transparency caniuse.com/#search=webm

[Elijah]

Webm is supported

[Amit]

How did you generate the videos with transparency? Was it with the techniques outlined here: kitcross.net/hevc-web-video-alpha-channel ?

[Adam Taylor]

@Amit Yes, I generated the HEVC video using Finder

[Nicolas R]

This helped me a lot thanks :) Important note if someone read this, you may want to add a background: transparent to your video styles, because things like normalize add a black background to video elements

[Jos Faber]

Very thorough explanation, thanks a lot!