Расширения источника мультимедиа HTML5: перенос производственного видео в Интернет

В последнее десятилетие такие плагины, как Flash и Silverlight, позволили широко использовать видео в браузерах, поддерживая такие популярные сервисы, как YouTube и Netflix. Однако за последние несколько лет этот подход сместился в сторону HTML5.

Почти два года назад W3C опубликовал окончательную рекомендацию по спецификации HTML5, которая включала новый набор HTML-элементов и API, особенно для видео. Некоторые из них нацелены на большую семантику веб-страниц, но не вводят новых функций. Другие расширяют возможности Интернета и расширяют возможности разработчиков без необходимости использования подключаемых модулей , таких как Adobe Flash, Microsoft Silverlight или Java.

Дальнейшее чтение на SmashingMag:

• Предоставление собственного опыта работы с веб-технологиями
• Создание полного полифилла для элемента сведений HTML5
• Руководство для начинающих по прогрессивным веб-приложениям
• Логотип HTML5: что вы думаете?

Это особенно важно, потому что, например, Google объявил об удалении NPAPI (API, используемого этими плагинами), как и Firefox, а Microsoft выступает за просмотр без плагинов. Хотя эти поставщики по-прежнему предоставляют проигрыватель Flash, вероятно, это лишь вопрос времени, когда они его перестанут выпускать. Кроме того, браузеры на мобильных устройствах — это шаг вперед, потому что большинство из них не поддерживают плагины и не имеют Flash-плеера.

Давайте посмотрим на некоторые из новых элементов HTML5 и на то, что они улучшают для видео:

• <canvas> предоставляет сценарии для рендеринга графиков, игровой графики и многого другого. Это иногда называют Canvas JavaScript API. Элемент canvas также можно использовать с WebGL для рендеринга 2D- и 3D-графики с использованием графического процессора видеокарты.
• <video> позволяет воспроизводить видео «из коробки», что действительно здорово. Это, наконец, делает мультимедиа в Интернете без плагинов реальностью. На самом деле производители браузеров, кажется, договорились о едином формате — MPEG-4/H.264, который повсеместно поддерживается современными браузерами, за исключением Opera Mini.
• <audio> включает встроенное воспроизведение аудиоконтента на веб-странице. Как и в случае с видео, решение о том, какие форматы контейнеров и кодеки поддерживать, остается за поставщиками браузеров.
• <track> можно использовать для синхронизированных текстовых дорожек, таких как субтитры и титры в видео. Файлы WebVTT поддерживаются «из коробки».

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

Для меня наиболее важным стандартом, над которым работает W3C, является стандарт «Расширения источников мультимедиа» (MSE), который в настоящее время имеет статус «Рекомендации-кандидаты». Этот JavaScript API позволяет нам генерировать медиапотоки для <video> , <audio> и других элементов, обеспечивая адаптивные стандарты потоковой передачи, такие как MPEG-DASH, в чистом HTML5 и JavaScript.

Еще одним интересным является стандарт «Encrypted Media Extensions», который позволяет воспроизводить защищенный контент в HTML5 и JavaScript. Тем не менее, в настоящее время это «рабочий проект», и потребуется некоторое время для его окончательной доработки.

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

Почему MPEG-DASH?

Давайте рассмотрим формат потоковой передачи MPEG-DASH и почему он используется в HTML5. MPEG-DASH (DASH — сокращение от динамической адаптивной потоковой передачи через HTTP) — это международный, независимый от поставщиков стандарт, ратифицированный MPEG и ISO (ISO/IEC 23009-1). Предыдущие технологии адаптивной потоковой передачи, такие как Apple HLS, Microsoft Smooth Streaming и Adobe HDS, были выпущены поставщиками с ограниченной поддержкой независимых потоковых серверов или клиентов воспроизведения. Ситуация, зависящая от поставщика, была явно нежелательной, поэтому органы стандартизации начали процесс гармонизации, что привело к ратификации MPEG-DASH в 2012 году.

Кратко о целях и преимуществах MPEG-DASH:

• Уменьшите задержки запуска, а также буферизацию и зависания во время воспроизведения видео.
• Продолжайте адаптацию к пропускной способности клиента.
• Используйте клиентскую логику потоковой передачи, чтобы обеспечить максимальную масштабируемость и гибкость.
• Используйте существующие и экономичные CDN, прокси и кэши на основе HTTP.
• Эффективно обходите NAT и брандмауэры с помощью HTTP.
• Включите общее шифрование посредством сигнализации, доставки и использования нескольких параллельных схем DRM из одного и того же файла.
• Включите простое объединение и (целевую) вставку рекламы.
• Эффективно поддерживайте «режим трюка».
• И многое другое!

В последние годы MPEG-DASH был интегрирован в новые усилия по стандартизации, такие как HTML5 MSE, которые позволяют воспроизводить DASH с помощью video и audio HTML5, а также HTML5 Encrypted Media Extensions, которые обеспечивают воспроизведение с защитой DRM в веб-браузерах. . Кроме того, защита DRM с помощью MPEG-DASH согласована в различных системах с помощью MPEG-CENC (для общего шифрования); а воспроизведение MPEG-DASH на различных платформах Smart TV возможно благодаря интеграции с Hybrid Broadcast Broadband TV (HbbTV 1.5 и HbbTV 2.0).

Кроме того, использование стандарта MPEG-DASH было упрощено благодаря отраслевым усилиям на Форуме индустрии DASH и его рекомендациям DASH-AVC/264, а также перспективным инициативам, таким как рекомендация DASH-HEVC/265 по использованию H.265/HEVC в MPEG-DASH.

Сегодня MPEG-DASH внедряется все больше и больше благодаря таким сервисам, как Netflix и Google, которые недавно перешли на этот новый стандарт. Благодаря этим двум основным источникам трафика MPEG-DASH уже составляет 50% всего интернет-трафика.

Как работают MSE?

Теперь давайте рассмотрим детали MSE и способы их использования разработчиками. MSE — это спецификация, расширяющая HTMLMediaElement и позволяющая JavaScript динамически создавать медиапотоки для audio и video . Раньше это было невозможно, потому что эти теги могли получить доступ только к полным файлам (например, к файлам MP4). Этот подход также называется прогрессивной потоковой передачей или прогрессивной загрузкой, поскольку медиафайлы загружаются и воспроизводятся одновременно, что обеспечивает псевдопотоковую передачу.

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

Как уже упоминалось, MPEG-DASH является предпочтительным форматом потоковой передачи для MSE. Итак, давайте рассмотрим шаги, необходимые для создания видеоплеера на основе HTML5 MSE:

1. Загрузите и проанализируйте файл манифеста, называемый MPD в формате MPEG-DASH, который описывает детали видеопотока, такие как количество уровней качества и разрешения видеопотока, языки аудио и субтитры, а также названия медиасегментов и файлы на исходном HTTP-сервере или CDN.
2. Оцените доступную пропускную способность на клиентском устройстве, выберите подходящее качество видео для обеспечения потоковой передачи без буфера и загрузите сегменты мультимедиа в JavaScript.
3. Передайте загруженные сегменты мультимедиа в буфер MSE в JavaScript.
4. Декодируйте и визуализируйте видео с помощью тега video , обычно аппаратно.

Вот как работают адаптивные потоковые проигрыватели на основе HTML5, используемые Netflix и YouTube. Уже существуют довольно зрелые решения, которые позволяют разработчикам и поставщикам контента легко переключаться на потоковую передачу с адаптивным битрейтом в HTML5, например проект с открытым исходным кодом DASH-IF dash.js и проигрыватель Bitdash HTML5.

Генерация контента MPEG-DASH также проста и поддерживается инструментами с открытым исходным кодом, такими как x264 и MP4Box, а также коммерческими службами кодирования, такими как Bitcodin.

Однако использование MSE не ограничивается MPEG-DASH. Все больше и больше проектов (включая hls.js) и проигрывателей (включая Bitdash) поддерживают формат Apple HLS в HTML5 с использованием MSE. Они делают это путем трансмультиплексирования медиасегментов HLS, которые являются контейнерами MPEG2-TS, в базовый формат медиафайлов ISO, необходимый для HTML5 и MPEG-DASH.

Зашифрованные медиа-расширения для DRM

В настоящее время на рынке DRM происходят серьезные изменения, вызванные неизбежным отказом от плагинов NPAPI, таких как Silverlight, что привело к отказу от ведущей системы DRM PlayReady из Chrome и Firefox. Это ставит почти всех поставщиков премиум-контента в затруднительное положение, поскольку им придется переключаться между технологиями и находить перспективное решение.

Издатели потокового мультимедиа премиум -класса не смогут полагаться на Microsoft PlayReady DRM для защиты своего контента в Chrome и Firefox на ПК и устройствах Android. Им придется пересмотреть свою стратегию защиты контента и платформы потоковой передачи, а также найти перспективное решение, а затем в ближайшее время сменить технологии.

Для многих поставщиков контента MPEG-DASH стала предпочтительной технологией. Проекты DASH развертываются все более быстрыми темпами, и MSE и Encrypted Media Extensions (EME) с Widevine DRM кажутся наиболее жизнеспособной альтернативой. Кроме того, MPEG-CENC позволяет поддерживать отдельные системы DRM только с одной версией защищенного контента, а EME основаны на MSE для контента на основе MPEG-DASH.

Таким образом, такое сочетание различных DRM-систем — например, Widevine Modular для Chrome и Android, Microsoft PlayReady для Internet Explorer и Edge и Adobe Primetime для Firefox — для одной версии контента дает поставщикам контента дополнительный стимул для перехода на MPEG. -DASH в качестве международного стандарта, учитывая его гибкость при потоковой передаче, DRM и CDN.

Поддержка браузеров для MSE и EME

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

Однако, чтобы охватить 99% пользователей, у нас должна быть настройка потокового видео, которая также поддерживает браузеры, не поддерживающие MSE, в частности старые версии браузеров и Safari на iOS. Старые браузеры можно легко обслуживать с помощью проигрывателя на основе Flash, который может воспроизводить то же содержимое MPEG-DASH, которое используется MSE, как показано проигрывателем Bitdash. Для поддержки устройств iOS мы должны использовать формат потоковой передачи Apple, называемый HLS, который Apple требует для HTML5. Открытые стандарты, такие как MSE, не поддерживаются Apple, хотя они поддерживаются в Safari на OS X.

В следующей матрице представлен обзор состояния поддержки MSE и EME в браузерах и платформах на сегодняшний день (любезно предоставлено Bitmovin):

Будущее HTML5-видео

Новые медиакодеки выходят на рынок, делая сжатие видео еще более эффективным, что особенно важно для форматов более высокого качества, таких как 4K и UHD, а также для потоковой передачи на мобильные устройства. Наиболее распространенным кодеком является HEVC/h.265 , который через пару лет может стать кодеком по умолчанию (если ситуацию с патентами не испортит). Он также будет использовать встроенные в браузер MSE для воспроизведения и использовать MPEG-DASH в качестве формата потоковой передачи, что демонстрирует гибкость этого открытого стандарта.

Разработчики видеоплееров просто должны выполнить некоторые простые адаптации, такие как изменение атрибута кодека при создании SourceBuffer; и, если базовый браузер поддерживает декодирование HEVC (скорее всего, с помощью аппаратного декодера), то вы сможете смотреть свои потоки HEVC MPEG-DASH в формате HTML5! Мы успешно протестировали браузеры, такие как Microsoft Edge, которые поддерживают HEVC. Кроме того, Google недавно объявил о поддержке в своем браузере Chromium.

Тем не менее, HEVC пока недоступен для подавляющего большинства видеоматериалов в Интернете, и лишь немногие устройства способны его декодировать. И, конечно же, это не единственный кодек в городе. Открытый и бесплатный формат кодирования видео VP9 (преемник VP8) призван обеспечить еще большую эффективность кодирования и уже поддерживается популярными браузерами, такими как Google Chrome и Microsoft Edge, а также этот кодек совместим с MSE. Однако мы не можем предвидеть, какие кодеки найдут свое место в нашей повседневной жизни. Но будь то VP8/9, AVC или HEVC, MSE и MPEG-DASH готовы!

Предстоящая тенденция — 360-градусное видео, которое довольно просто использовать в HTML5. Разработчики могли бы использовать адаптивную потоковую поддержку MSE и просто добавить слой рендеринга JavaScript или WebGL для 360-градусного опыта поверх него. Недавно я рассказывал об этой теме и о том, как создать сервис виртуальной реальности, подобный Netflix, с использованием HTML5, JavaScript, DASH и WebGL.

Заключение

Я надеюсь, что эта статья дала вам хороший обзор состояния и будущего видео в Интернете. MSE и EME — это большие шаги к экосистеме открытых стандартов для видео в Интернете, которые заменят такие плагины, как Flash и Silverlight. Кроме того, в современном мультиплатформенном мире HTML5 становится все более популярным, включая среду для настольных компьютеров, мобильных устройств и смарт-ТВ.

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