Create animated GIF and WebP from videos using FFmpeg

Create animated GIF and WebP from videos using FFmpeg(mattj.io)

172 points by Audiolite 5 years ago | 51 comments

nicbou 5 years ago |

Perhaps it's time to start a collection of ffmpeg commands for every situation, similar to bro pages [1]. I feel like I have to look at my old projects every time I need to use it. It took me a lot of trial and error to write an all-purpose ffmpeg command.

This is how I convert videos to 720p web-playable videos (if it's not already web-playable):

https://github.com/nicbou/homeserver/blob/22c0a160f9df5f4c34...

This is how I create hover previews like on modern streaming sites:

https://github.com/nicbou/timeline/blob/9d9340930ed0213dffdd...

[1] http://bropages.org/tar

_joel 5 years ago | |

There's always commandlinefu.com - https://www.commandlinefu.com/commands/matching/ffmpeg/ZmZtc...

devadvance 5 years ago | |

The hover previews is an awesome example. Thanks for sharing!

I like collections of commands. However, the challenges that seem unsolved are (1) keeping the example in sync with the CLI options, and (2) making it easy to dig into parts of examples. The former is a classic documentation problem, of course.

gitgud 5 years ago | |

Thanks for sharing!

I use a collection of commands in a dotfiles [1] repo I share around a few machines.

This [2] command, compresses any video into a small web-playable file with relatively high quality so you can quickly share HD footage.

    ffcompress INPUT.mp4
    # creates INPUT.compressed.mp4

[1] https://github.com/benwinding/dotfiles

[2] https://github.com/benwinding/dotfiles/blob/master/bin/ffcom...

lozf 5 years ago | |

Something like FFmprovisr:

https://amiaopensource.github.io/ffmprovisr/

https://github.com/amiaopensource/ffmprovisr

(CC Licensed, they accept pull requests.)

---

The ffmpeg subreddit also has some helpful contributors:

https://old.reddit.com/r/ffmpeg/

panabee 5 years ago | |

this is a wonderful idea. we launched a repo here to do exactly this; we'll update the repo over time as we collect commands.

https://github.com/HotpotDesign/FFMpeg-Online

could we list and credit your commands?

nicbou 5 years ago | | |

Sure, they're open source for a reason!

The videoprocessing one is more mature. It's been converting various torrents movies to playable mp4s for a few years.

The 10x1s preview looks magical once you see it in production. It's also a great introduction to ffmpeg filter syntax, which really isn't that complex.

fireattack 5 years ago | | |

I just noticed you have one for "Create single-image video with audio".

This seemingly easy task is actually pretty hard to get right with FFMPEG.

Just leave a few notes here if anyone want to use that.

Video part

Chroma sampling

Without any `pix_fmt` argument, FFMPEG defaults to 4:4:4 instead of typical 4:2:0. Which has very limited support (for example, Firefox doesn't support it.)

To fix: add `pix_fmt yuv420p`, or chain a `format=yuv420p` vf at the end to your other vf(s).

Color space

FFMPEG by default uses BT.601 when converting your RGB images into YUV. This is an issue if your image / output video is in HD resolution. Almost all video players (including browsers) would assume BT.709 for anything >=720P. This causes color to shift in playback（255,0,0 would become 255,24,0).

To fix: add `-vf zscale=matrix=709`.

Note: there are some other video filters can do the same. The most famous being good ol' `scale` (based on libswscale). However, it has a notorious bug that would cause the color to shift on its own (becomes yellow) if the input is in BGR (all the `.bmp`s). See: https://trac.ffmpeg.org/ticket/979 So stick with better `zscale`.

Framerate etc.

You can set framerate with `-r` to a small number for both input (reading the same image X times per second) and output (since it's a still image, you can get away with very low framerate. `-tune stillimage` should also be used for (default) x264 encoder.

In summary:

ffmpeg -loop 1 -r 1 -i image.png -i audio.wav -r 1 -shortest -vf zscale=matrix=709,format=yuv420p -c:v libx264 -tune stillimage output_video.mp4

Audio part - length mismatch bug

Even if we ignore all the image/video troubles above, `ffmpeg -loop 1 -i image.png -i sound.mp3 -shortest video.mp4` still doesn't work well. "-shortest" argument has a long-standing bug (https://trac.ffmpeg.org/ticket/5456) that is the output video would be longer than your input audio (by quite a few seconds, worse if using -r 1). There are some workarounds (listed in the ticket) but they don't eliminate the issue entirely.

Your best bet (if the length match is crucial) is to just convert the output video again and use -t to cut to the proper length.

dddw 5 years ago | | |

I have one that is pretty usefull to me, which I use to convert MTS files from my Sony camera to mp4.

# batch convert MTS files into mp4 files for f in .MTS; do avconv -i "$f" -deinterlace -vcodec libx264 -pass 1 "${f%.MTS}.mp4";done

aq3cn 5 years ago | |

there are many such syntax generator websites for simple video conversion like tasks. see:

https://www.mrfdev.com/ffmpeg-command-generator

http://www.mackinger.at/ffmpeg/

https://marceauka.github.io/ffmpeg-generator/#

neolog 5 years ago | |

https://github.com/tldr-pages/tldr is a large collection

jonplackett 5 years ago |

I switched to ffmpegging my gifs a year ago and haven't looked back. It's a bit annoying to begin with but now so much easier than using some 3rd rate program or having to upload everything to EZGif. It's worth the pain!

devadvance 5 years ago | |

Author here. This is the same journey I went through and I 100% agree! It can be intimidating at first, but FFmpeg is a a worthwhile utility to begin learning.

I've also added some shell functions[0] to my dotfiles to make it a bit easier to use when switching between several different machines.

[0] https://gist.github.com/devadvance/03d3c8f57b3e0254fb989e946...

jonplackett 5 years ago | | |

You've made a really handy cheat sheet, thanks! Bookmarked it for future use!

And yeah, it's great, and not just for gifs. Just quickly re-encoding something in a different format / container is so much easier than faffing around opening a proper program.

Took a while to not get annoyed with it though and figure out annoying watch-outs like -pix_fmt yuv420p, which I now finally have memorised.

cm2187 5 years ago | |

If you start from .png files I struggled to get ffmpeg to produce a high quality gif, and had much more luck with imagemagick.

shmerl 5 years ago |

I found that gifski makes great quality animated gifs. ffmpeg is a mess to use for that. You still need ffmpeg to generate individual frames from a video, but that's a relatively easy step in comparison to that cumbersome set up of dithering for gif generation.

https://gif.ski

forgingahead 5 years ago |

It's pretty amazing how much of modern video editing tech is still powered by ffmpeg under the hood. Highly recommend that people donate if you can:

https://ffmpeg.org/donations.html

Thaxll 5 years ago |

Better link with explanation: https://engineering.giphy.com/how-to-make-gifs-with-ffmpeg/

jwalton 5 years ago |

It’d be nice if you had a brief explanation of what all these flags are and why you’re using them. You can after all convey a video to gif with “ffmpeg -i video.mp4 -o video.gif”.

dheera 5 years ago |

Oh please no. Why would you ever do this? Please use the <video> tag to embed your actual video with a GIF fallback if you wish. Why are we using an ancient 8-bit lossless format for video when pretty much all browsers support video embeds these days?

    <video width="320" height="240" autoplay loop playsinline muted>
        <source src="foo.mp4" type="video/mp4">
        <source src="foo.ogg" type="video/ogg">
        <!-- GIF fallback for ancient browsers but it's 2021 and you probably don't need this anymore -->
        <img src="foo.gif" width="320" height="240">
    </video>

With H.264 or any modern codec you'll get 24-bit color and smaller file sizes than GIF. It's better in every way I can imagine.

dec0dedab0de 5 years ago | |

Will the file autoplay and loop according to the same rules everywhere I view it after I right-click and save it? Because that is what people liked about animated gifs. It's like you're telling people to drive a car instead of riding a bike. They have some crossover in functionality but they're not the same thing.

dheera 5 years ago | | |

Well yeah except GIF isn't a good bike at all, it's a beaten-up Huffy with a rusty chain, worn-down brake pads, leaky tire, and a torn-up seat.

canada_dry 5 years ago |

Handy guide, thx!

A bit overkill but, a gui to hand-hold old folks like me would handy. Perhaps an addin for blender could work - since it's video handling chops are growing bigger every day?

> I'm an engineering manager at Google Stadia

That's gotta be an interesting gig!

geokon 5 years ago |

Yeah but this actually not very good. The good GIFs don't redraw the static areas of the image. You can see it in the keyboard gif

As far as I know there is no automated tool to do it though. It's done manually by the meme lords

Also dialing in the quality is some black magic and not only about adjusting the fps. You can adjust the image size and bitdepth and other parans. This is also not automated and ffmpeg makes it very cumbersome to dial in the right parameters to get decent quality and small file size

I'd actually be really interested to know if there is a better reference out there

arthur2e5 5 years ago | |

There has been an automated tool to not redraw stuff for ages. It's called gifsicle, and you should absolutely give it a try. It also does very good lossy compression.

    https://www.lcdf.org/gifsicle/
    https://kornel.ski/lossygif (merged into gifsicle)

Even imagemagick's convert can the static stuff.

As for the palette stage, that depends on ffmpeg to get things right. I find the guide at https://superuser.com/a/556031 a lot more comprehensive.

robertoandred 5 years ago |

Don’t use GIFs for videos.

empyrical 5 years ago | |

I really hope that HEIF animations can take the place of GIFs someday.

http://nokiatech.github.io/heif/comparison.html

gruez 5 years ago | | |

>I really hope that HEIF animations

considering that HEIF is based on HEVC, wouldn't "HEIF animations" just be HEVC videos?

habi 5 years ago |

I often use https://github.com/thevangelist/FFMPEG-gif-script-for-bash for achieving this. It's a little helper script that does pretty much what is given in the linked blog post.

pianoben 5 years ago |

Nice work!

I once wrote a similar thing as part of a tool to record Android devices and make gifs from the resulting video. I recall having to make two or three separate ffmpeg invocations, but here I only see one. It always frustrated me to have to do that, and I'm pleased to learn how to do it concisely.

qwerty456127 5 years ago |

WTF is an animated WebP? Shouldn't it be just a normal WebM video?

jjcm 5 years ago | |

Not necessarily, as it's treated differently by the browser. Animated WebPs will autoplay without a `muted` or `autoplay` attribute. Under the hood they're no different than a webm video, with the exception of no support for audio tracks.

est31 5 years ago | | |

> Under the hood they're no different than a webm video

From a very high level point of view you are right. Yes, webm videos use vp8 and webp uses vp8 key frames, but there are still differences between animated webp and webm videos without sound.

A webm video is a video with a vp8/vp9 video stream contained inside an mkv container, while webp files, including the animated ones, are inside RIFF containers. Also, webp's animation mode does not have the full inter frame system that vp8 has. It does support carrying over of state from one frame to the next, but does this in the simplest way possible: just paint the next frame over the prior one, respecting the alphas. Most importantly, those frames are still encoded like vp8 Intraframes (keyframes), not like vp8 Interframes [1]. So you won't need a full vp8 decoder to write an animated webp decoder.

[1]: https://tools.ietf.org/html/rfc6386#section-3

kupopuffs 5 years ago | |

Isnt webp potentially lossless? and webm is a container for lossy codecs VP8/VP9?

power78 5 years ago |

Wasn't ffmpeg compiled using Web Assembly? So you could make a web app out of this.

bfoster 5 years ago |

could be useful https://freetools.site/video-editors/make-animation

tambourine_man 5 years ago |

What linux disto are you using that’s so similar to macOS?

devadvance 5 years ago | |

If you're referencing the GIF of the terminal: it's a small docker image[0] I use to have a consistent demo environment. In this case, I'm running it within iterm on macOS.

[0] https://github.com/devadvance/terminalcheatsheet/blob/stagin...

tambourine_man 5 years ago | | |

Ah, I see, thanks.

eneve 5 years ago |

I use something similar in MetaMeme for Android

devadvance 5 years ago | |

Are you using FFmpeg or directly using libavcodec (or similar)?

bitsen 5 years ago |

How about APNG?

<video width="320" height="240" autoplay loop playsinline muted> <source src="foo.mp4" type="video/mp4"> <source src="foo.ogg" type="video/ogg">  <img src="foo.gif" width="320" height="240"> </video>