Convert MP4 file to animated WebP in ffmpeg

ffmpeg-mp4-to-animated-webp.md

Convert MP4 file to animated WEBP file in ffmpeg CLI

1. Install ffmpeg CLI through homebrew

In terminal.app, install ffmpeg through homebrew

brew install ffmpeg

Validate the installation:

which ffmpeg

Expect to see terminal returns the directory path of ffmpeg such as /usr/local/bin/ffmpeg

2. Set webp properties and convert

Example command which would convert an mp4 file to a lossless loop playing webp file in 20FPS with resolution 800px(width) * h600px(height):

ffmpeg -i input_filename.mp4 -vcodec libwebp -filter:v fps=fps=20 -lossless 1 -loop 0 -preset default -an -vsync 0 -s 800:600 output_filename.webp

Export an animated lossy WebP with preset mode picture：

ffmpeg -i input.mp4 -vcodec libwebp -filter:v fps=fps=20 -lossless 0  -compression_level 3 -q:v 70 -loop 1 -preset picture -an -vsync 0 -s 800:600 output.webp

primary options:

• set frame per second as 20: -filter:v fps=fps=20
• set output file lossless: -lossless 1
• set output webp file loop play: -loop 0. For non-loop, use -loop 1
• set rendering mode -preset default , can set as picture, photo, text, icon, drawing and none as needed. It would effect output file size. http://ffmpeg.org/ffmpeg-all.html#Options-28
• set output webp resolution as w800px * h600px -s 800:600

For more option details, please visit the the ffmpeg libwebp documentation

This method should applicable for majority video formats including .mov, .avi, .flv, etc. as input files as well as .gif format as output file.

Looks like a typo: fps=fps=20

Looks like a typo: fps=fps=20

It is actually the syntax. Here is the documentation: http://ffmpeg.org/ffmpeg-all.html#Examples-108

Hi @witmin , I want to convert a Animated WebP to mp4, how can I achieve that with FFMPEG?

Thaanks bro

Converting from MOV to WEBP, is there a special command to preserve transparency?

For example,
ffmpeg -i input.mov -vf "format=yuva444p, scale= 1200:400, crop=1000:400:100:0" -vcodec libwebp -lossless 1 -loop 0 -preset default -an -vsync 0 -strict -1 output.webp

Converting from MOV to WEBP, is there a special command to preserve transparency?

For example, ffmpeg -i input.mov -vf "format=yuva444p, scale= 1200:400, crop=1000:400:100:0" -vcodec libwebp -lossless 1 -loop 0 -preset default -an -vsync 0 -strict -1 output.webp

@dylannirvana does this solution work https://stackoverflow.com/questions/66144707/how-to-get-animated-webp-file-with-transparent-background-padding-after-converti ?

Thanks Pada tanggal Min, 7 Nov 2021 18.18, Millie ***@***.***> menulis:

…

***@***.**** commented on this gist. ------------------------------ Converting from MOV to WEBP, is there a special command to preserve transparency? For example, ffmpeg -i input.mov -vf "format=yuva444p, scale= 1200:400, crop=1000:400:100:0" -vcodec libwebp -lossless 1 -loop 0 -preset default -an -vsync 0 -strict -1 output.webp @dylannirvana <https://github.com/dylannirvana> does this solution work https://stackoverflow.com/questions/66144707/how-to-get-animated-webp-file-with-transparent-background-padding-after-converti ? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/1edf926c2886d5c8d9b264d70baf7379#gistcomment-3953858>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUQD3G5ZHGAVQHL5CIVGJN3UKZOBRANCNFSM4YPFRGVA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

A little late to the party, but I will just mention that unlike webp and gif, mp4 does not support transparency. Here's an article where Giphy lays out their strategy: https://developers.giphy.com/docs/optional-settings#renditions-on-demand

Hmm, good

Unknown encoder 'libwebp'

To convert a series of transparent .png's to a transparent .webp
ffmpeg -r 30 -i %04d.png -vcodec libwebp -loop 0 -q:v 100 -lossless 1 test.webp

What about converting webp to gif?

^^ Damn that image toke whole my screen view, remove it and put link instead.

Anyway to OP, how can I set sort of key-frame or control frames consistence, e.g. increased fps when the scene have movement and make still image when the scene stops or let it on lower fps?

Anyway to OP, how can I set sort of key-frame or control frames consistence, e.g. increased fps when the scene have movement and make still image when the scene stops or let it on lower fps?

Unfortunately I didn't have such needed before and didn't get a chance for keyframes. Would this post about keyframe timestamps helps: https://superuser.com/questions/554620/how-to-get-time-stamp-of-closest-keyframe-before-a-given-timestamp-with-ffmpeg?

Just leave it here for anyone who wants to set auto-size for width or height:

ffmpeg -i input.mp4 -loop 1 -an -vf scale=400:-2,fps=fps=20 output.webp

Just replace the width or height in scale=width:height with -2 and it will automatically calculate the size for you. Source here.

More information: You shouldn't use the -preset parameter because it will override all other parameters like -lossless, -compression_level and -s so the output may not be as expected. Source here.

Converting a GIF with transparency gives a strange result. We still see the old frames in the background :(

Even with best settings I get horrible color banding and blockyness. Are there ways to improve this?

Comparing to online tools like this one, it seems the codec can indeed achieve way smoother results. It's something to do with ffmpeg then.

I wrote a tool to stitch PNG’s into a n animated WebP video with transparency and no gradient banding.

I wrote a tool to stitch PNG’s into a n animated WebP video with transparency and no gradient banding.

So.. where?

^^ Damn that image toke whole my screen view, remove it and put link instead.

Anyway to OP, how can I set sort of key-frame or control frames consistence, e.g. increased fps when the scene have movement and make still image when the scene stops or let it on lower fps?

How did you handle this?

I wrote a tool to stitch PNG’s into a n animated WebP video with transparency and no gradient banding.

So.. where?

I'm thinking of making it into an app. Would this be interesting?