Transparent Video For the Web in 2023
We're showing how to create transparent videos from an image sequence of transparent PNGs for use in HTML.
Support for transparent video was added in Safari 11 (macOS High Sierra and iOS 11) in 2017 via the HEVC H.265 codec.
All other browsers support transparent VP9.
Use ffmpeg to create a .webm (VP9 codec)
Note: Install ffmpeg on Macs by running
brew install ffmpeg (it installs everything you need). No idea what you have to do on Linux or Windows, but you're smart, you'll figure it out!
ffmpeg \ -r 20 \ -f image2 \ -start_number 0 \ -i ./images_%05d.png \ -c:v libvpx-vp9 \ -pix_fmt yuva420p \ video.webm
-rsets the frame rate (here 20 fps).
-f image2selects the input file demuxer. It "reads from a list of image files specified by a pattern", see below.
-start_number 0sets the first frame number. If your image sequence starts with a number other than 0, you'll need to set this to that number. Otherwise you can omit this option.
-i ./images_%05d.pngsets the path to the image sequence. In place of the numbers in the filename, you can use for example
%05dfor five zero-padded digits, etc. You get the idea. Here,
images_%05d.pngwould match files
images_00001.png, and so on and so forth.
--c:v libvpx-vp9selects the VP9 video codec.
-pix_fmt yuva420pselects the
yuva420ppixel format. Nobody knows what that means, but it adds the alpha channel that makes things transparent.
video.webmis the output filename.
This will cover most browsers, but not Safari.
For Safari, you need to...
Use Compressor to create a .mov (HEVC H.265 codec)
Note: There are other tools that will create HEVC H.265 for you, it's just that i use Compressor because it kinda works best for me. The drawback is that it costs 50 bucks.
Add the image sequence: "File" → "Add Image Sequence..."
Manually set the target frame rate and click "Add"
Add a job
- Make sure you have the Start time set to 00:00:00:00.
- Set the frame rate to "Custom" and enter your target frame rate.
- Click "Add".
Select a preset
Pick "YouTube & Facebook" → "Up to 4K". Click "OK".
Set "Format" to "Video". You probably don't want an audio track.
- Set "Frame size" to "Automatic".
- Set "Frame rate" to "Automatic" and enter the target frame rate.
- Set "Codec" to "HEVC". You may set "Encode type" to "Slower". Or not, i don't know.
- Set "Avg. Data rate" to "Custom". You'll have to experiment with both the kbps value and with the Quality slider below. See which values give you minimum file size and maximum quality. The values in the following screenshot might or might not give you good results. Tweak them as needed. This is a bit of trial and error.
- Check the "Preserve alpha" option.
- When done, click "Start Batch" and the conversion will begin.
Embed the videos
<video width="1083" height="245" autoplay muted loop playsinline> <source src="video.mov" type="video/quicktime"> <source src="video.webm" type="video/webm"> </video>
It is important that the
video.mov is listed first.
video.webm was listed first, Safari would happily play that, because it does support the webm container format and the VP9 codec.
However, Safari does currently not support transparent VP9. It would ignore the alpha channel, and we don't want that.
video.mov is listed first, Safari will play that instead in all its transparent glory.
Only Safari supports the Quicktime container format, so all other browsers ignore it and load
Admire the result
Genos Logo (c) SteelWave LLC, All Rights Reserved