Автор этой статьи: Чжан Синьсюй, ногами криво
Исходное заявление: Эта статья подготовлена членами команды интерфейса чтения YFE, пожалуйста, уважайте оригинальность, пожалуйста, свяжитесь с общедоступной учетной записью (id: yuewen_YFE) для авторизации и укажите автора, источник и ссылку.
Эта статья написана фронтенд-командой по чтению текста.удар кривоСовместное использование, я только что превратился в текстовую версию, добро пожаловать в этот маленький партнер "заклинание слова Jing JavaScript".
1. 3 запроса на загрузку видео
Все здесь, пожалуйста, откройте браузер, откройте новую вкладку, откройте инструменты разработчика, переключитесь на сетевую панель → Опция «Медиа», а затем — скопируйте следующий адрес (резервный адрес действия на Tmall) в адресную строку и нажмите Ввод:ali-tmhly.h5.neone.com.cn/. На этом этапе вы увидите mp4 с именем video2 с 3 запросами, отправленными туда и обратно:
Это плохо! Только 1 запрос должен быть оптимальным!
Что еще хуже, 3 запроса на видео такого типа довольно распространены!
Что еще хуже, многие разработчики интерфейса не знают об этой проблеме.
2. Причины 3 запросов
Видеофайл MP4 — это не только видеоконтент, но и много другой информации, такой как размер, продолжительность, субтитры, информация об авторских правах и т. д.
Эта информация помещается в блок, другими словами, файл MP4 состоит из множества блоков для хранения мультимедийной информации.
Среди них есть поле, связанное с количеством запросов, которое называется 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 запросов на видео
Очень просто, просто используйте инструмент, чтобы переместить блок Moov в начало видео.
Конкретно:
1. Handbrake
HandBrake — лучший выбор для инструментов оптимизации видео Web MP4, включая функцию веб-запроса предварительной оптимизации moov box.
Поддерживаются HandBrake MAC, Windows, бесплатный и с открытым исходным кодом, дополнительные возможности, такие как сжатие видео и т. д., вы можете обратиться к этой статье: "HandBrake с помощью графического учебника".
2. команда ffmpeg
следующим образом:
ffmpeg -i 你的视频.mp4 -movflags faststart -acodec copy -vcodec copy 输出的视频.mp4
Адрес официального сайта FFmpeg:ffmpeg.org/.
FFmpeg — это набор компьютерных программ с открытым исходным кодом, которые можно использовать для записи, преобразования цифрового аудио и видео и преобразования их в потоки. Под лицензией LGPL или GPL. Он предоставляет комплексное решение для записи, преобразования и потоковой передачи аудио и видео.
Одним словом, он очень силен, и каждый, кому это интересно, может изучить его самостоятельно.
В-четвертых, после оптимизации
После оптимизации вы можете видеть, что информация Moov добавлена в начале:
На данный момент есть только один видеозапрос, и слова голословны, просто посмотрите на улики и ткните изо всех сил.это демочтобы начать видео активность.
Как видите, при загрузке будет только один запрос:
Поторопитесь и посмотрите, есть ли у видео в вашем проекте проблема с 3 запросами!