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!

Easy peasy:

ffmpeg \
    -r 20 \
    -f image2 \
    -start_number 0 \
    -i ./images_%05d.png \
    -c:v libvpx-vp9 \
    -pix_fmt yuva420p \
    video.webm

• -r sets the frame rate (here 20 fps).
• -f image2 selects the input file demuxer. It "reads from a list of image files specified by a pattern", see below.
• -start_number 0 sets 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.png sets the path to the image sequence. In place of the numbers in the filename, you can use for example %05d for five zero-padded digits, etc. You get the idea. Here, images_%05d.png would match files images_00000.png, images_00001.png, and so on and so forth.
• --c:v libvpx-vp9 selects the VP9 video codec.
• -pix_fmt yuva420p selects the yuva420p pixel format. Nobody knows what that means, but it adds the alpha channel that makes things transparent.
• video.webm is 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.

1. Add the image sequence: "File" → "Add Image Sequence..."

   Manually set the target frame rate and click "Add"

   

2. Add a job

   1. Make sure you have the Start time set to 00:00:00:00.
   2. Set the frame rate to "Custom" and enter your target frame rate.
   3. Click "Add".

   

3. Select a preset

   Pick "YouTube & Facebook" → "Up to 4K". Click "OK".

   

4. General Settings

   Set "Format" to "Video". You probably don't want an audio track.

   

5. Video Settings

   1. Set "Frame size" to "Automatic".
   2. Set "Frame rate" to "Automatic" and enter the target frame rate.
   3. Set "Codec" to "HEVC". You may set "Encode type" to "Slower". Or not, i don't know.
   4. 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.
   5. Check the "Preserve alpha" option.
   6. 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. If 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. If 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 video.webm instead.

Admire the result

Genos Logo (c) SteelWave LLC, All Rights Reserved