Creating a transparent webm video
What are we talking about?
I came across this topic when I needed a video without background for using it in XSplit and Open Broadcaster Software Studio (OBS). I needed that for lower thirds, but follower or subscription alerts are a good usage as well.
There are two different methods:
- Convert a greenscreen video to transparent webm
- Convert a series of transparent images to transparent webm
This tutorial expects you to just have a single piece of software installed on your computer:
- ffmpeg (mandatory)
If you have trouble installing that, post in the comments, stating your operating system.
Almost all commands you’ll see in the rest of the tutorial have to be entered on the command line, in the location of your source files.
If you are not familiar with the command line/terminal of your operating system - good luck.
For the second technique shown in this post you need individual frames as images with a transparent background. In my case this was an animation made in Adobe After Effects which was exported as a series of PNG images with alpha transparency.
But there is another, maybe more common source in the streamer community: Youtube greenscreen videos.
So I will go all the length and first provide an example of how to create a transparent webm with sound from a greesncreen youtube video first, then show you how to do the same for a series of already transparent png images.
Let’s say we want to create a follower alert using this youtube video:
(In case this get’s taken down some time in the future: It’s a greenscreen video with sound)
First we need to download the video. For this you can use a program like youtube-dl or an online service like onlinevideoconverter. Whatever floats your boat. Just make sure to save the video in a seperate folder, things will probably get a bit messy.
If you know how, converting is simple:
ffmpeg \ -i input.mp4 \ -b:v 1M \ # video bitrate -vf chromakey=0x00FF00:0.2:0.2 \ # greenscreen color -c:v libvpx \ # video codec -pix_fmt yuva420p \ -metadata:s:v:0 alpha_mode="1" \ -auto-alt-ref 0 \ output.webm
The magic of this command is the
-vf chromakey=0x00FF00:0.2:0.2 part.
- 0x00FF00 is the hex color of the color you want to be transparent. In the case of the demo, this is a clear green.
In case your green isn’t pure, use
ffmpeg -i input.mp4 -r 1/1 $filename_%03d.png to extract some frames and then use gimp or an online service to get the right color for your images.
The two values after the color are similarity and blend. As you dan see in the documentation, these two values determine how many shades of green are transparent in the end. Play around with it.
- -c:v libvpx Is another important part of the command. It means ffmpeg will use libvpx 8, which is the only one understood by XSplit/OBS.
The rest.. well, look into the docs or just use it and be happy. Not knowing things tends to keep people happy anyway.
If your lovely graphics designer generated a series of png images with alpha transparency, stuff is easy as well.
- The individual frames are named
image_00001.png and so forth.
ffmpeg \ -start_number 00000 \ -i image_%05d.png \ -c:v libvpx \ -pix_fmt yuva420p \ -metadata:s:v:0 \ alpha_mode="1" \ -auto-alt-ref 0 \ output.webm
The only thing here that might confuse you is
-i image_%05d.png - This just says “use all images as input that start with ‘image_’ followed by 5 digits (filled with zeros on the right) and ending in png’“.
So if your images are named
follower_alert_frame_002.png and so forth, the command would be:
ffmpeg \ -start_number 001 \ -i follower_alert_frame_%03d.png \ -c:v libvpx \ -pix_fmt yuva420p \ -metadata:s:v:0 \ alpha_mode="1" \ -auto-alt-ref 0 \ output.webm
To keep things simple, we use a second step to add audio. Let’s say you have a file
alertsound.mp3, you would add it using this command:
ffmpeg \ -i output.mp4 \ # first input, the video -i alertsound.mp3 \ # the sound -c copy \ # don't re-encode -map 0:v:0 \ # map video -map 1:a:0 \ # map audio output_with_sound.mp4
Tada. Thank’s for reading! :-)