Обзор видеоплееров для веба

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



    Я подумал, что кому-то ещё это могло бы оказаться полезным и решил оформить в виде статьи на Хабр.


    Веб-плееры с открытым исходным кодом


    Video.js


    Самый популярный (~30k загрузок в день) и самый древний (~10 лет репозиторию) веб-плеер.


    Его поддерживают 10 мейнтейнеров и онлайн видеоплатформа Brightcove, которая является основным спонсором проекта. Их собственный проприетарный плеер построен на базе video.js.


    Быстрые релизные циклы. Разработчики выкатывают новую версию каждую неделю.


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


    Имеет самый большой вес (486 kB минифицированного кода) среди конкурентов.


    jQuery в мире веб-плееров.



    Shaka Player


    Второй по популярности веб-плеер (~15k загрузок в день). Поддерживается компанией Google, находится в активной разработке, имеет дорожную карту.


    Из коробки реализует работу в офлайне.


    На основе него сделан проприетарный Kaltura Player (см. ниже).



    Plyr


    Это набирающий популярность веб-плеер. В данный момент он занимает третье место по популярности (~8к загрузок в день).


    Наиболее молодой (~4 года, от января, 2016).


    Имеет самый маленький размер среди конкурентов (113 kB минифицированного кода)


    Использует семантику HTML, не работает в IE (нужны полифилы).


    С рекламой работает только через vi.ai. Поддержка VAST в разработке.


    Поддерживается всего одним мейнтейнером, имеет наибольшее число открытых проблем (392 issues на данный момент), которое только растёт.


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



    MediaElement.js


    Разработка плеера существенно замедлилась с 2018 года. 3 мейнтейнера выпускают новые версии в среднем раз в месяц.



    Flowplayer


    Один из самых старых плееров для веба. С 2012 работал на Flash, потом получил поддержку HTML5.


    Начиная с v7 версии плеера команда разработчиков ушла делать проприетарную онлайн видеоплатформу Flowplayer.


    Последний релиз версии с открытым исходным кодом был год назад. Поддержкой занимается один мейнтейнер. Репозиторий выглядит заброшенным.


    jPlayer


    Старый видеоплеер, написанный на jQuery.


    Последний релиз был 5 лет назад (15 декабря 2014).


    Есть порт под React.js.


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


    Веб-плееры с закрытым исходным кодом


    Эти варианты нам не подходят. Выписал, чтобы просто про них знать.


    Kaltura HTML5 Video Player


    Их решение построено на основе открытого Shaka Player от Google.


    JW Player


    Ребята написали хороший плеер с нуля.


    Cloudinary


    Плеер от сервиса работы с медиафайлами (управление, загрузка, нарезка).


    Внешний вид плеера можно настраивать через собственную Cloudinary Video Player Studio.


    Решение построено на основе video.js.


    Wistia


    Популярная платная платформа для встраивания видео себе на сайт с аналитикой.


    Тоже имеет свой плеер, который загружается с CDN. Исходников не нашёл.


    Выводы


    По-сути, сейчас среди бесплатных плееров с открытым исходным кодом имеет смысл рассматривать только три: Plyr, Shaka Player и Video.js.


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


    Shaka Player подкупает тем, что его разрабатывает Google, что он молодой и что он в активной разработке. С точки зрения разработчика, это очень интересный вариант: свежие технологии и никакого legacy. Однако, тут кроются и минусы: некоторые вещи там ещё не реализованы. Например, нам не хватило хорошей поддержки работы с рекламой. В issues можно найти, что можно попробовать подключить IMA SDK (от Google, естественно), но примеров никаких ещё нет.


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

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 16

      +2
      Использует семантику HTML, не работает в IE (нужны полифилы).

      Вообще-то вместе с основной версией распространяется и polyfilled версия, которая работает и в IE.
      У меня есть опыт использования Plyr и он скорее положительный, чем отрицательный. Из всех описанных всех он оказался наиболее универсальным, способным работать даже в браузерах на старых смарт-телевизорах.
      Преимущества два:
      1. Благодаря использованию семантики HTML видео воспроизведётся, даже если по каким-то причинам JS в браузере выключен или скрипты прекращают работу из-за ошибок (например, провайдер решит внедрить рекламу, подменив js-ку, как всё чаще случается).
      2. Дистрибутив плеера компактный, не оказывает заметного влияния на загрузку видео даже на медленных устройствах (например, старых телефонах) по 3G.
      Недостаток тоже есть: иногда (по моим данным, из 5000 пользователей столкнётся один) случается черный экран вместо видео, звук при этом воспроизводится. Помогает выключение аппаратного ускорения, если видео просматривается в Chrome. Явной закономерности не выявил, хотя вроде как большинство проблемных устройств — ноутбуки с Windows 7. Ошибку воспроизвести не удаётся.
        +1
        Ещё имеется PlayerJS

        Весьма широкий функционал
          +1
          И оплата только за фишки, вроде редактора. Т.е. один раз оплатил, создал плеер и пользуешься. Функционал просто огромный.
          +2
          Вообще плееров миллион и одна штука. Сравнение не полное.

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

          Мы остановились на AblePlayer, он и бесплатный и кастомизируемый и accessible. Так что утверждение, что сейчас имеет смысл рассматривать только Plyr, Shaka Player и Video.js, мягко говоря не соответствует действительности
            +1

            Плееров действительно дофига
            Достаточно открыть alternativeto, producthunt
            Или вбить в npm в поиске "player"
            Первое даст большой спиоск, второе — список поменьше, но с подробностями, а третье, ну если вам хочется увидеть прям все

              0

              Спасибо за ссылки!


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


              Если тут нет каких-то хороших плееров, то это потому что их не оказалось в поисковых выдачах. А если их нет в поисковых выдачах, — подумал я, — то значит они не популярны и можно их не рассматривать.

              0

              Согласен, утверждение достаточно громкое получилось. Давайте считать, что это лично моя тройка финалистов.


              Посмотрел AblePlayer. Смутило, что он зависит от jQuery и не опубликован в NPM. Но, если он Вам подходит, то это отлично.


              Plyr, кстати, заявляет, что он accessible.

                0
                А чтозначит не accessible?
                  0
                  +1
                  Достаточно долго жил с plyr, качество кода и вообще то как оно управляет своим состоянием говорит о том что ему нужен серьезный рефакторинг и дальнейшая поддержка кода только увеличивает кол-во багов и сайд эффектов. У плеера нет какой то адекватной архитектуры, все прикручено на костылях, без какой то идеи или концепции. В итоге шаг за шагом выпиливал из него функционал (субтитры, фуллскрин, хоткеи итп), в итоге от него самого ничего и не осталось. Ну и автор достаточно слабенький разработчик, скорее больше верстальщик\дизайнер.
                    +1
                    А c hls.js не было опыта?
                    Интересен опыт работы с этим плеером. Возможно его выкинули из статьи по причине малой функциональности, но если рассматривали было бы интересно услышать что то
                      0
                      Тоже удивился, почему его тут нет. Делал на его базе плеер в Wrike, доволен опытом.
                        0

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


                        Был опыт использования его вместе с video.js через одну из интеграций. Мы тогда экспериментировали с форматами потоков и пробовали разные библиотеки для работы c HLS. Полёт нормальный.


                        Но потом в итоге всё равно вернулись на то, что предоставляет video.js. Тогда это был videojs-contrib-hls, а сейчас новый videojs-http-streaming (VHS).

                          +1
                          Благодарю за ответ, интересный опыт. А почему ушли от интеграции через hls.js если не секрет, что не устроило?
                            +1

                            С ним всё ок. :)


                            У нас тогда не работало несколько видеопотоков, и мы искали проблему. В том числе мы искали её и в плеере. hls.js пробовали как альтернативу и смотрели — заработает или нет. Оказалось, что проблема была в потоках, а оба решения (hls.js и videojs-contrib-hls) работают отлично.


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

                              +1
                              Супер. Благодарю за ответ, похоже вот мы так и делаем :D

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

                      Самое читаемое