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.
vp9. Which Chromium and Firefox support. Then
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
mov. First creating the
ffmpeg -i video.flv video.webm
Works great, plus the alpha channel comes across. Now let’s try the same for
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
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
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
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
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.