Insight video Superpower Series - Fun mp4

Использование технологий для увеличения вероятности хороших событий

Technologically, for greater probability to be happy.

предисловие

В области видеоконтейнера по запросу mp4 является наиболее распространенным и наиболее совместимым видеоконтейнером, но mp4 также имеет свои ограничения, такие как переключение общего разрешения, мы не можем добиться плавного переключения, такого как youtube. Мы видим разницу между сетевым запросом обычного воспроизведения mp4 и сетевым запросом воспроизведения видео на YouTube.

Рисунок 1.1. Обычный процесс запроса загрузки MP4

Рисунок 1.2 Процесс запроса на загрузку видео с Youtube

Из этих двух рисунков нетрудно увидеть, что по умолчанию mp4 использует один http-запрос для всех видеоданных, а Youtube запрашивает их кратно. Конечно, это описание очень непрофессиональное, но оно действительно имиджевое. Причина этой разницы в том, что видео не поддерживает потоковые видеоданные, Youtube использует контейнер потокового видео webm, а mp4 не является потоковым. Как понятно объяснить потоковые видеоданные?С профессиональной точки зрения это сложно объяснить в нескольких словах, но в переводе с просторечия, потоковые видеоданные поддерживают сегментированное независимое воспроизведение, непотоковые - нет. Другими словами, для 10-мегапиксельного видеофайла потоковое видео может запросить данные 0–1 М ​​для отдельного воспроизведения, а непотоковое видео — нет.

Различия в форматах видео мы описали выше. Далее хотим сказать, что загрузкой видео на первой картинке управляет браузер. Настроив адрес видео для атрибута src видео, браузер начнет загрузку после срабатывания воспроизведение. JS не может вмешиваться. Загрузкой видео Youtube управляет JS, вы можете снова посмотреть на тип сетевого запроса на второй картинке: xhr, что достаточно, чтобы доказать это.

После выяснения двух вышеуказанных моментов следует поговорить о переключении четкости. Это требование всем знакомо, но напрямую использовать формат mp4 для плавного переключения разрешения довольно сложно. Сначала объясните концепцию «бесшовного переключения разрешения»: процесс плавного переключения с воспроизведения видео одного разрешения на другое разрешение и обеспечение того, чтобы изображение и звук не останавливались. Зная эту концепцию, вы должны знать, насколько сложно плавно переключать mp4 с видео. С одной стороны видео не поддерживает формат потокового видео, с другой стороны загрузка видео не контролируется JS. Переключение атрибута src видео неизбежно приведет к прерыванию экрана, повторному запросу видеоданных и т.д. Некоторые студенты думают об использовании двух видео в сочетании с z-индексом, чтобы сделать это, но когда вы создаете другое видео для загрузки видео, нет гарантии, что два изображения строго согласованы, даже если исходное изображение на мгновение приостановлено. Синхронизируя его с другим видео с помощью свойства currentTime, коммутатор по-прежнему видит мерцание экрана, что в принципе не соответствует бесшовному переключению Youtube. И это также приведет к увеличению потерь трафика.Вы можете изучить сходства и различия между контейнером mp4 и контейнером webm, а также прочитать статьи, связанные с декодированием видео.

Другой метод — перекодировать все форматы mp4 в форматы потокового видео, такие как hls, webm и т. д. Однако этот, казалось бы, осуществимый метод на самом деле приводит к большим накладным расходам: например, перекодирование большого количества видео потребует больших ресурсов компьютера, удвоит стоимость хранилища и удвоит стоимость CDN. Фактически, мы также исследовали новые технические проблемы в этом контексте, чтобы решить четкость плавного переключения.

Прежде всего, мы изменим процесс воспроизведения видео в формате mp4, больше не будем напрямую использовать src видео для воспроизведения, потому что у нас нет места для работы. video поддерживает не только атрибут src, но и объект Blob, и мы используем последний. Процесс воспроизведения выглядит следующим образом:

Рисунок 1.3 Новый процесс воспроизведения видео в формате mp4

1. Чтобы запросить видеоданные в формате mp4, это можно объединить со службой Video Range для достижения точной загрузки.

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

3. Преобразуйте демультиплексированные видеоданные в формат fmp4 и передайте их в MediaSource.

4. Используйте видео для декодирования и завершения воспроизведения

Тогда процесс переключения четкости выглядит следующим образом:

Рисунок 1.4 Принципиальная схема принципа переключения разрешения видео mp4

Этот процесс выглядит громоздким, но все операции выполняются на стороне браузера, то есть все они реализованы на JS. Таким образом, все проблемы с затратами, упомянутые ранее, не существуют, и может быть достигнуто плавное переключение того же опыта YouTube. Если вы также хотите использовать эту функцию без повторной реализации описанного выше процесса, вы можете использовать следующий код:

Если у вас есть сомнения по поводу этого кода или вы хотите узнать больше о том, как он реализован, вы можете обратиться кGitHub.com/byte dance/small…

Нажмите и удерживайте, чтобы идентифицировать QR-код ⬇️

Экономьте видеотрафик

Студенты, которые используют видео, в основном используют его следующим образом:

1. Используйте атрибут src

2. Используйте исходный тег

Таким образом, видео может быть воспроизведено, но, как мы упоминали ранее, видео используется таким образом. Загрузка видео контролируется браузером. Вы можете увидеть, сколько данных загружает браузер, когда начинается воспроизведение видео:

Рисунок 2.1 Скриншот загрузки видео по умолчанию

Случайно нашел видео.Увидим,что общая длина видео 02:08.Когда оно доходит до 00:05 браузер уже скачал его до 01:30.Если пользователь перестанет смотреть,загруженное видео будет потрачено впустую . . . Конечно, если вы продолжите поиск, это также приведет к увеличению потерь трафика. По нашей предыдущей статистике, в поле короткого видео частота поиска пользователей составляет 80%, поэтому эту часть трафика можно сэкономить. Конкретные принципы заключаются в следующем:

Рисунок 2.2 Принцип загрузки видео плеером

1. Установите размер пакета для каждой загрузки

2. Установить продолжительность предварительной загрузки

3. Откройте очередь загрузки, завершите загрузку первого пакета данных и определите, удовлетворяются ли время буферизации и время предварительной загрузки, а следующий пакет данных не удовлетворяется.

Конкретный код реализации выглядит следующим образом:

Таким образом, в процессе воспроизведения видео всегда будут предварительно загружаться только 10 секунд данных, что обеспечивает сохранение данных.

Узнайте, как создается сверхмощный арбузный игрок:h5player.bytedance.com