Skip to content

Instantly share code, notes, and snippets.

@JayHoltslander

JayHoltslander/Optimize video for web.md

Last active January 30, 2024 16:04
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JayHoltslander/a3b163e45d170f4f86777398e1263284 to your computer and use it in GitHub Desktop.
Save JayHoltslander/a3b163e45d170f4f86777398e1263284 to your computer and use it in GitHub Desktop.
Download ZIP
Optimize video for web ("Hint for Streaming"/"Faststart")
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment