Skip to content

encode.md

Latest commit

 

History

History
152 lines (119 loc) · 3.39 KB

encode.md

File metadata and controls

152 lines (119 loc) · 3.39 KB

Video Encoding Guide

This guide helps you encode your hero video for optimal web performance.

Requirements

  • ffmpeg installed on your system
    • macOS: brew install ffmpeg
    • Ubuntu/Debian: sudo apt-get install ffmpeg
    • Windows: Download from ffmpeg.org

Encoding Commands

1. WebM (VP9) - Modern browsers

ffmpeg -i input.mp4 \
  -c:v libvpx-vp9 \
  -b:v 0 \
  -crf 34 \
  -an \
  -vf "scale=1920:-2" \
  public/video/hero.webm

Parameters:

  • -c:v libvpx-vp9: Use VP9 codec (better compression than VP8)
  • -b:v 0: Variable bitrate mode
  • -crf 34: Quality level (23-40, higher = smaller file but lower quality)
  • -an: Remove audio track (not needed for background video)
  • -vf "scale=1920:-2": Scale to 1920px width, maintain aspect ratio

2. MP4 (H.264) - Fallback for older browsers

ffmpeg -i input.mp4 \
  -c:v libx264 \
  -preset slow \
  -crf 22 \
  -pix_fmt yuv420p \
  -profile:v high \
  -level 4.1 \
  -movflags +faststart \
  -an \
  -vf "scale=1920:-2" \
  public/video/hero.mp4

Parameters:

  • -c:v libx264: Use H.264 codec
  • -preset slow: Better compression (slower encoding)
  • -crf 22: Quality level (18-28 recommended)
  • -pix_fmt yuv420p: Pixel format for broad compatibility
  • -profile:v high -level 4.1: Modern device compatibility
  • -movflags +faststart: Enable progressive streaming
  • -an: Remove audio track

3. Poster Image (Hero Thumbnail)

Extract a clean frame from your video to use as a poster:

ffmpeg -ss 00:00:01 \
  -i input.mp4 \
  -frames:v 1 \
  public/img/hero-poster.png

Parameters:

  • -ss 00:00:01: Seek to 1 second (adjust as needed)
  • -frames:v 1: Extract only 1 frame

Optimization Tips

File Size Targets

  • WebM: Aim for < 5MB for a 10-20 second loop
  • MP4: Aim for < 8MB for a 10-20 second loop
  • Poster: Aim for < 200KB

Quality Settings

If your output file is too large, increase the CRF value:

  • WebM: Try CRF 36-40
  • MP4: Try CRF 24-28

If quality is poor, decrease the CRF value:

  • WebM: Try CRF 30-32
  • MP4: Try CRF 18-20

Resolution Recommendations

For hero videos:

  • Desktop: 1920x1080 (Full HD)
  • Mobile: Consider creating a separate 1280x720 version

Create Mobile Version (Optional)

# WebM mobile
ffmpeg -i input.mp4 \
  -c:v libvpx-vp9 \
  -b:v 0 \
  -crf 36 \
  -an \
  -vf "scale=1280:-2" \
  public/video/hero-mobile.webm

# MP4 mobile
ffmpeg -i input.mp4 \
  -c:v libx264 \
  -preset slow \
  -crf 24 \
  -pix_fmt yuv420p \
  -profile:v high \
  -level 4.1 \
  -movflags +faststart \
  -an \
  -vf "scale=1280:-2" \
  public/video/hero-mobile.mp4

Then use responsive video sources in your Hero component.

Testing

After encoding:

  1. Check file sizes: ls -lh public/video/
  2. Test in browsers: Chrome, Firefox, Safari, Edge
  3. Test on mobile devices
  4. Verify autoplay works (muted videos only)
  5. Check loading performance in DevTools

Troubleshooting

Video won't play:

  • Ensure video is muted (muted attribute required for autoplay)
  • Check browser console for errors
  • Verify file paths are correct

File too large:

  • Increase CRF value
  • Reduce resolution
  • Shorten video duration
  • Reduce frame rate: add -r 24 to commands

Poor quality:

  • Decrease CRF value
  • Increase resolution (if source allows)
  • Use higher quality source file
  • Adjust -preset to slower or veryslow