Create animated GIF and WebP from videos using FFmpeg | Hacker News Reader

Create animated GIF and WebP from videos using FFmpeg

mattj.io

172 pointsAudiolite51 comments

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

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?

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.

thanks! i just wanted to confirm your permission before posting on the repo. :)

on a related note, do you have a command for converting HTML5 animations into webp or mp4 videos?

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.

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

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.

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

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

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

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/

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/#

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!

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

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.

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

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

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

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

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

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.

Agreed. I think people see little video clips and think "oh, a GIF" without realizing that imgur, giphy, etc. don't actually use GIFs.

Also, twitter and Facebbok convert uploaded GIFs to video.

While they might not know the specific term, they do know that something is different with those services b.c. they can’t save the ‘gif’ videos as easily as they can with real gifs.

GIFs are nice for short looping clips, because they can be embedded anywhere and they don't glitch out unexpectedly like every single "using videos as gifs" solution out there.

Animated WebPs also can do that but significantly better. And they are supported by all browsers now.

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.

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.

> Why would you ever do this?

There are still situations where you want a gif. Your approach works fine if you're writing your own code, but if I want to embed a looping animation on a Confluence page, it isn't a viable option.

The articles end goal is not animated GIF files for the sole purpose of putting them on websites. Whether you like it or not, there are still plenty of scenarios where using a GIF file is necessary, Evernote for example only supports embedding animated GIFs not webm or any kind of proper video codec.

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!

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

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.

Don’t use GIFs for videos.

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

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

>I really hope that HEIF animations

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

Basically what this commenter said, but substitute WebP and WebM for HEIF and HEVC

https://news.ycombinator.com/item?id=26298606

GIFs have a nice convenience to them that straight-up video files lack

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.

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.

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

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.

> 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

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

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

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

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

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

Ah, I see, thanks.

I use something similar in MetaMeme for Android

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

How about APNG?

Reply on news.ycombinator.com