Optimize video for web ("Hint for Streaming"/"Faststart")

Optimize video for web.md

MP4

With: https://www.ffmpeg.org/ (brew install ffmpeg)

The command I used to strip the unused/silent audio channel + "hint for streaming" was:

ffmpeg -i my-video.mp4 -c copy -an -movflags faststart my-video-nosound-hint.mp4

This caused an 8MB video which was too big for web usage, to become a 10MB file that plays immediately while the video is still downloading.

• Before: Lighthouse complained about the page and the video file (Rightly so).
• After: Lighthouse greenlit the page and the video file (Above the fold).

To do the same without stripping audio channel it's:

ffmpeg -i my-video.mp4 -c copy -an -movflags faststart my-video-hint.mp4

WEBM

Using mkclean... (Source)

mkclean --doctype 4 --keep-cues --optimize original.webm optimized.webm

Then embed them with

<video autoplay muted loop playsinline poster="/poster.jpg">
  <source src="/video.webm" type="video/webm">
  <source src="/video.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos.
</video>