05.05.2022 0 comments

I think it’s a little known fact that you can use video with alpha transparency on the web. Perhaps because the use cases are few. However, with UI I have been prototyping lately, I have found great utility in it when I want a fancy animation that I can’t easily re-create with SVG. The sort of 3-4 second fancy animation that would come out of After Effects.

Anyway, if search engines have brought you here, you probably want me to get on and ‘show you the money’. Here goes.

There is another, more thorough, resource for this subject you should probably look at, that I with I had found sooner! Head over to: https://rotato.app/blog/transparent-videos-for-the-web

Syntax for transparent video on the web

You can have transparent video on the web right now, working in modern versions of Safari, Firefox, and Chrome (and its variants). As you might expect, browsers can’t agree on the ‘best’ format so you are in the age-old spot of needing to provide alternate file versions. Yes, just like fonts, standard video et al in the past.

To accomplish this feat, we can use the picture element with a couple of alternate sources. Suppose I have my transparent video as two file versions. Don’t worry if getting the two versions themselves eludes you at this point, we will sort that in a moment:

• a *.mp4 HEVC file for Safari
• a *.webm file for Chrome/Firefox

Here is the kind of markup you need:

<video width="236" height="50" autoplay muted>
    <source src="my-vid.mp4" type="video/quicktime"></source>
    <source src="my-vid.webm" type="video/webm"></source>
</video>

Of note, in this example, as it is something I am inserting and removing from the DOM as needed I want it to autoplay, and for that to work I also need it muted. Then we just specify our two sources and the browser picks the first one it can make use of, from top to bottom.

Whether you want to provide a third non-transparent video source for browsers that can’t make any use of either, I’ll leave as an exercise for you.

Creating the correct mp4 and webm files

Firstly, be sure the video you have exported actually has alpha transparency. The file you have should show whatever is behind it, if you open it in QuickTime, for example. If it doesn’t, head back whence you came (Final Cut Pro, Da Vinci, Premiere etc).

Once you have your transparent ‘source’ file, you need to create the HEVC mp4 and webm versions. You can do this a number of ways (allegedly) but let me save you some time. Use the Rotato Convertor tool. I know, how good can a tool be that is one letter away from a potato? Turns out, really good!

If you are on Linux or Windows, you’ll need to look elsewhere I am afraid. Most tools sit on top of FFmpeg but I found getting that running a bit of a pain. YMMV.

Summary

So, that’s it, video with alpha transparency on the web. Relatively simple and surprisingly lightweight alternative to animations.

If this post was useful, Say thanks with a coffee. Every donation helps keep me going!