Что касается воспроизведения веб-видео

HTML
Что касается воспроизведения веб-видео

Источник изображения:ultimatewebsitedesign.co.uk

Автор этой статьи:hsy

задний план

Для воспроизведения онлайн-видео его можно разделить на видео по запросу (VOD) и прямую трансляцию (Live Streaming) в зависимости от характера видеоконтента в реальном времени. В настоящее время, когда требуется воспроизведение видео в веб-среде, обычно можно использовать тег видео, который содержит все аспекты воспроизведения видео в браузере.

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

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

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

Параметры видеофайла

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

производство видео

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

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

Частота кадров

Принцип воспроизведения видео аналогичен быстрому переключению слайд-шоу.

Каждый раз, когда отображаемое изображение переключается, оно называется кадром. Частота кадров представляет собой количество кадров, переключаемых в секунду, поэтому ее единицей измерения является FPS (кадров в секунду). Частота кадров не имеет прямого отношения к четкости видео, но также является важным фактором, влияющим на сенсорное восприятие.

Люди имеют диапазон восприятия частоты переключения экрана, обычно около 60 кадров в секунду является более подходящим диапазоном. Но это не абсолютно. Когда вам нужно записать кадр, который меняется между моментами, подготовьте достаточно кадров, чтобы зафиксировать тонкие изменения; при съемке с эффектом медленного продвижения кадра частота кадров не должна быть слишком высокой, разрешение будет воспроизводиться выше роль.

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

разрешение

Во время воспроизведения видео каждый кадр, отображаемый на экране, содержит одинаковое количество пикселей. Пиксель — это наименьшая единица светоизлучающих элементов на устройстве отображения, и окончательное изображение отображается путем объединения нескольких пикселей.

Разрешение представляет собой количество пикселей, содержащихся в каждом кадре видео, в水平方向的像素数量 × 垂直方向的像素数量представлять, например720p = 1280 × 720является относительно распространенным разрешением.

здесьpОбозначает прогрессивное сканирование (Progressive Scanning), что соответствуетiУказывает на чересстрочную развертку (чересстрочное сканирование), см. рисунок ниже.

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

Когда разрешение видео ниже разрешения устройства отображения, а количество пикселей на устройстве превышает количество пикселей, необходимых для отображения видео, тогда для отображения будут использоваться различные алгоритмы твининга (алгоритм интерполяции). Эти неиспользуемые пиксели генерируют цвет. значение информации, чтобы полностью осветить все пиксели устройства отображения, что в противном случае привело бы к появлению черных точек на экране.

Что касается алгоритма твининга, вот короткое видео для справки.Resizing Images.

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

Поэтому выбор разрешения видео необходимо сочетать с разрешением устройства отображения.

Битрейт

Единицей битрейта являетсяbit/s, указывающее количество битов, содержащихся в длине видео в секунду.

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

На размер битрейта влияет объем видеофайла в единицу времени, а факторами, влияющими на объем видеофайла, являются: исходный видеоконтент, разрешение, выбранное для транскодирования, частота кадров и схема кодирования. используется для транскодирования (кодек).

Так что битрейт не является параметром, напрямую связанным с разрешением видео.

Если используется автономное воспроизведение, битрейт не будет важным параметром. И если вы используете онлайн-способ просмотра видео по запросу, битрейт видео становится важным показателем, который необходимо учитывать.

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

Формат видео

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

  1. метаданные видео
  2. Основные видеоданные

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

Чтобы объединить метаданные видео и основные данные для сохранения, необходимо указать формат контейнера. Распространенные форматы контейнеров включают MP4, AVI и т. д. Для видео в качестве формата контейнера обычно выбирается MP4, поскольку он широко поддерживается различными системами и устройствами.

Для основных видеоданных требуется указать еще один параметр, который обычно называют схемой кодирования. Различные схемы кодирования позволяют найти компромисс между размером видеофайла и окончательным эффектом воспроизведения.

Загрузка сегмента видеоданных

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

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

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

Демонстрация на примере HLS

Этот пример будет разработан с протоколом HLS. Протокол HLS является лишь одним из многих протоколов загрузки сегментов видеоданных, и некоторые подробности о нем будут представлены в следующем разделе. Сначала запустите пример, чтобы получить конкретное представление о загрузке сегмента данных.

Запустите пример с помощью следующей команды, прежде чем убедиться, что вы установили ее на свой компьютер.ffmpegИ плавность сети:

wget -qO- https://gist.githubusercontent.com/hsiaosiyuan0/412a4ca26d00ff7c45318227e7599c3d/raw/de5e3c467800d1f2315e74ba71f0eb6c6760a7a0/hls.sh | bash

Эта команда загружает и выполняетсценарий. Этот скрипт сделает следующее:

  1. Скачать видео из Интернета
  2. Сжать и сегментировать видео с помощью ffmpeg
  3. Создайте файлы m3u8 для описания и индексации этих файлов сегментов.
  4. Создайте html-файл для демонстрации, в котором функция видео по запросу будет выполняться с использованием тега видео.
  5. пройти черезsvrxзапустить локальный веб-сервер

Если вы не можете запустить этот скрипт, вы также можете передать этовидеоилиgifчтобы получить демонстрационный контент.

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

Протокол HLS (HTTP Live Streaming)

HLS — это протокол воспроизведения потокового мультимедиа, запущенный Apple для удовлетворения потребностей онлайн по запросу. Поскольку этот протокол основан на протоколе HTTP, он может в полной мере использовать существующее техническое содержание и меры по оптимизации для протокола HTTP.

Из этого рисунка видно, что после того, как видеозапись завершена, ее необходимо загрузить на веб-сервер для сегментации и индексации, а потребление в этот период вызовет определенную задержку информации, получаемой пользователем. Таким образом, несмотря на то, что это Live Streaming, между ним и Realtime все же есть некоторый разрыв, Live Streaming, упомянутый в начале статьи, относится к потоку данных в реальном времени.

Apple не только сформулировала детали протокола HLS, но и предоставила набор решений для реализации протокола, которые можно получить наAbout Apple's HTTP Live Streaming Toolsдля ознакомления с этими инструментами. Поскольку сам протокол имеет открытый исходный код, по-прежнему можно использовать ffmpeg, аналогичный примеру в предыдущем разделе, для выполнения той же работы.

Ключ к протоколу HLS, а также к сегментированной загрузке данных состоит из двух частей:

  1. Какая стратегия используется для сегментации данных
  2. Описывать и индексировать сегментированные результаты

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

В протоколе HLS сегментированное содержимое описывается и индексируется через файлы m3u8. Как и в приведенном выше примере, помимо сегментации видео, производители видео также должны создавать файлы m3u8, описывающие эти сегменты, а потребители видео, получив файлы m3u8, могут гибко выбирать сегменты. форма.

Далее мы узнаем больше о содержании сегментации, узнав больше о деталях m3u8.

файл m3u8

m3uЭто формат файла, в котором сохраняется информация, необходимая для воспроизведения аудио- и видеофайлов, а m3u8 является аббревиатурой этого формата, если он закодирован с использованием UTF8.

Файл m3u8 играет роль списка воспроизведения в протоколе HLS, аналогично «списку воспроизведения» в программном обеспечении музыкального проигрывателя, но целью списка воспроизведения является пользователь, а m3u8 выбирает игрок.

Поскольку они закодированы в UTF8, их можно открыть с помощью обычного текстового редактора. Следующее изображение представляет собой содержимое файла m3u8, созданного в приведенном выше примере:

Полное описание формата m3u8 см.rfc8216 - HTTP Live Streaming. Соответствующее содержание соглашения, связанного на скриншоте, является:

  • В файле есть только три типа данных на строку: URI, пустая строка и#стартовая строка, пустые строки будут игнорироваться интерпретатором вместе с комментариями

  • оговаривается в договоре на#Строка в начале может представлять собой комментарий или тег (Tag), за которым следует#СодержаниеEXT(с учетом регистра) означает, что строка является меткой, иначе она будет расценена как комментарий и будет проигнорирована интерпретатором

  • Итак, первая строка#EXTM3UПредставляет метку. Эта метка используется для обозначения того, что текущий файл является расширением формата m3u.Протокол предусматривает, что метка должна стоять в первой строке в начале файла.

  • оставаясь с#EXTСтроки в начале — это все теги, которые разделены строками URI и используются для оформления ресурса URI под ними.

  • Некоторые теги содержат значения.Значения представлены в виде списков атрибутов.Атрибуты в списке атрибутов разделены запятыми (,).Атрибуты состоят из имени и его значения в видеAttributeName=AttributeValue. следовательно#EXT-X-STREAM-INFЗначением тега является список атрибутов

  • Списки воспроизведения делятся на две категории. Среди них те, которые содержат только содержимое URI на похожих снимках экрана, называются основными списками воспроизведения.Все URI в основных списках воспроизведения представляют другой тип, списки воспроизведения мультимедиа. Информация о сегменте ресурса специально записывается в список воспроизведения мультимедиа:

  • #EXT-X-STREAM-INFРоль тега заключается в описании информации о переменном потоке (Variant Stream). Большинство значений атрибутов были представлены в первом разделе.BANDWIDTHпредставляет пиковую скорость передачи отдельных сегментов в этом потоке, еще один распространенныйAVERAGE-BANDWIDTHХотя он и не присутствует, он представляет собой среднее значение битрейта, объединяющего отдельные сегменты. Клиент будет выбирать данные следующего сегмента под соответствующим потоком на основе значений этих двух атрибутов и его текущей пропускной способности.

Таким образом, в приведенном выше примере, указав основной список воспроизведения с тремя различными разрешениями для видео, браузер будет автоматически переключаться между тремя потоками данных в соответствии с его текущей пропускной способностью. В настоящее время, если нет сцены, требующей автоматического переключения разрешения, вы также можете напрямую указать Media Playlist в теге видео, чтобы завершить воспроизведение потока с определенным разрешением.

Динамическая адаптивная потоковая передача через HTTP (DASH)

Поскольку протокол HLS запущен Apple, он может широко поддерживаться на устройствах Apple.В браузере Safari, работающем на этих устройствах, тег видео может работать напрямую как клиент протокола HLS.

В тех браузерных средах, которые не поддерживают HLS, обычно можно использовать другой аналогичный протокол, который непосредственноMPEGЕго разрабатывает и поддерживает организация под названием MPEG-DASH.MPEG — международная организация, специализирующаяся на протоколах, связанных с воспроизведением видео, поэтому протокол DASH более обширен, чем HLS.

Как еще один протокол воспроизведения потокового мультимедиа, основанный на протоколе HTTP, DASH имеет схожие технические детали с HLS. Например, он предоставляет функциональные возможности, аналогичные файлам m3u8, через файлы описания презентации мультимедиа (mpd). На следующем изображении показан снимок экрана с содержимым файла mpd:

Протокол DASH напрямую не поддерживается основными производителями браузеров и обычно требует дополнительных подключаемых модулей на стороне клиента, таких как MSE, которые должны быть введены после полной загрузки сегмента данных. В случае мобильного воспроизведения, вообще говоря, протокол HLS можно использовать для адаптации к большему количеству устройств, поскольку устройства, поддерживающие воспроизведение DASH, обычно могут поддерживать протокол HLS через подключаемые модули HLS, но не наоборот.

Media Source Extension

MSE, Media Source Extension — это интерфейс для загрузки аудио- и видеоданных, сформулированный в веб-стандартах. Веб-приложения могут реализовывать свои собственные решения по загрузке аудио- и видеоданных через этот интерфейс. Поскольку WebRTC не является протоколом по запросу, MSE стал единственным интерфейсом загрузки аудио- и видеоданных в сценарии по запросу.

Упомянутые выше протоколы HLS и DASH в тех браузерах, которые изначально их не поддерживают, но поддерживают MSE, можно поддерживать путем реализации соответствующих плагинов на основе MSE.

На рисунке ниже представлен обзор текущей совместимости MSE, см. такжеCaniuse - MediaSource:

Картина относится к iPados, которая в настоящее время не поддерживается в iOS. Вообще говоря, поддержка на устройств Android относительно высока, поэтому, как упомянуто выше, протокол HLS может быть адаптирован к большему количеству устройств, вначале поддерживаемых на устройствах Apple, и поддерживается плагинами HLS MSE на Android.

Целью MSE является разделение воспроизведения аудио и видео и загрузки данных. Веб-разработчикам не нужно вмешиваться или вмешиваться в существующее поведение аудио- и видеодекодирования и управления воспроизведением.MediaSourceПросто передайте данные, необходимые для воспроизведения, элементам аудио и видео. На следующем рисунке показана взаимосвязь между ними:

Аудио- и видеоэлементы отвечают только за декодирование и воспроизведение аудио- и видеоданных, применение пользовательских стратегий загрузки аудио- и видеоданных и загрузку данных, а также взаимодействие друг с другом через MediaSource.

AbortController

Целью использования MSE является настройка стратегии загрузки аудио- и видеоданных.Важная функция стратегии загрузки данных заключается в том, что для экономии пропускной способности необходимо прекратить текущую загрузку заведомо бесполезных запросов. а такжеFetch APIФункцию прекращения загрузки данных внутри нужно совместитьAbortControllerиспользовать.

Ниже приведен обзор текущей совместимости AbortController, см. такжеCaniuse - AbortController:

IE вообще не поддерживается без необходимости, поэтому независимо от IE он имеет одинаковую степень совместимости с MSE и может использоваться в комбинации.

Если AbortController недоступенXMLHttpRequest.abort()другое решение с более высокой совместимостью. Однако AbortController может управлять ресурсами путем «группировки», которая по умолчанию недоступна в XMLHttpRequest.

Оптимизация скорости загрузки видео

Для оптимизации скорости загрузки видео обычно есть два направления, а именно «определение динамического переключения» и «предварительная загрузка видеоконтента», Далее мы кратко представим эти два технических момента.

Динамическое переключение резкости

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

При использовании протокола HLS сервер заранее сжимает видео в сегменты и предоставляет файлы m3u8, после того как клиент получает файлы m3u8, он динамически переключает загрузку сегментов в соответствии с текущей пропускной способностью.

Например, для одного и того же видео готовятся три потока разной четкости, причем видеопотоки делятся на три сегмента:

720P --seg11--  --seg12-- --seg13--
480P --seg21--  --seg22-- --seg23--
360P --seg31--  --seg32-- --seg33--

В простейшем алгоритме клиент может сначала выбрать поток промежуточного разрешения 480P для загрузки первого видео (seg21).По времени загрузки и размеру самого seg21 можно получить текущую скорость загрузки.Если она ниже 480P, может воспроизводиться в обычном режиме.Требуемая пропускная способность, например 1500kps, следующее видео будет выбрано из потока, удовлетворяющего текущей пропускной способности, в приведенном выше примере это загрузка 360P seg32.

Конечно, поскольку пропускная способность изменяется динамически и является оценочной величиной, переключаться только через один сегмент в примере нецелесообразно, и это только для демонстрации. Более практичный алгоритм см. в протоколе DASH.Adaptive Bit Rate Logic.

Предварительная загрузка видеоконтента

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

Алгоритм предзагрузки видеоконтента разворачивается на основе двух пунктов:

  1. Прогнозирование предстоящего поведения пользователя по запросу
  2. Предварительная загрузка без блокировки текущего хода воспроизведения

Для первого пункта необходимо внести определенные коррективы в соответствии с потребностями бизнеса.

Для второго пункта простейший алгоритм может установить порог безопасности буфера для воспроизводимого видео, например 5s.Если содержимое 5s в буфере воспроизводимого в данный момент видео не воспроизведено, можно попробовать Preload следующего видео.

Таким образом, в целом предварительная загрузка зависит от технической осуществимости, и конкретные стратегии должны быть сформулированы в соответствии с фактическими потребностями. В сценариях, не поддерживающих MSE, можно использовать тег видео.preloadатрибут, чтобы включить предварительную загрузку, но время предварительной загрузки и объем предварительно загруженных данных находятся в управляемом состоянии.

МСЭ и МП4

Выше приведено краткое введение в протоколы HLS и DASH и MSE, а также краткое введение в оптимизацию скорости загрузки видео. В случае использования HLS и DASH существующие реализации с открытым исходным кодом могут быть напрямую выбраны для получения поддержки воспроизведения на стороне клиента, напримерhls.jsа такжеdash.js.

Есть обязательное условие для использования протоколов HLS и DASH, то есть видеофайлы должны быть предварительно сегментированы в соответствии с положениями протокола и реальными потребностями бизнеса, иными словами, требуется сотрудничество сервера.

Следующее описано поддержку в отсутствие HLS и Dash, используя диапазон HTTP-диапазона и формата контейнера MP4 Plus MSE Video Content для завершения возможности загрузки сегмента. Эта форма требует небольшого дополнительного спаривания концом службы, или путем внедрения возможности дальнейшего понимания протокола MSE и формата контейнера MP4.

HTTP Ranges

Для аудио- и видеофайлов в сценарии по запросу распространение контента обычно ускоряется через сеть CDN. Веб-серверы в сети CDN обычно поддерживаютHTTP Range RequestФункция. С помощью этой функции клиент может получить определенную часть файла по запросу, когда содержимое файла известно заранее.

Поэтому возможность загрузки куска видеоданных по сегментам предоставляется сетью CDN по умолчанию, а остальное — как дать клиенту возможность прогнозировать содержание видео. В протоколе HLS или DASH это реализуется индексным файлом m3u8 или mpd.Загружая этот индексный файл, клиент предсказывает информацию сегментации всего видео и их относительные смещения, поэтому последующая загрузка успешно завершается.Работа.

Функции файла m3u8 в основном могут быть предоставлены непосредственно форматом контейнера MP4. Это связано с тем, что поле с именем moov определено в формате контейнера MP4, который записывает информацию, аналогичную сегментам. Подробности формата контейнера MP4 будут описаны в следующий раздел.

В зависимости от программного обеспечения, используемого для создания видео, moov иногда может находиться в конце всего видеофайла, поэтому, чтобы клиентское программное обеспечение для воспроизведения могло быть загружено в поле moov как можно скорее, поставщики услуг CDN предложит провайдеру видео сначала переместить информацию moov видео вперед.Распространить позже. Например, на официальном сайте NOS есть аналогичные предложения, см.Flash-плеер по запросу.

Видно, что в этой схеме важной частью стало понимание формата файла MP4, и далее будет кратко представлен формат файла MP4.

Формат контейнера MP4

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

Формат MP4 примерно имеет следующие характеристики:

  • Файлы MP4 закодированы в двоичном формате, и в формулировке формата используется объектно-ориентированный (Object Oriented) дизайн.
  • Видеоинформация организована по категориям и обобщена в поле коробки (класс Box), поэтому весь файл MP4 состоит из коробок (в коробке), каждая коробка является экземпляром соответствующего типа коробки
  • Перед типом поля есть вложенная форма, чтобы указать отношения сдерживания между ними.

в состоянии пройтиMP4Box.jsПредоставленный онлайн-инструмент, указанный в этом абзацедемонстрационное видео, чтобы просмотреть информацию о структуре файла MP4:

В дополнение к онлайн-инструментам также можноAtomicParsleyЭта программа командной строки быстро получает внутреннюю блочную структуру файла MP4.

Просто используйте следующую команду:

AtomicParsley 1.mp4 -T

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

Верхнее поле на изображении выше включаетftyp,free,mdat,moov.moovСодержит другие блоки, отображаемые как дочерние узлы.mdatОсновная часть аудио- и видеоданных хранится в боксе.moovПоля содержат метаинформацию, описывающую эти данные.

Многочисленные типы коробок в MP4 и их принадлежность показаны на рисунке ниже, см. такжеISO/IEC 14496-12:

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

Блок trak в основном записывает информацию о кодировании аудио и видео, а также индекс к блокам аудио и видео данных.Основная часть блока данных хранится в блоке mdat.

Таким образом, если клиент получает информацию о движении видео, он может по запросу загружать аудио- и видеоданные в mdat.

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

Данные коробки можно разделить на две части: голова и тело.Хотя эта классификация не оговорена в договоре, это удобный способ для понимания. Обратите внимание, что в головеsizedata, который представляет размер данных, занимаемый всем полем. Такой дизайн позволяет клиенту быстро переключаться между блоками и выбирать только интересующие его части для отложенного анализа.

Если вы думаете о файле как о большой коробке, тоftyp,moovЭти блоки верхнего уровня являются его дочерними элементами. Порядок блоков в их родительском узле не обязательно должен быть фиксированным. НапримерftypВ стандарте требуется только появиться как можно раньше, не обязательно в стартовой позиции.

Именно потому, что порядок блоков в контейнере не фиксирован, клиентское программное обеспечение может получить блок moov только путем непрерывного запроса блока верхнего уровня.Этот процесс можно продемонстрировать, запустив небольшую программу. Вот демо-кодисходный код, вы можете запустить демонстрационную программу с помощью следующей команды:

deno --allow-net https://gist.githubusercontent.com/hsiaosiyuan0/a7b215b53b48b9e66d2e0bad9eb8d1dd/raw/6bf88be0c81d55f620b1d94d51f5a56b55691007/locate-moov.ts

Если вам неудобно запускать этот скрипт, вы также можете напрямую просмотретьПрезентация результатов.

Этот сценарий использует характеристики структуры данных ящика для запроса первых 8 байт содержимого из начала файла, который также является головной частью упомянутого выше ящика, который будет содержать размер ящика и тип ящика. , каждый из 4 байтов. Последующие запросы будут продолжать накапливать адреса смещения для запроса следующего блока, но каждый раз запрашивать только информацию заголовка блока, после нескольких смещений будет получена информация блока moov.

Из этого примера мы также можем видеть важность добавления информации о moov в начале, что эффективно уменьшит количество запросов на смещение для поиска блока moov.

MSE-FORMAT-ISOBMFF

До сих пор были представлены форматы контейнеров MSE, HTTP Ranges и MP4. Благодаря пониманию формата контейнера MP4 обнаруживается, что данные внутри него фактически хранятся в блоках, а информация о блоках хранится в блоке moov.

Затем кажется, что фрагментированные данные загружаются в соответствии с информацией о фрагментировании окна moov, а затем видео может быть воспроизведено с помощью Media Source, Например, следующий код выдержка изGoogle Developer - Media Source Extensions, самая важная часть кодаappendBufferПризыв к:

Код приложения загружает сегментированные данные, а затем вызовыappendBufferДанные передаются в аудио- и видеоплеер с помощью Media Source.

На самом деле все немного сложнее, потому что формат контейнера MP4 является лишь одним из многих форматов контейнеров, и в качестве общего интерфейса данных MSE будет соединять данные в различных форматах контейнеров, поэтому он сформулировал общий формат сегмента данных. Этот сегментированный формат называетсяMSE-FORMAT-ISOBMFF, который основан наISO base media file format, ISOBMFFМодифицированная версия .

Обычно называемый MP4, то есть MPEG-4 Part 14, его связь с ISOBMFF такова:

Видно, что MP4 является расширением формата ISOBMFF и будет содержать более разнообразную информацию. MSE-FORMAT-ISOBMFF представляет концепцию сегментации на основе ISOBMFF.

Сегментированная форма загрузки данных в MSE-FORMAT-ISOBMFF выглядит следующим образом:

На рисунке выше показаны два основных типа сегментации в MSE-FORMAT-ISOBMFF:initialization segmentа такжеmedia segment. Эти сегменты, в свою очередь, состоят из ящиков.

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

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

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

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

Чтобы быстро получить локально запускаемую демонстрацию, вотдемонстрационный проект. В демонстрационном проекте данные загружаются через пользовательский Downloader, загруженные данные передаются в mp4box для повторной сборки, после завершения сборки они добавляются в Media Source и передаются в плеер. Если вы хотите выполнить функцию предварительной загрузки, вам нужно лишь немного изменить загрузчик в соответствии с потребностями бизнеса.

конец

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

Цитировать

Эта статья была опубликована сКоманда внешнего интерфейса NetEase Cloud Music, Любое несанкционированное воспроизведение статьи запрещено. Мы всегда нанимаем, если вы готовы сменить работу и вам нравится облачная музыка, тоПрисоединяйтесь к нам!

Категории