Why Your HTML5 Video Makes Three Requests and How to Fix It

1. Three Requests When Loading a Video

Open a new browser tab, open developer tools, switch to the Network panel, select the Media filter, and navigate to http://ali-tmhly.h5.neone.com.cn/ . You will see a video file named video2.mp4 that generates three separate HTTP requests. This is inefficient; ideally there should be only one request.

2. Why the Three Requests Occur

An MP4 file consists of many "boxes" that store metadata such as dimensions, duration, subtitles, and copyright information. One of these boxes, the moov box , contains the index needed to locate video and audio streams.

MOOV BOX

The moov box acts like a table of contents for the MP4 file. When a browser streams the video, it first tries to locate the moov box to determine where the media data starts. If the moov box is placed at the end of the file, the browser must first download the initial part (mdat), then reset the connection and issue a second request with a Range header to fetch the tail where the moov box resides, resulting in three total requests.

Reading the MOOV Box

The browser sends an HTTP request for the MP4 file, reads the beginning of the response body, and if it finds the moov box at the start, it continues reading the media data (mdat). If the moov box is not at the start, the browser reads until it reaches mdat, then immediately resets the connection, uses the known Content‑Length to calculate the file size, and issues a ranged request to retrieve the file’s end where the moov box is located.

3. How to Prevent the Three‑Request Issue

The solution is simple: move the moov box to the beginning of the MP4 file.

1. HandBrake

HandBrake is a free, open‑source tool that can optimize web MP4 videos, including a feature to relocate the moov box for faster web playback.

2. ffmpeg Command

<code>ffmpeg -i your_video.mp4 -movflags faststart -acodec copy -vcodec copy output_video.mp4</code>

FFmpeg ( http://ffmpeg.org/ ) is an open‑source suite for recording, converting, and streaming audio/video. The -movflags faststart option moves the moov box to the front of the file.

4. After Optimization

Once the moov box is placed at the beginning, the video loads with a single request.

Check your own projects for similar three‑request video loading issues and apply the above optimizations.