![](https://blog.gskinner.com/wp-content/uploads/2021/10/Thumbnail-1-1024x576.png)
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.