Burn subtitles into MP4 files before exporting them as GIFs or Animated WebP files

A little over a year ago, I came across “Evolution of img: Gif without the GIF” and learned that, in newer Safari, you can do <img src="funny.mp4">. By leveraging srcset, you can fallback to animated WebP (for Chrome) and old-school GIF (for Firefox).

Examples:

• mp4
• gif
• webp

Anyway, if you have a source MP4 file that you want to overlay text on, you can leverage FFMPEG to burn-in subtitles.

# If you need to increase the contrast of the video a little, first.
ffmpeg \
    -i input.mp4 \
    -c:v libx264 \
    -b:v 2M \
    -maxrate 2M \
    -bufsize 1M \
    -vf "eq=contrast=1.15:brightness=0:saturation=1.5:gamma=1:gamma_r=1:gamma_g=1:gamma_b=1:gamma_weight=1" \
    output1.mp4 \
;

# Convert from commonplace .srt to .ass format.
ffmpeg -i subtitles.srt subtitles.ass;

# Burn the subtitles into your video.
ffmpeg \
    -i output1.mp4 \
    -c:v libx264 \
    -q:v 0 \
    -vf "subtitles=subtitles.ass:force_style='FontName=Helvetica Neue,FontSize=30'" \
    output2.mp4 \
;

From there, you can use something like GIF Brewery to create a .gif from an .mp4, or MP4 → Animated WebP.