От 3-х запросов на видео с мероприятия на Tmall

HTTP JavaScript
От 3-х запросов на видео с мероприятия на Tmall

Автор этой статьи: Чжан Синьсюй, ногами криво

Исходное заявление: Эта статья подготовлена ​​членами команды интерфейса чтения YFE, пожалуйста, уважайте оригинальность, пожалуйста, свяжитесь с общедоступной учетной записью (id: yuewen_YFE) для авторизации и укажите автора, источник и ссылку.

Эта статья написана фронтенд-командой по чтению текста.удар кривоСовместное использование, я только что превратился в текстовую версию, добро пожаловать в этот маленький партнер "заклинание слова Jing JavaScript".大笑

1. 3 запроса на загрузку видео

Все здесь, пожалуйста, откройте браузер, откройте новую вкладку, откройте инструменты разработчика, переключитесь на сетевую панель → Опция «Медиа», а затем — скопируйте следующий адрес (резервный адрес действия на Tmall) в адресную строку и нажмите Ввод:ali-tmhly.h5.neone.com.cn/. На этом этапе вы увидите mp4 с именем video2 с 3 запросами, отправленными туда и обратно:

mp4三次请求

Это плохо! Только 1 запрос должен быть оптимальным!

Что еще хуже, 3 запроса на видео такого типа довольно распространены!

Что еще хуже, многие разработчики интерфейса не знают об этой проблеме.

2. Причины 3 запросов

Видеофайл MP4 — это не только видеоконтент, но и много другой информации, такой как размер, продолжительность, субтитры, информация об авторских правах и т. д.

Эта информация помещается в блок, другими словами, файл MP4 состоит из множества блоков для хранения мультимедийной информации.

视频box信息

Среди них есть поле, связанное с количеством запросов, которое называется MOOV BOX.

MOOV BOX

Блоки Moov хранят информацию о том, как воспроизводить видео, например размер и количество кадров в секунду, в специальном блоке под названием moov. Вы можете думать о блоке moov как о своего рода каталоге файлов MP4.

Когда вы воспроизводите видео, программа ищет файл MP4, находит поле moov, а затем использует его, чтобы найти начало видео и аудио, чтобы начать воспроизведение.

Блоки могут быть в любом порядке, поэтому программа сначала не знает, где находится блок moov. Если он воспроизводится локально, проблем нет, потому что у вас уже есть весь видеофайл, но если вы смотрите его онлайн, то есть потоковое видео HTML5, возникает проблема.

Чтение процесса MOOV

Браузер напрямую инициирует HTTP-запрос MP4, читает начало тела ответа и, если в начале найден moov, продолжает чтение мдат. Если вы обнаружите, что начала нет, сначала прочитайте mdat, немедленно сбросьте соединение, сэкономьте трафик, прочитайте данные в конце файла через заголовок Range, потому что предыдущий HTTP-запрос уже получил Content-Length, узнайте весь размер файла MP4, через заголовок Range. Также возможно прочитать часть данных в конце файла.

Другими словами, причина, по которой видео MP4 события на Tmall, указанное выше, инициирует 3 запроса, заключается в том, что поле moov видео помещается в конец файла. Я нарисовал схему для наглядности:

3次请求处理

3. Как избежать 3 запросов на видео

Очень просто, просто используйте инструмент, чтобы переместить блок Moov в начало видео.

Конкретно:

1. Handbrake

Handbrake logo

HandBrake — лучший выбор для инструментов оптимизации видео Web MP4, включая функцию веб-запроса предварительной оптимизации moov box.

HandBrake web优化示意

Поддерживаются HandBrake MAC, Windows, бесплатный и с открытым исходным кодом, дополнительные возможности, такие как сжатие видео и т. д., вы можете обратиться к этой статье: "HandBrake с помощью графического учебника".

2. команда ffmpeg

следующим образом:

ffmpeg -i 你的视频.mp4 -movflags faststart -acodec copy -vcodec copy 输出的视频.mp4

Адрес официального сайта FFmpeg:ffmpeg.org/.

FFmpeg — это набор компьютерных программ с открытым исходным кодом, которые можно использовать для записи, преобразования цифрового аудио и видео и преобразования их в потоки. Под лицензией LGPL или GPL. Он предоставляет комплексное решение для записи, преобразования и потоковой передачи аудио и видео.

Одним словом, он очень силен, и каждый, кому это интересно, может изучить его самостоятельно.

В-четвертых, после оптимизации

После оптимизации вы можете видеть, что информация Moov добавлена ​​в начале:

Moov信息前置示意

На данный момент есть только один видеозапрос, и слова голословны, просто посмотрите на улики и ткните изо всех сил.это демочтобы начать видео активность.

Как видите, при загрузке будет только один запрос:

一次请求示意

Поторопитесь и посмотрите, есть ли у видео в вашем проекте проблема с 3 запросами!

Для получения дополнительной информации, пожалуйста, обратите внимание на публичный аккаунт фронтенд-команды China Literature Group: