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...