File Formats & Media

MP4 File

Definition

MP4 is MPEG-4 Part 14, standardised as ISO/IEC 14496-14 in 2003 and built on the ISO Base Media File Format. The important point is that it is a container, not a codec: the .mp4 extension tells you how the streams are packaged, not how they were compressed. H.264 video with AAC audio inside an MP4 plays in every browser and on every phone; H.265 or AV1 inside the same extension may not play at all. Internally the file is a set of boxes — ftyp identifying the flavour, moov holding the index of every frame, and mdat holding the actual media. The MIME type is video/mp4, and a silent, looping MP4 has largely replaced the animated GIF for short clips on the web.

Why It Matters

Two things go wrong with MP4 in practice, and neither is visible from the file name. The first is codec mismatch: a video exported as H.265 to save space plays in Safari and fails in Firefox, and the only symptom is a black box. The second is where the index sits. If the moov box is written at the end of the file, a browser must fetch the entire thing before it can show the first frame, so a 40 MB recording stalls for ten seconds on a slow connection; moving moov to the front lets playback begin almost immediately. It is also worth remembering that the file carries no captions of its own unless you add a track, so a separate caption file is what makes the video usable to someone who cannot hear it.

How It Works

A dependable encode looks like this: ffmpeg -i input.mov -c:v libx264 -crf 23 -preset medium -pix_fmt yuv420p -c:a aac -b:a 128k -movflags +faststart output.mp4. The CRF number sets quality, roughly 18 for near-transparent and 28 for small-and-acceptable, with each step of about 6 halving or doubling the size; yuv420p is the pixel format every decoder handles; and +faststart is what relocates the moov box to the front. Serving needs two things from the host: the Content-Type video/mp4, and support for HTTP Range requests answering with 206 Partial Content, without which a viewer cannot scrub the timeline. In the markup, preload=metadata avoids pulling the whole file before anyone presses play, and a poster image gives the player something to show. Encoding a WebM alongside gives modern browsers a smaller option.

Real-World Example

A three-minute onboarding walkthrough is published on 99helpers at onboarding-demo.99helpers.site/tour.mp4. The ProRes master out of the editor was 1.4 GB; at 720p with CRF 23 it becomes 38 MB, which is a reasonable download for a page people watch once. Adding the faststart flag moved the moment playback begins from about nine seconds to under one, with no change in file size at all.

Common Mistakes

  • Assuming the .mp4 extension guarantees playback — the container is fine, but H.265 or 10-bit video inside it will fail in several browsers
  • Forgetting the faststart flag — the video downloads completely before the first frame appears, which reads to the visitor as a broken player
  • Uploading the editing master — a 1 GB export on a web page is bandwidth spent on nobody's benefit
  • Publishing video with no captions and no transcript — anyone watching without sound, which is most people on a phone, gets nothing from it

Related Terms

Put a file online in seconds

Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.

Host a file free →