A client wanted to embed an animation into a blog post about HTMX and Chart.js - they’d recorded a video using Snagit but exporting it to a gif, creating a file over 1mb
Here’s what we advised them instead:
- Step 1: export the video as an mp4
- Step 2: Install ffmpeg using
brew install ffmpeg
orwinget install ffmpeg
- Step 3: Create an optimised mp4:
ffmpeg -i video.mp4 -vcodec h264 -acodec aac -crf 30 -strict -2 video.optim.mp4
- Step 4: Convert the mp4 to webm:
ffmpeg -i video.mp4 -vcodec libvpx-vp9 -b:v 1M -acodec libvorbis video.webm
- Step 5: Use the HTML5 video control with poster and fallback data sources for different video types:
<video autoplay muted loop playsinline poster="chartjs.jpg">
<source src="chartjs.webm" type="video/webm">
<source src="chartjs.mp4" type="video/mp4">
</video>
(you need all the autoplay muted playsinline
attributes to get a video to autoplay without user interaction)
Result
The webm / optimised mp4 files are ~100kb, compared to the 1mb gif!
If you need video, do get in touch!