Alpha video in HTML5 should be easy right? Not quite, certainly not as easy as Flash was. In an article a long long time ago, from an internet far far away … I wrote about alpha video in Flash 8. (remember Flash?). Back then alpha video was a huge new feature that allowed developers to create a .flv with a transparent background that worked in all browsers. Allowing us to do all sorts of fancy effects. With Flash being a thing of the past, modern browsers are not in agreement on what video format we should use on the web. It makes things a little more muddled today.

We have 2 formats that support alpha video on the modern internet when using HTML5. .webm using vp8 or vp9. Which Chromium and Firefox support. Then .mov using H.265/HEVC which Safari supports.

For a recent project, we were tasked with porting an old Flash project to a modern HTML environment. Which has an alpha video as part of the core experience. We had the source .flv, which does include transparency. My first thought was we can use the ubiquitous ffmpeg to re-encode the video to webm and mov. First creating the .webm file:

ffmpeg -i video.flv video.webm

Works great, plus the alpha channel comes across. Now let’s try the same for .mov:

ffmpeg -i video.flv video.mov

The export works, but when trying to play the video in Safari, you get a black background. Which means it’s not recognizing the alpha channel. After a lot of investigation and trying a variety of different pixel formats, thinking that was the issue. Nothing worked. So I’m at the conclusion the H.265 encoder ffmpeg is using is just not supported by Safari (This is as-of version 14, so future versions might correctly support it).

So what to do? We need to support Safari, and any workarounds are not as clean as I would like. Turns out the solution is 2 part. One; we need to create a .mov file that supports alpha channels. Two; convert the video into a web-ready file with H.265/HEVC.

Step 1:
Convert our old flv to a mov using the prores_ks encoder, which supports transparency. You could use any encoder that supports an alpha channel, this one worked for me.

ffmpeg -i video.flv -c:v prores_ks video.mov

Step 2:
Now re-encode the video.mov into a web-supported file using apples avconvert tool. Unfortunately, the avconvert tool does not support flv files, or we could use it directly to convert the flv.

avconvert --preset PresetHEVC1920x1080WithAlpha --source video.mov --output web_ready.mov

Done. Now we have 2 identical videos, just encoded differently. Using the video tag we assign each one to a source to support both videos.

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

If your browser supports transparency, you will see a white background here, if not black will be rendered as seen below using a .mp4 file (which does not support transparency).

It’s worth noting that only Safari 13+ supports H.265/HEVC. If you do still need to support older browsers you will have to resign yourself to using a .mp4 like above, and forgo any transparency.