Issue

To start out with I have this gif I got from Google Images which has a transparent alpha channel.

Here is the original gif (open it in a new tab to see the transparency):

Here is a recording of it playing on my screen in case it doesn't display right in the browser:

Then I run the following script to convert it to webm, which is what I need for the game framework I'm using.

avconv -f gif img.gif img.webm

However it doesn't maintain the transparency. Here is with an overlay of a properly transparent webm (the water, taken from https://phaser.io/examples/v2/video/alpha-webm)

The white box shouldn't be appearing around the gem.

Solution

First convert the gif to png frames:

convert img.gif img%03d.png

Then combine them into a webm with this command (I had to get outside help on this):

ffmpeg -framerate 25 -f image2 -i ./img%03d.png -c:v libvpx -pix_fmt yuva420p img.webm

Answered By - max pleaner

Answer Checked By - Mildred Charles (PHPFixing Admin)