Prepare a video file for the web

prepare-video-for-web.sh

# Source: https://evilmartians.com/chronicles/better-web-video-with-av1-codec

# Encode as H.264. Reduce quality by increasing the CRF value. If you're looking for an output that is roughly "visually lossless" but not technically lossless, use a -crf value of around 17 or 18.
ffmpeg -i <SOURCE> -map_metadata -1 -c:a libfdk_aac -c:v libx264 -crf 28 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4

# Encode as AV1. Reduce quality by increasing the CP value.
ffmpeg -i <SOURCE> -map_metadata -1 -c:a libopus -c:v librav1e -qp 80 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.av1.mp4

# Encode as HEVC. Reduce quality by increasing the CRF value.
ffmpeg -i <SOURCE> -map_metadata -1 -c:a libfdk_aac -c:v libx265 -crf 28 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4

video-tag.html

<video controls width="854" height="480">
	<source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus" />
	<source src="video.hevc.mp4" type="video/mp4; codecs=hvc1" />
	<source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2" />
</video>