Prepare a video for a Next.js website locally

An MP4 file contains a 'moov' atom that holds all container metadata (codec info, duration, sample tables). By default, FFmpeg places the moov atom at the end of the file after encoding. For progressive download (starting playback before the file is fully downloaded), the moov atom must be at the beginning so the player knows how to decode the file before reading video data. -movflags faststart relocates the moov atom to the file start.

Baseline profile has the widest compatibility (all HTML5 video players, all mobile browsers, all smart TVs) but lower compression efficiency. Main profile adds B-frames for better compression, supported by all modern browsers but not all embedded players. High profile provides maximum compression, supported by all modern devices but potentially incompatible with very old hardware. For web content, Main profile is the standard recommendation; Baseline for maximum legacy compatibility.

Recommended bitrates for H.264 web video: 720p at 2–3 Mbps, 1080p at 4–6 Mbps, 4K at 15–20 Mbps. For mobile-first content where bandwidth is a concern, target the lower end. For high-quality reference video on a website where quality matters, target the higher end. CRF mode (rather than fixed bitrate) is generally better for consistent quality — CRF 23 for standard web, CRF 18 for near-lossless.