Современные браузеры с видео HTML5 наконец-то поддерживают общий видеокодек H.264. К сожалению, с форматами потоковой передачи с переменным битрейтом все не так просто. С помощью MSE браузеры могут проигрывать такие форматы. На данный момент нет JS-плеера, поддерживающего все потоковые форматы. Я хочу показать, как избежать суеты с разными игроками и создать решение, которое будет воспроизводить любой потоковый формат.

Что такое адаптивная потоковая передача битрейта?

Adaptive Bitrate Streaming - это технология, которая позволяет проигрывателю видео на основе предпочтений конечного пользователя, пропускной способности, ЦП, разрешения экрана и т. Д. Регулировать качество видео- и аудиопотоков соответствующим образом.

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

* Лучшее приложение OpenAPI (Seagger) для Confluence Cloud.

Наиболее популярные реализации потоковой передачи с адаптивным битрейтом:

  • MPEG-DASH - открытый стандарт, разработанный несколькими компаниями, включая Google, Microsoft, Apple, Netflix и так далее. Самый перспективный на данный момент.
  • Smooth Streaming - собственный стандарт, разработанный и поддерживаемый Microsoft. Как только поддержка Silverlight для браузеров была прекращена, Smooth Streaming редко используется в Интернете. Пока он по-прежнему популярен в приставках и смарт-телевизорах.
  • HLS - собственный стандарт, разработанный и поддерживаемый Apple. Единственный стандарт, поддерживаемый iDevices: iPhone, iPad, Mac, Apple TV.

Какие у нас есть варианты?

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

  • Dash.js - референсный плеер для MPEG-DASH
  • Hls.js - поддерживает HLS
  • Hasplayer - поддерживает Smooth Streaming.

Все эти плееры используют MSE, который поддерживается последними версиями Chrome, FF и Safari. Internet Explorer 11 и новее, а также любые браузеры EDGE поддерживают MSE только в Windows 8.1+.

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

Как нам смешать это вместе?

Ответ прост. Воспользуемся шаблоном проектирования адаптера.

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

Давай посмотрим видео…

Я собираюсь использовать ECMAScript 6 (он же ECMAScript 2015, он же ES6) для лучшей читаемости. В проекте он будет скомпилирован Babel и упакован Webpack.

Ниже приводится объяснение идеи адаптера плеера. Исходный код проекта можно найти на Github https://github.com/stepashka69/adapter-player. На данный момент это не производственный код.

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

Адаптер для плеера Dash.js для воспроизведения MPEG-DASH будет выглядеть примерно так:

Адаптер для Hasplayer.js:

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

Используя простой код ниже, мы уже можем воспроизводить файлы .MP4, .MPD и / Manifest.

Пока все выглядит хорошо, но есть проблема. Интерфейс встроенного видеоэлемента HTML5 не так привлекателен, как вам хотелось бы.

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

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

* Хорошее Простое приложение PlantUML для Confluence Cloud.

Послушаем видео…

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

Сначала мы определяем список событий, поддерживаемых адаптером player.

Затем мы реализуем определенные имена событий для каждого адаптера плеера и функции для регистрации обратного вызова с событием в плеере.

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

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

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

Но вызовы API более продвинутого плеера могут быть совсем другими. Их нужно реализовывать отдельно в каждом адаптере.

Наконец, давайте управлять видео из приложения…

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

  • знаю, как представить себя
  • знаю, как управлять игроком

Кнопка воспроизведения должна меняться в зависимости от статуса игрока. Когда игрок играет, это должно выглядеть как «пауза», а когда игрок ставит на паузу, это должно выглядеть как «игра». Очевидно, что при нажатии он должен либо приостановить, либо возобновить воспроизведение. Вот как мы можем добиться этого для проекта, который использует загрузочную загрузку twitter.

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

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

Итак, имея код выше:

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

Надеюсь, этот пример облегчит вам жизнь, но ...

Впереди еще долгий путь

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

  • реализовать правильное определение типа видео. Не все видео, которые могут воспроизводиться встроенным проигрывателем, имеют расширение «.mp4», так как имена файлов в других форматах могут отличаться.
  • видео имеют разные типы видео / аудиокодеков, которые не поддерживаются браузерами. Добавить надлежащую проверку и сообщение об ошибках непросто. Без этой проверки пользователи могли бы видеть, например, видео без звука или наоборот.
  • браузеры не могут поддерживать некоторые типы видео или конкретных проигрывателей. Например, IE в Windows до 8.1 не воспроизводил MPEG-DASH или SmoothStreaming.
  • есть проблемы с CORS, если вы хотите воспроизводить видео с других серверов.
  • есть видео с защитой DRM, которые требуют дополнительной настройки и проверки перед воспроизведением.
  • и так далее…

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

PS: Исходный код проекта можно найти на Github https://github.com/stepashka69/adapter-player.