FormAPI Blog

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:

Bad colors from GIPHY capture

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.)

The Result: