Video Formats for Web
Video on the web involves two distinct concepts: containers and codecs. Understanding both helps you choose formats that balance quality, file size, and browser compatibility.
Containers and Codecs
A container (like MP4 or WebM) is the file format — the wrapper that holds everything together. It contains video streams, audio streams, metadata, and subtitles.
A codec (like H.264 or VP9) is the compression algorithm that encodes and decodes the actual video data. The same container can hold video compressed with different codecs.
Think of it like a shipping box (container) holding items packed in different ways (codecs). An MP4 file might contain H.264 video, or it might contain H.265 video — same box, different contents.
Common Format Combinations
| Container | Codec | Browser Support | Compression |
|---|---|---|---|
| MP4 | H.264 | Universal | Good |
| MP4 | H.265/HEVC | Safari, some others | Better |
| WebM | VP9 | Chrome, Firefox, Edge | Better |
| WebM | AV1 | Growing | Best |
MP4 with H.264 works everywhere. It's the safe default when you need maximum compatibility.
WebM with VP9 offers better compression than H.264 at similar quality. Most modern browsers support it.
AV1 provides the best compression but requires more processing power to encode and decode. Browser support is growing but not universal.
HTML Video Element
Serve multiple formats with fallbacks:
<video controls width="640" height="360">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
Your browser doesn't support video.
</video>
Browsers try sources in order, using the first format they support. List modern formats first, with MP4 as the fallback.
Optimization Considerations
Compress appropriately. Video files can be huge. Use tools like FFmpeg or Handbrake to find the right quality/size balance.
Provide multiple resolutions. Mobile users don't need 4K video. Serving appropriate resolutions saves bandwidth.
Add poster images. The poster attribute shows an image before video loads:
<video poster="preview.jpg" controls>
Consider autoplay carefully. Autoplaying video frustrates users and wastes bandwidth. If you must autoplay, mute it — browsers block unmuted autoplay anyway.