Authors: Zhang Xinxu, Chuwei

This article is produced by a member of YFE, please respect the original, please contact the public account (ID: yuewen_YFE) for authorization to reprint, and indicate the author, source and link.

This article is from the Reading front end teamTread the slantingFace to face sharing, I just ghostwrite into the text version, welcome to pay attention to this “proficient in javascript word spelling” partner.

1. Three requests for video loading

All of you, please open your browser, open a new TAB, open developer tools, switch to network panel → Media option, then — copy the following address (backup address of an active tmall) into the address bar, press enter: ali-tmhly.h5.neone.com.cn/. At this point, you will see an MP4 named VideO2 sending three requests back and forth:

This is bad! There should only be 1 request for the best!

To make matters worse, 3 requests for this kind of video are common!

To make matters worse, many front-end developers are unaware of the problem.

Reasons for the third request

An MP4 video file, not only the content of the video, but also a lot of other information, size, length, subtitles, copyright information, etc.

The information is stored in boxes, in other words, an MP4 file is made up of boxes to store media information.

There is a box related to the number of requests called MOOV Box.

MOOV BOX

Moov Boxes hold information about how to play video, such as size and frames per second, and are stored in special boxes called Moov. You can think of moov Box as a sort of directory for MP4 files.

When you play the video, the program will find the MP4 file, locate the Moov box, and then use this to find the starting position of the video and audio to start playing.

Boxes can be in any order, so the program doesn’t know where the Moov Box is at first. If it is played locally, there is no problem because you already have the entire video file; But if you watch it online, that is, when you stream HTML5 video, there’s a problem.

Read the MOOV process

The browser initiates the HTTP MP4 request directly, reads the beginning of the response body, and if it finds moov at the beginning, reads mdat. RESET the connection to save traffic, read the end of the file through the Range header, because the previous HTTP request has obtained the content-Length, so you know the entire size of the MP4 file. It is also possible to read part of the end of the file through the Range header.

That is to say, the reason why an MP4 video of an activity on Tmall will initiate three requests is because the Moov box of the video is placed at the end of the file. I drew a picture to illustrate:

3. How to avoid three requests for video

It’s easy, just use the tool to move the Moov box to the front of the video.

Specific can be:

1. Handbrake

HandBrake is the Web MP4 video optimization tool of choice, including moov Box to pre-optimize Web requests.

HandBrake is supported for MAC and Windows, free and open source, and more capabilities, such as video compression, can be seen in this article: “HandBrake use graphic tutorial”.

2. The ffmpeg command

As follows:

Mp4 - MOVflags FastStart -acodec Copy -vcodec Copy Output video mp4Copy the code

FFmpeg official website: ffmpeg.org/.

FFmpeg is an open source computer program that can record, convert, and stream digital audio and video. Under LGPL or GPL license. It provides a complete solution for recording, converting and streaming audio and video.

In short, very strong, you are interested in their own exploration.

Four, after optimization

After optimization, you can see the Moov information is brought to the front:

At this point, the video request is only once, without evidence, directly look at the evidence, malicious poke this demo, starting a video activity.

As you can see, when loading, there will be only one request:

Check to see if the video in your project has 3 requests.

For more sharing, please pay attention to the front end team official account of China Literature Group: