Converting mov files to mp4 on macOS
Around 2018, I found a product called Gifox. It was the first time I’d seen a screen capture software that could make high-quality GIFs. Even today, the animation shown in the README.md of Glorious Demo — the open-source library I created that same year — is powered by Gifox.
For years after, Gifox became my go-to tool for creating GIFs to illustrate many of my blog posts. There's nothing like a short animation showing the step-by-step to get the results described in the text. I'm a deep word lover, but I have to admit that the power of visual communication is overwhelming.
Things started to change when I was browsing through the blog of another cool product called Resend. I saw some animations that showed how to use the product, and I inspected the page to find out what tool they’d used to make the animation. I was surprised to find that it wasn’t a gif but an mp4 video. That led me to dive into the <video> tag, and even more shocked to realize how late I was in discovering that video tags are very well supported by all major browsers for at least a decade.
Once I learned how to easily capture my screen and save it as a video, I started experimenting. That’s when I hit my first snag. macOS’s default screen capture generates videos in mov format, which are big in size — just a few seconds can result in dozens of MB — and aren’t natively supported by browsers. Here is where ffmpeg steps in. Besides being free, it converts mov to mp4 quickly and easily.
Installing ffmpeg
You can get the tool via Homebrew with the following command:
brew install ffmpeg
Converting mov to mp4
The simplest conversion can be done with this command:
ffmpeg -i "{filename}.mov" -vcodec h264 -acodec mp2 "{filename}.mp4"
As you can see, the video codec used in the conversion is h264, and the audio codec is mp2. There are tons of other options you can pass to the command, which you can check out in the official documentation.
Resizing the video
When you capture your screen on a Mac, it’s likely that the video will have a higher resolution than needed. In these cases, the -vf scale option is super handy:
ffmpeg -i {filename}.mov -vf scale="720x406" {filename}.mp4
Reducing the video size by 99.6% with ffmpeg
The command above downsizes the video to 720px wide.
Removing audio
Lastly, if your video is meant to show a step-by-step process in a blog post, the audio track may not be needed. Using the -an flag will remove the audio during conversion:
ffmpeg -i {filename}.mov -vf scale="720x406" -an {filename}.mp4
Tip: To make your video act more like a GIF, add a few attributes to the <video> tag, like autoplay, loop, playsinline, and muted. Wondering why you need muted even when no audio track is present? It’s because browsers do not autoplay videos unless they’re explicitly muted.
Learn more: If all you want is to show a code snippet in action, you might not even need a gif or mp4. Glorious Demo is a JavaScript library that lets you create animations that simulate the editor and terminal. The result is shown in pure HTML/CSS. If you got curious, check out the library’s official site: gdemo.compilorama.com.