4

I have a transparent video that I would like to include on my website with a background behind it. I am trying to convert it to .WEBP via ffmpeg.

I have previously succeeded in converting it to .WEBM, but many browsers don't support it, so I thought trying .WEBP. Although .WEBP is also not supported on all browsers, there is a JS package to fix that: http://webpjs.appspot.com/

I have tried (A) from .mov to .webp directly and (B) first from .mov to .webm to then go to .webp The conversion to .webp isn't correct. The new frames are rendered over the old ones. This question had the same problem, but it doesn't start from a .Mov like me so I doesn't help me: Transparent animated WebP not clearing frames

A)

ffmpeg -i input.mov -vcodec libwebp -lossless 1 -qscale 0 -preset none -an -vsync 0 -loop 1 output4.webp

B)

ffmpeg -i input.mov -c:v libvpx -b:v 0.5M -filter:v "crop=in_w*4/6:in_h" -c:a libvorbis -auto-alt-ref 0 -vf scale=960:540 output.webm

ffmpeg -i output.webm -vcodec libwebp -lossless 1 -q 60 -preset default -an -vsync 0 -loop 1 output.webp

My goal is to try webp as a way to show transparent animations. (GIFs are to big, APNG is not supported and also to big).

If someone has another alternative, let me know! I rather not started coding them in actual html/css/js, because an animator already took the time to make them in after effects...

user3469011
  • 59
  • 1
  • 4

3 Answers3

1

I had the same problem with frames overriding each other. Unfortunately, I couldn't find a proper solution of converting .mov with alpha into .webp using FFMPEG.

As a workaround, I convert .mov into .png-sequence (in my case Adobe After Effects) and then pass it to the img2webp converter with simple command like(link):

 img2webp -o output.webp -q 40 -mixed -d 66.66 *.png

Works for me.

1

Use a pattern sequence to name the output files:

ffmpeg -i input.mov -c:v libwebp -lossless 1 webpee-%04d.webp

In this example the files will be named webpee-0001.webp, webpee-0002.webp, webpee-0003.webp, etc.

Remove -qscale 0 -preset none -an -vsync 0 -loop 1 as these are either default, ignored, or unnecessary.

llogan
  • 121,796
  • 28
  • 232
  • 243
0

I had the same problem of "new frames are rendered over the old ones" when using libwebp. But not when using libwebp_anim instead.

These worked for me to produce animated .webp files from a video with alpha channel, or from a sequence of .tiff files with alpha:

in="test-prores-w-alpha.mov"; out="test.webp"
ffmpeg -i "$in" -c:v libwebp_anim -lossless 1 -loop 0 -preset default -an -vsync 0 "$out"
in="test-tiff%08d.tif"; out="test-2.webp"
ffmpeg -r 25 -i "$in" -c:v libwebp_anim -lossless 1 -loop 0 -preset default -an -vsync 0 "$out"
mivk
  • 13,452
  • 5
  • 76
  • 69