How to create a transparent webm file using ffmpeg
ffmpeg -i "transparent.gif" -c:v libvpx -qmin 0 -qmax 18 -crf 9 -b:v 1400K -quality good -cpu-used 0 -auto-alt-ref 0 -pix_fmt yuva420p -an -sn -metadata title="Transparent Webm." "Transparent.webm" |
The above command line will convert a transparent GIF animation to a transparent webm file. This is a very neat trick.
Here’s how to easily convert GIFs with transparent areas to WebM.
First use the ImageMagic convert command.
convert in.gif -coalesce -alpha set -channel RGBA -fill '#d6daf0' -opaque none out.gif |
This will replace transparent areas with a normal color. The color you replace it with will be seen in the thumbnail (e.g. the blue background in >>68580333). That’s why I used #d6daf0, but a user could use any color, this is to match with your website background color.
ffmpeg -i out.gif -c:v libvpx -crf 4 -b:v 0 -auto-alt-ref 0 -pix_fmt yuva420p -vf colorkey=#d6daf0 out.webm |
And this will produce the transparent WebM. Set -crf 4 to whatever quality you see fit.