Make Animated AVIFs (Instead of GIFs) With FFmpeg

Scratch Notes

These are scratch notes while I'm figuring out how to get things working. Feel free to play along at home. Just keep in mind that things are still very much in flux.

#!/bin/bash

time ffmpeg -i "initial.mp4" \
-t 0.1 -vf cropdetect -f null - 2>&1 | \
awk '/crop/ { print $NF }' | \
tail -1 | xargs -I{CROP} \
ffmpeg -i "initial.mp4" -vf "{CROP}" \
-y output.avif

Notes

This is what I'm experimenting with to replace animated GIFs.
Calling an animated AVIF in a standard HTML <img> tag works on my mac in Firefox, Safari, and Chrome. Need to do more testing though to get a better idea of support.
I'm my older iPhone the animation gets pretty slow with bigger files. (the first test I did was ~1200 pixels wide at 30fpx. The speed it played back varied. The first bit was pretty much real time, then it slowed to probably 5fps or so) (TODO: Get iPhone model number)
On my older iPad the animation only played one time then stopped on the first frame in Safari (TODO: get the version number)
TODO: note about Can I Use support and Baseline 2024 inclusion and how that doesn't really talk about animated stuff, but maybe it's all baked in?
TODO: Figure out if there are built in ways to click to start stop the animation. (There's nothing obvious in the right click menu for Zen)
Make a process with a web component that allows you to stop/start the animation.

-- end of line --