Это перевод статьи Optimizing MP4 Video for Fast Streaming автора BILLY HOFFMAN.
С уходом Flash и ростом доли мобильных устройств все большую популярность приобретает html5 видео. В одной из статей мы даже рассказывали о том, как повысить скорость вашего сайта заменив GIF анимации html5 видеороликами. Тем не менее, видео файлы также требуют некоторых оптимизаций, которые необходимо выполнить для того, чтоб эффективно использовать их на сайте. Наиболее важным шагом оптимизации можно назвать оптимизацию видео контента к потоковому воспроизведению на сайте. Без такой оптимизации воспроизведение видео может быть задержано на сотни миллисекунд и мегабайты трафика ваших пользователей будут потрачены впустую из-за безуспешных попыток воспроизвести ролик. В этой статье я расскажу вам, как оптимизировать ваши видео файлы для потокового воспроиведения видео.
Как работает потоковое воспроизведение MP4
Как говорилось в одной из статей HTML5 видео стало кроссбраузерной альтернативой воспроизведению видео через Flash. В 2016 году H.264 кодированое видео в контейнере MP4 (которое дальше будем называть MP4 видео) превратилось в стандартный формат для онлайн видео на сайтах. Потому, когда мы говорим об оптимизации HTML5 видео, то имеем ввиду то, как оптимизировать MP4 видео для быстрого воспроизведения. И дальше мы будем говорить о структуре mp4 файла и том, как работает потоковое видео.
MP4 файлы состоят из блоков данных, именуемых атомами. Есть атомы, которые содержат в себе данные о субтитрах и разделах, есть атомы, содержащие непосредстенно видео и аудио данные. Мета-данные о том, где искать аудио и видео атомы, как воспроизводить видео, размере кадров, битрейте, это все хранится в специальном атоме под названием Moov. Вы можете представить Moov, как своего рода оглавление файла MP4.
При воспроизведении видео плеер (программа для воспроизведения видео) сначала просматривает MP4 файл, находит в нем атом Moov, а затем использует его для того, чтоб найти начало аудио и видео данных и начать воспроизводить их. К сожалению, атомы могут присутствовать в файле в производльном порядке, потому плеер не может заранее знать где находится Moov. Если у вас уже есть все содержимое видеофайла, то плеер может отыскать его. Однако, есть и другой вариант, когда у вас нет всего файла, например, потоковое HTML5 видео. Вся суть потокового видео состоит в том, что вы можете начать его просмотр без необходимости ожидания его полной загрузки.
Для воспроизведения потокового видео ваш браузер запрашивает файл и по мере его получения ищет в нем атом Moov. Если атом Moov не найден в начале файла браузер должен либо загрузить весь файл, чтоб найти этот атом, или начать загружать небольшие части видео-файла, начиная с самого конца файла, в попытке найти Moov.
Такие поиски Moov атома приводят к временным задержкам и расходованию трафика. К сожалению, видео не может быть воспроизведено до тех пор, пока не будет найдет этот самый Moov атом. На скриншоте ниже мы можем видеть запросы браузера к серверу в попытках воспроизвести неоптимизированный MP4 файл как HTML5 видео:
Вы можете видеть, как браузер делает три запроса прежде чем он может начать воспроиводить видео. В первом запросе браузер загружет первые 552Кб видео при помощи HTTP range request. Мы можем судить об этом по коду ответа 206 Partial Content и просматривая заголовки запросов. Однако, атома Moov еще не существует, так что браузер не может начать воспроизведение видео. Затем, браузер запрашивает 21Кб с конца файла используя еще один запрос диапазона данных. В результате полученных данных он находит Moov атом, который сообщает ему каким образом запускать воспроизведение видео и аудио потоков. И наконец, браузер делает третий и последний запрос, для того, чтобы получить содержимое аудио и видео потока. После чего браузер может начать воспроизведение данных. Этот процесс требует около половины мегабайта полосы пропускания канала и откладывает воспроизведение на 210мс. И все только потому, что браузер не может найти атом Moov.
Это может усугубиться, если вы не настроили на своем сервере поддержку запросов HTTP range request. Браузер не сможет загружать файл частями и будет вынужден скачать весь файл для того чтоб найти в нем атом Moov. Это еще одна весомая причина оптимизировать свой сайт для поддержки потокового видео.
Идеальный способ подготовить MP4 файл для потокового воспроизведения HTML5 видео это организовать MP4 файл таким образом, чтоб атом Moov находился в самом его начале. Таким образом, браузер может избежать загрузки всего файла или попыток скачать другие части файла в поисках Moov. Скриншот с запросами для воспроизведения оптимизированного потокового видео представлен ниже:
Видео с Moov атомом в начале файла будет загружаться и проигрываться быстрее, в результате повышая удобство пользования вашим сайтом.
Оптимизация MP4 для быстрой потоковой передачи
Мы уже увидели, что для оптимизации HTML5 видео необходимо реогранизовать атомы MP4 файла таким образом, чтоб атом Moov находился в самом начале. Как же нам это сделать? Большинство программ кодирования видео имеют опцию “оптимизировать для web” или “оптимизировать для потокового воспроизведения”, которые как раз и сделают за нас эту самую оптимизацию. Вы должны следить за настройками кодирования видео, чтоб быть уверенными в том, что получите оптимизированный файл. Например, на рисунке ниже мы видим open source видео кодер Handbrake, который имеет опцию “Web Optimized” в своих настройках. Эта настройка и перемещает атом Moov в начало файла.
Это решает проблему если вы создаете MP4 файл из оригинального исходного видео, но, что, если у вас уже есть mp4 файл?
Вы можете преобразовывать сущестующие видео файлы, чтоб оптимизировать его для потокового воспроизведения. Видеокодер с открытым исходным кодом FFMpeg может реогранизовать сруктуру существующего MP4 файла и размещать Moov в начале файла. В отличие от полного перекодирования файла такой процесс требует меньше ресурсов процессора, так как трансформация файла является более простой операцией. Ниже приведен пример команды для оптимизации файла input.mp4 при помощи утилиты FFMpeg. В результате мы получаем оптимизированный файл output.mp4:
1 | ffmpeg -i input.mp4 -movflags faststart -acodec copy -vcodec copy output.mp4 |
Параметр -movflags faststart как раз и сообщает видеокодеру FFMpeg о том, что необходимо изменить порядок атомов таким образом, чтоб атом Moov оказался в самом начале файла. Также мы использовали опцию copy для того, чтоб FFMpeg скопировал аудио и видео данные, вместо их повторного перекодирования.
Для клиентов сервиса Rigor мы добавили еще один пункт в наш чеклист анализа производительности Zoompf, цель которого обнаружение неоптимизированных для воспроизведения HTML5 файлов MP4 видео. Если просто хотите проверить ваш сайт, вы можете воспользоваться нашим бесплатным сервисом.
Выводы
Если вы конвертируете ваши анимированные GIF в MP4 видео или уже имеете множество MP4 видео роликов, вы можете сделать загрузку и воспроизведение этих роликов быстрее, если проведете оптимизаицю структуры файлов. Изменив порядок атомов и переместив Moov в самое начало файла позволяет браузеу избежать отправки дополнительных HTTP запросов для поиска Moov. Это позволит брузеру мгновенно начать воспроизведение потокового видео. Вы можете настроить эту опцию при первоначальном декодировании файла. Если у вас уже есть существующий файл, то вы можете использовать программу FFMpeg для того, чтоб изенить порядок следования атомов в фйле MP4 без модификации его содержимого.