How to Include a Screen Recording in a Blog Post (Mac)
When I was writing my blog post about iTerm2 and AppleScript, I wanted to include a screen recording that showed the script in action.
For the last few months, I’ve been using the GIPHY Capture tool for screen recordings. The app has a nice UI, but I haven’t been very happy with the results. The colors become muted and don’t look very good, especially when I record the terminal:
I searched for some GIF recording alternatives, but then I realized that it’s 2018, and it’s probably time to start using the
<video> tag. MP4 files are smaller, they look much better, and the FormAPI blog has a technical audience, so most readers will be using a modern browser.
I decided to record my screen using Quicktime, and use
ffmpeg to convert the MOV videos to MP4. I can also trim the video during the conversion. For example, you can use
-ss 0 -t 10 to get the first ten seconds, or use the
HH:MM:SS.xxx format for more precision:
ffmpeg -i recording.mov recording.mp4 -ss 00:00:01.000 -t 00:00:09.500
Then I can just drop a video tag in my blog post:
<video width="100%" autoplay loop> <source src="/blog/videos/quicktime-capture-example.mp4" type="video/mp4"> </video>
(You can skip the
controls attribute if you want a video that behaves like a GIF.)