← All writing
 ·  1 min read

Convert MP4 to WebM Lossless on macOS

To convert MP4 to WebM video on macOS, install FFmpeg using Homebrew. And get a video poster too for your video element.

Convert MP4 to WebM Lossless on macOS

To convert MP4 to WebM video on macOS, install FFmpeg using Homebrew.

  • Step 1: Install Homebrew.
  • Step 2: Install FFmpeg.
  • Step 3: Convert MP4 to WebM.

Step 1: Install Homebrew

Using the terminal app run the following.

bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Step 2: Install FFmpeg

Using the terminal app run the following.

bash
brew install ffmpeg

Step 3: Convert MP4 to WebM

Next, to convert your MP4 video to WebM lossless, you need to use -crf 0 in the below commands. However, when converting an MP4 file of 8.5MB I got a WebM version that was 91.6MB – 10x larger! Instead, I recommend using -crf 30. This setting created a great-looking video, and my WebM video ended up being 3.4MB – perfect!

Here is how it works:

  1. Log your first pass.
  2. Then run two passes on the video file after the log is created.
bash
ffmpeg  -i your-video-file.mp4  -b:v 0  -crf 30  -pass 1  -an -f webm -y /dev/null
ffmpeg  -i your-video-file.mp4  -b:v 0  -crf 30  -pass 2  output.webm

You can read more about the details of this approach here.

Generate a Video Poster Image with FFmpeg

Now with ffmpeg installed, you can quickly extract a poster image for your video element.

Grab the first usable frame (skipping potential black frames):

Option 1 — Use the very first frame (frame 0):

bash
ffmpeg -i your-video-file.mp4 -frames:v 1 -q:v 2 poster.jpg

Useful when the opening frame is exactly what you want.

Option 2 — Skip ahead (avoids black or fade-in frames):

bash
ffmpeg -ss 00:00:01 -i your-video-file.mp4 -frames:v 1 -q:v 2 poster.jpg

This captures a frame at 1 second.

Sample HTML (MP4 + WebM + Poster)

html
<video
  autoplay
  muted
  loop
  playsinline
  poster="poster.jpg"
>
  <source src="/output.webm" type="video/webm">
  <source src="/your-video-file.mp4" type="video/mp4">

  Your browser does not support the video tag.
</video>

That’s it — instant placeholders without opening a video editor.