Why does one video play everywhere while another shows only a black box? Why can two “MP4” files behave completely differently? The answer is that a video file has two layers: the container and the codec. Once you understand the difference, video formats stop being confusing.
Containers vs codecs
Think of a container as a box and a codec as the language the contents are written in.
- The container (MP4, WebM, MOV, MKV) holds the video track, one or more audio tracks, subtitles and information such as duration. The file extension usually names the container.
- The codec (H.264, H.265/HEVC, VP9, AV1 for video; AAC, Opus, MP3 for audio) is the compression method used for each track.
A browser must understand both. An MP4 box containing H.264 video plays almost everywhere. An MP4 box containing HEVC video may not play on some browsers and devices, even though the extension is the same.
The main containers
| Container | Typical codecs | Best for |
|---|---|---|
| MP4 (.mp4, .m4v) | H.264, HEVC, AV1 + AAC | The universal default for the web, phones and social media. |
| WebM (.webm) | VP9, AV1 + Opus | Open, royalty-free web video; good compression; supported by all major modern browsers. |
| MOV (.mov) | H.264, HEVC, ProRes | Apple's QuickTime format; common from iPhones and editing software. Convert to MP4 for the web. |
| MKV (.mkv) | Almost anything | Flexible archive format for downloads and media players; not reliable in browsers. |
The main video codecs
H.264 (AVC)
Released in 2003 and still the most compatible codec in the world. Every browser, phone, smart TV and editing program handles it. Files are larger than with newer codecs, but if you need one version that works everywhere, this is it.
H.265 (HEVC)
About 30–50% smaller than H.264 at similar quality. iPhones record in HEVC by default. Browser support depends on the device having hardware decoding, so it's risky as the only version on a website.
VP9
Google's royalty-free codec, used heavily by YouTube. Compression is similar to HEVC, and it plays in all major browsers, usually in a WebM container.
AV1
The newest widely supported codec, developed by an industry alliance and royalty-free. It typically beats VP9 and HEVC on size. Modern browsers support it, though older devices may decode it slowly in software. Encoding AV1 is also much slower than H.264.
Audio codecs in brief
AAC is the standard partner for H.264 in MP4. Opus is excellent, open and paired with VP9/AV1 in WebM. MP3 is universal but less efficient.
What to use on a website
- Short clips and background videos: MP4 with H.264, plus optionally a WebM/AV1 or VP9 version listed first in
<source>tags so modern browsers get the smaller file. - Long videos: use adaptive streaming (HLS or DASH) or a video platform, so viewers on slow connections get a lower quality instead of endless buffering. See HLS and DASH explained.
- Replace animated GIFs with a muted, looping MP4; it's often 5–10 times smaller.
- Always add a poster image and
preload="none"orpreload="metadata"so the page doesn't download the whole video on load.
<video controls preload="metadata" poster="intro.jpg" width="1280" height="720">
<source src="intro.av1.webm" type='video/webm; codecs="av01.0.05M.08"'>
<source src="intro.mp4" type="video/mp4">
</video>Troubleshooting playback
- Black screen but sound plays: the browser doesn't support the video codec (often HEVC). Re-encode to H.264.
- Video plays but no sound: the audio codec isn't supported, or the file has no audio track. Check it in a player such as VLC (Tools → Codec Information).
- Plays locally but not on the site: the server may send the wrong content type, or not support range requests needed for seeking.
Key takeaways
- The extension names the container; the codec decides compatibility.
- MP4 + H.264 + AAC is the safest single choice.
- WebM with VP9 or AV1 saves bandwidth in modern browsers.
- Use streaming for long videos and a poster image for every video.