Hls html5 player: HTML5 Video Player with HLS and Video Transformations

Содержание

Какой бывает HTML5-стриминг (и почему mp4-стриминга не существует) / Хабр

Нередко клиенты спрашивают, умеет ли наш сервер «mp4-стриминг в HTML5». В 99% случаев спрашивающий не понимает о чём говорит. В этом сложно винить клиентов: из-за путаницы с терминами, технической сложности и большого разнообразия вариантов стриминга запутаться очень легко.

В этой статье мы расскажем, какой бывает HTML5-стриминг, какие варианты хорошие, и почему, чёрт побери, нельзя говорить «mp4-стриминг».

▍Термины

HTML5-видео — это когда вы вставляете в веб-страницу тег <video> и указываете ему какой-то src. HTML5-стриминг — это то же HTML5-видео, но когда в src не готовый файл, а постоянно обновляющийся видеопоток. Ролик на Ютубе — это HTML5-видео, трансляция в Твитче — HTML5-стриминг.

Тегу <video> неважно, как видеопоток формируется и передаётся, и сможет ли браузер его проиграть. Главное, чтобы в src была ссылка на какой-то видеопоток. Говоря техническим языком, спецификация ничего не говорит о том, какие

протоколы, транспорты и кодеки поддерживаются в HTML5-видео.

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

Протокол обычно подразумевает хотя бы команду Play (начать проигрывание), но иногда есть и расширенные варианты: пауза, продолжение, публикация, перемотка и т. п.

Примеры протоколов: RTSP, RTMP, HTTP, HLS, IGMP.

Транспорт, или транспортный контейнер, или контейнер — это то, как сжатое видео упаковывается в байты для передачи от одного участника к другому (по какому-то протоколу).

Примеры контейнеров: MPEG-TS, RTMP, RTP.

Обратите внимание, что RTMP оказался и в протоколах, и в транспортах. Это потому, что в описании RTMP есть спецификация и того, что должны слать друг другу стороны, чтобы видео потекло (т. е. протокол), и того, как упаковывать видео (т. е. транспорт). Так бывает не всегда. Например в протоколе RTSP видео упаковывается в транспорт RTP.

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

Примеры кодеков: h364, aac, mp3.

Из-за того, что термин многозначный, возникает путаница с названиями.

Например, H.264 — это стандарт того, как упаковать поток огромных сырых видеокадров в очень мало байтов, libx264 — это библиотека для сжатия по этому стандарту, а ещё есть одноимённый софт под Винду, который умеет декодировать h364 и проигрывать его на экране.

Итак, в спецификации HTML5 не описаны протоколы, транспорты и кодеки. Поэтому авторы браузеров сами выбирают, что поддерживать, а под «HTML5-стримингом» подразумевают разные вещи.

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

▍HLS

HLS — это h364-видео и aac- или mp3-аудио, упакованное в транспорт MPEG-TS. Поток разбивается на сегменты, описанные в m3u8-плейлистах, и раздается по HTTP. HLS поддерживает мультибитрейтные потоки, Live/VOD. Вариант очень простой, но в то же время имеет много деталей, из-за чего на разных устройствах работает по-разному.

Разработали HLS в Эппле, поэтому изначально он работал только в Сафари на iOS и MacOS. Даже Сафари на Windows не умел играть HLS (когда еще была версия под Win).

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

Но не всё гладко. Производители сторонних плееров плюнули на стандарт Эппла в части донесения разных аудиодорожек и добавили проигрывание всего что есть в обычном MPEG-TS: mpeg2 video, mpeg2 audio и т. п. Из-за этого приходится отдавать разные форматы плейлистов для разных плееров.

▍MPEG-DASH

MPEG-DASH — обычно это h364/h365-видео и aac-аудио, упакованное в транспорт mp4, или vp8/vp9, упакованное в WebM, хотя стандарт и не привязан к конкретным кодекам, протоколам и транспортам. Как и в HLS, поток может разбиваться на сегменты, но это необязательно. Вместо плейлистов — MPD-манифест в XML.

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

MPEG-DASH хорош тем, что в большинстве браузеров работает нативно, через MSE (о том, что это такое, — чуть ниже). Для него даже нет реализации на Флеше — это честный, бескомпромиссный HTML5.
Определенно, MPEG-DASH — самый настоящий HTML5-стриминг, за ним будущее.

▍MSE

Когда стало ясно, что Флеш всё-таки умрёт (после сотни ложных похорон), ребром встал вопрос о том, что придёт ему на смену. Хорошо было бы получить в браузерах возможность проигрывать видео по качеству и удобству близко к тому, что умеет Флеш (а он это делает всё-таки хорошо).

Во Флеше давно появился очень удобный механизм для универсального проигрывания разных вариантов — appendBytes. Суть в том, что пользовательский код сам как хочет скачивает кадры сжатого видео, упаковывает в оговоренный контейнер (с Флешем это flv) и засовывает в видеопроигрыватель. Т. е. протокол и транспорт реализуются в пользовательском коде, запускаемом в браузере.

MSE (Media Sources Extensions) — это расширение спецификации HTML5, которое позволяет делать то же, что делает appendBytes во Флеше. К сожалению, MSE намного сложнее как в понимании, так и в реализации.

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

Интересно, что MSE работает не только с MPEG-DASH, но и с HLS. Существует реализация hls.js, которая скачивает HLS-плейлисты, скачивает MPEG-TS-сегменты, перепаковывает их в нужный для MSE формат и играет через MSE. Эппл даже сделала шаг в сторону совместимости с MPEG-DASH — использование mp4-контейнеров в HLS.

К концу 2017 года Флеш скорее всего умрёт окончательно, и уже сегодня можно смело начинать проект с MPEG-DASH.

▍WebRTC

Во Флеше была сделана годная попытка в одной технологии реализовать и риалтайм-общение, и массовый броадкастинг. К сожалению, в HTML5 так не вышло. Для просмотра трансляций у нас есть MSE, а для видеозвонков — WebRTC.

WebRTC — это SIP в браузере: способ организовать аудио- и видеоканал и канал данных между двумя браузерами при посредничестве сервера.

Технология не предназначена для стриминга, но в принципе может и его, так что было бы неправильно забыть про него. WebRTC тоже считается HTML5, потому что вроде как ничего кроме Яваскрипта в браузере не требует. Зато требует наличия последних версий обоих популярных браузеров, а с Эджем пока вообще не совместимо.

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

▍Так что там с mp4-стримингом?

Любой современный браузер скорее всего сможет по протоколу HTTP запросить файл, упакованный в транспорт mp4 и содержащий внутри видео, сжатое кодеком h364/aac.

И даже попытаться проиграть его. Это самый удобный, понятный и стандартный вариант проигрывания файлов. Лежит себе файлик на диске, nginx его отдает. Код, проигрывающий mp4 в браузерах достаточно хорош. Например, он умеет даже скачивать куски видео по необходимости (в отличие от Флеш-плеера, который скачивает видео целиком).

Вокруг h364 сложилось немало шумихи по поводу его «закрытости» и «несвободности». Так что есть «открытая» альтернатива, которую форсит Гугл — видеокодеки vp8 и vp9, упакованные в транспорт WebM. WebM — это подмножество транспорта mkv (a. k. a. Матрёшка), который очень похож на mp4 по сути, но отличается от него своей «бинарностью».

Именно отсюда растут ноги у такого явления как «mp4-стриминг», который устроен как WebM. Дело в том что в обычном mp4 в самом начале указывается размер всего контейнера. Поэтому, если мы хотим отдать по обычному mp4 прямой эфир, у нас ничего не получится. А чтобы всё-таки получилось и можно было создавать mp4 без фиксированного конца, придуман следующий ход: сначала пишется mp4 без кадров, а потом в конце подписываются блоками по несколько секунд фрагменты с кадрами.

Это называется mp4 fragmented, или mp4 streaming.

По сути это никакой не стриминг, а костыль, позволяющий создать его видимость. Mp4 — отличный формат для скачивания видео, но негодный для стриминга, так что про него можно просто забыть и никогда не использовать термин «mp4-стриминг».

▍Выводы

Хорошие варианты HTML5-стриминга: MPEG-DASH и HLS. Они подходят и для мобильных устройств, и для ПК, и для приставок.
Флеш всё-таки умрет, и MSE уже сейчас занимает его место.
WebRTC — HTML5 технология, в первую очередь, для общения, а не для телевизионного вещания.

Не приносите в веб старые кодеки и не пытайтесь доставлять mp2video и mp2audio по HLS, даже если ваш плеер это умеет.
Никогда не говорите «mp4 стриминг». Пожалуйста.

Медиа-плееры для SRT, SLDP, HLS, RTMP и Icecast

Медиа-плееры для SRT, SLDP, HLS, RTMP и Icecast — Софтвелум

Программные решения для построения онлайн-вещания

Плееры и SDK живых потоков с низкой задержкой

Larix Player для Android

SRT, SLDP, RTMP/RTMPS, Icecast, HLS, MPEG-DASH
играются на Android и Android TV

Larix Player для iOS

SRT, SLDP, HLS, RTMP/RTMPS, Icecast
играются на iOS и Apple TV tvOS

SLDP плеер для HTML5

Плеер на JavaScript позволяет играть SLDP на любой платформе с поддержкой MSE, например Windows, Linux, Mac, Android и iPad.

Узнать больше про SDK и приложения

Скачать HTML5-плеер
бесплатно для встраивания себе на страницы.

Поддерживаются кодеки AVC/H.264, HEVC/H,265, VP8, VP9 для видео и AAC, MP3, Opus для аудио, в зависимости от платформы и протокола. На страницах протоколов есть подробная информация.

SLDP
SLDP (Softvelum Low Delay Protocol) — это протокол на базе WebSockets с ультра-низкой задержкой с возможностью передачи контента с любым кодеком с адаптивным битрейтом (ABR) и поддержкой CEA-608/708 субтитров.

SLDP не зависит от кодеков и плеер будет играть то, что поддерживает платформа.

Это замена RTMP для проигрывания живых потоков, что особенно важно с прекращением поддержки Flash.

Посетите страницу SLDP, читайте FAQ и другие статьи, например аудио-режим для Opus на iPhone.

SRT
Secure Reliable Transport работает на основе UDP, увелиичвает надежность и безопасность живых потоков в ненадежных окружениях, например через мобильные сети и на дальние расстояния.

Проигрывание по SRT расширяет возможности плееров для Android и iOS у конечных пользователей.
Поддерживается проигрывание в режимах Pull (Caller), Listen и Rendezvous.

Читайте статью Glass-to-glass SRT delivery setup о настройке Nimble Streamer, Larix Broadcaster и Larix Player.
Также прочитайте Using Magewell Ultra Encode with the Larix Player App, где описано проигрывание по SRT.

Синхронизация проигрывания

Технология SLDP позволяет синхронизировать одновременное проигрывание на любом количестве устройств и браузеров. Это бывает важно в различных случаях:

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

Эта возможность поддерживается в сервере Nimble Streamer, HTML5 SLDP Player и Larix Player для iOS и Android.
Читайте эту статью, она объясняет настройку и использование. На демо-странице можно попробовать это в работе.

Player SDK

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

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

Перейти на Larix Player SDK для iOS Перейти на Larix Player SDK для Android Перейти на SLDP PLayer SDK для HTML5

Larix Broadcaster

Если нужно не только проиграть поток, но и отправить его с мобильного устройства, попробуйте Larix Broadcaster для Android и iOS.

Топ-6 проигрывателей HTML5 для интеграции потоковой передачи на ваш сайт

Материалы

Опубликовано 27 января 2022 г.

По данным Social Media Week, 78% интернет-пользователей смотрят видео каждую неделю, а 55% из них делают это каждый день. 54% участников исследования хотели бы смотреть видео еще чаще.

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

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

В этой статье мы поговорим о самых популярных HTML5-плеерах 2022 года. Мы покажем, как их встроить на свой сайт или в приложение, и приведем ряд конкретных примеров кода.

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

Как выбрать проигрыватель HTML5 для ваших нужд

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

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

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

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

И мы предоставим список игроков, из которых вы можете выбрать.

Шесть лучших игроков HTML5 в 2022 году

1. G-Core Labs

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

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

Характеристики плеера:

Поддержка Live и VOD (видео по запросу).
Поддержка следующих протоколов и форматов: HLS, MPEG-DASH, MPEG-DASH с малой задержкой (Chunked CMAF), MP4, MPEG, MPG, QT, WMW, MKV, WebM, MXF, QuickTime и т. д.
Поддержка видео 360°.
Возможность вставлять рекламу в начале, середине, конце и паузе ролика с помощью VAST/VPAID.
Функции: субтитры, плейлисты, автовоспроизведение, адаптивный битрейт и так далее. Расширенная версия включает в себя такие функции, как полное брендирование и кастомизация, видеорегистратор, защищенное воспроизведение, связь со счетчиком Google Analytics и др. Полный список функций вы можете посмотреть на странице плеера.

Интегрировать наш плеер в ваш ресурс несложно. Все, что вам нужно сделать, это добавить следующий HTML-код:

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

2. Video.js

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

Функции проигрывателя Video.js можно настроить с помощью более 100 плагинов. Вы можете выбрать и включить только те функции, которые вам нужны.

Единственным недостатком этого плеера является то, что он не поддерживает протоколы передачи данных для потоковой передачи с низкой задержкой, такие как Chunked CMAF, Low-Latency HLS, WebRTC и т.д.

Поддержка следующих протоколов и форматов: HLS, MPEG-DASH, MP4, WebM.

Возможности настройки и брендинга с помощью CSS и плагинов.

Интеграция с YouTube и Vimeo.

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

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

3. MediaElement.js

Это бесплатный, простой в использовании и довольно удобный проигрыватель HTML5. Большинство его функций, как и в случае с Video.js, можно настроить с помощью плагинов. В MediaElement.js не так много плагинов, но они охватывают все необходимые функции.

По сравнению с другими игроками из нашего топ-листа, MediaElement.js обладает самыми широкими возможностями в плане интеграции с другими сайтами. Он также может служить оболочкой для YouTube, Vimeo, Twitch, Facebook, Dailymotion и других плееров.

Особенности плеера:

Поддержка Live и VOD.
Поддержка следующих протоколов и форматов: HLS, MPEG-DASH, MP4.
Вставка рекламы с использованием VAST/VPAID (через плагин).
Возможности настройки.
Функции через плагины: плейлисты, ускорение видео, скриншоты, связь с Google Analytics и т. д. Полный список плагинов можно посмотреть на GitHub.

Интеграция плеера:

4. Clappr

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

Так же, как и в некоторых упомянутых выше плеерах, функции Clappr настраиваются с помощью плагинов. У этого плеера не так много плагинов, как у Video.js, но у него есть несколько уникальных плагинов, которые есть в нескольких решениях с открытым исходным кодом, например, плагин DVR.

Характеристики плеера:

Поддержка Live и VOD.
Поддержка следующих протоколов и форматов: HLS, MPEG-DASH, MP4.
Полная настройка и брендинг с помощью плагинов.
Функции через плагины: субтитры, DVR, статистика, связь с Google Analytics и т. д. Полный список плагинов можно посмотреть на GitHub.

Интеграция с плеером:

5. Hls.js

Это еще одно решение с открытым исходным кодом. Это многофункциональный плеер, который легко интегрируется. Он основан на библиотеке javascript. Основные протоколы, которые он поддерживает, включают HLS и фрагментированный MP4 (fMP4). Плеер может преобразовывать сегменты MPEG-2 и AAC/MP3 в фрагментированные MP4.

Hls.js предлагает множество возможностей для настройки API. Вы можете установить размер буфера, длину передаваемого сегмента и битрейт.

Особенности плеера:

Поддержка Live и VOD.
Поддержка следующих протоколов и форматов: HLS, fMP4; возможность конвертировать MPEG-2 и AAC/MP3 в fMP4.
Шифрование видео.
Набор функций: DVR, субтитры, альтернативные звуковые дорожки для Live и VOD, адаптивный битрейт, аналитика и др. Полный список функций можно посмотреть на GitHub.

Интеграция с плеером:

6. Dash.js

Этот проигрыватель с открытым исходным кодом был разработан по инициативе DASH Industry Forum. Он был создан с использованием клиентских библиотек javascript и может воспроизводить видео в формате MPEG-DASH.

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

Характеристики игрока:

Поддержка Live и VOD.
Поддержка следующих протоколов и форматов: MPEG-DASH, Chunked CMAF.
Набор функций: адаптивный битрейт, DRM, автовоспроизведение и т. д. Полный список функций можно посмотреть на GitHub.

Интеграция с проигрывателем:

Сводка

Компании используют видеоконтент для достижения своих бизнес-целей. Чтобы интегрировать потоки на ваш сайт и предотвратить переход пользователей на сторонние сайты, вам нужен качественный HTML5-плеер, который будет легко встроить в ваш сайт или приложение.
Очень важно выбрать решение, которое подходит вам как по функциям, так и по цене. Платные игроки не всегда лучше бесплатных. Решение с открытым исходным кодом может оказаться подходящим для вашего проекта. Главное, чтобы плеер соответствовал вашим потребностям.
Чтобы облегчить вам выбор, мы выбрали 6 лучших современных плееров с расширенными функциями: G-Core Labs, Video. js, Media.Element.js, Clappr, Hls.js, Dash.js.
Все эти плееры, а также любые другие опции можно использовать для трансляции видео с помощью нашей потоковой платформы.

Наша стриминговая платформа поможет вам доставлять видеоконтент в качестве до 8K более чем 1 000 000 зрителей с задержкой не более 4–5 секунд.

Мы защищаем ваш контент от нелегального просмотра и копирования и предоставляем эффективные инструменты монетизации.

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

Подробнее о нашей потоковой платформе

Поделитесь этой статьей

Подпишитесь на полезную рассылку

Выгодные предложения и важные новости раз в месяц. Без спама.

Бесплатные видеоплееры HTML5 — HLS и DASH — Потоковая передача для бедных

Какой плеер использовать?

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

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

Основная информация и возможности

Игрок	Лицензия	Спонсор	ЗОЖ	Тире	Библиотека	API	Плагины
Video. js	Апач 2.0	Брайтков	✓	✓	х	✓	да
Клапан	BSD 3-пункт	Глобо	✓	через плагин	х	✓	да
Hls.js	Апач 2.0	Нетлайф	✓	х	✓	✓	х
Dash.js	BSD 3-пункт	DashIF	х	✓	✓	✓	х
Шака	Апач 2.0	Гугл	✓	✓	✓	✓	да
Элемент мультимедиа	Массачусетский технологический институт	н/д	через hls.js	через dash.js	х	✓	да
Жидкостный проигрыватель	Массачусетский технологический институт	Эксадс	через hls. js	через dash.js	х	✓	х
DPlayer	Массачусетский технологический институт	разные	через hls.js	через dash.js или shaka	х	✓	х
Плайр	Массачусетский технологический институт	н/д	через hls.js	через dash.js или shaka	х	✓	х
OpenPlayerJS	Массачусетский технологический институт	н/д	через hls.js	через dash.js	х	✓	?

В этом контексте «библиотека» означает, что некоторые из библиотек функций соответствующего проигрывателя могут быть легко использованы в другом проигрывателе или контексте. Например, dash.js и hls.js используются в качестве клиентов протоколов для многих других игроков.

Коммерческие функции

Доступно Доступен плагин

Плеер	Объявления	ЦМР	Аналитика
Video.js	доступный плагиндоступный плагин	доступен плагин	плагина
Клапан	стирать	х	доступных плагинов
Hls.js	х	х	✓
Dash.js	х	✓	?
Шака	еще не	✓	доступен плагин
Элемент мультимедиа	поддерживается через плагины	через dash.js
Жидкостный проигрыватель	✓	через dash. js	?
DPlayer	х	через dash.js или shaka	?
Плайр	доступен плагин	через dash.js или shaka	?
OpenPlayerJS	✓	через dash.js	?

Так какой из них лучший?

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

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

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

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

Подойдет ли мне бесплатный плеер?

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