Однажды по-работе у меня возникла задача сделать исследование рынка существующих веб-плееров, которые можно было бы взять для нашего нового модного проекта. В процессе сформировалось это сравнение.
Я подумал, что кому-то ещё это могло бы оказаться полезным и решил оформить в виде статьи на Хабр.
Веб-плееры с открытым исходным кодом
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, устаревших статей, обзоров и плагинов. Однако, то, как активно его разрабатывают в данный момент, как много в нём уже решённых задач и реализованных фич приводит к мысли, что не зря он до сих пор держит марку самого популярного веб-плеера.
Videojs HTML5 Player — Плагин для WordPress
Детали
Отзывы
Установка
Разработка
Поддержка
Video. js HTML5 Player is a user-friendly plugin that supports video playback on desktop and mobile devices. It makes super easy for you to embed both self-hosted video files or video files that are externally hosted using Video.js library.
Video.js HTML5 Player Features
Embed MP4 video files into a post/page or anywhere on your WordPress site
Embed responsive videos for a better user experience while viewing from a mobile device
Embed HTML5 videos which are compatible with all major browsers
Embed videos with poster images
Embed videos using videojs player
Automatically play a video when the page is rendered
Embed videos uploaded to your WordPress media library using direct links in the shortcode
No setup required, simply install and start embedding videos
Lightweight and compatible with the latest version of WordPress
Clean and sleek player with no watermark
fallbacks for other HTML5-supported filetypes (WebM, Ogv)
HTTP streaming
Video.
js HTML5 Player Add-ons
Disable Right Click
How to Use Video.js HTML5 Player
In order to embed a video create a new post/page and use the following shortcode:
Defines the width of the video file (Height is automatically calculated). This option is not required unless you want to limit the maximum width of the video.
Specifies if and how the video should be loaded when the page loads. Defaults to «auto» (the video should be loaded entirely when the page loads). Other options:
Controls
Specifies that video controls should be displayed. Defaults to «true». In order to hide controls set this parameter to «false».
When you disable controls users will not be able to interact with your videos. So It is recommended that you enable autoplay for a video with no controls.
Autoplay
Causes the video file to automatically play when the page loads.
The plugin supports the m3u8 file format that can be used for Video. js HTTP Streaming. It allows you to play HLS, DASH, and other HTTP streaming protocols with Video.js, even where they are not natively supported.
For detailed documentation please visit the Videojs HTML5 Player plugin page
Video.js Player Demo
Go to the Add New plugins screen in your WordPress Dashboard
Click the upload tab
Browse for the plugin file (videojs-html5-player.zip) on your computer
Click «Install Now» and then hit the activate button
What is Video.js?
Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video playback on desktop and mobile devices.
How do I run Video.js?
Install the Video.js plugin and add a shortcode to your WordPress post/page.
Is Video.js open source?
Yes.
Does Video.js plugin support HLS?
Yes.
Does Video.js plugin support HTTP streaming?
Yes.
What media formats does Video.js plugin support?
MP4, WebM, Ogv and M3U8.
I wanna thanks to this guy for trying to keep this player simple and updated. I’m using it for 3 years and now, with hls streaming support i will it use it more, thank you and good luck !
Awesome plugin, active development, some features (hls streams) missing.
I appreciate the stable playback of the video.
However, there are some complaints.
-There is no function to output structured data of moving images.
-In addition to mp4, you can set webm and Ogv as options, but you cannot specify the order in which they are read.
(* Even if you want to load webm into a browser that can read webm, MP4 is the priority description, so there is no point in preparing a file in webm format.
)
We are anxious to be able to respond to these issues.
Best way to add video quickly in post. And popup also.
Thanks!!!!
Excellent plugin, Thank you, works straigthforward on Laptop/Smartphone (Android)
It allows LearnPress videos to be responsive (they are not responsive natively).
I like it
Посмотреть все 17 отзывов
«Videojs HTML5 Player» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
Участники
Noor Alam
«Videojs HTML5 Player» переведён на 15 языков. Благодарим переводчиков за их работу.
Перевести «Videojs HTML5 Player» на ваш язык.
Заинтересованы в разработке?
Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.
1.1.9
Made some security related improvements suggested by wpscan.
1.1.8
Added support for Disable Right Click add-on.
1.1.7
Added support for Video.js HTTP Streaming.
1.1.6
Updated Video.js to 7.14.3.
1.1.5
Updated Videojs to 7.10.1.
1.1.4
Made some security related improvements in the plugin
1.1.3
Videojs play button is now centered by default.
1.1.2
Videojs HTML5 Player is now compatible with WordPress 4.9.
1.1.1
Added support for playsinline attribute which allows a video to play inline on iOS (the video will not automatically enter fullscreen mode when playback begins).
1.1.0
Videojs script is now enqueued in the footer to avoid a JavaScript setup error.
1.0.9
Made jQuery a dependency for the videojs script.
1.0.8
Updated the translation files so the plugin can take advantage of language packs.
Videojs HTML5 Player is now compatible with WordPress 4.4.
1.0.7
Added a new shortcode parameter to accept Ogv as a video source format.
1.0.6
Added a new shortcode parameter to accept WebM as a video source format.
1.0.5
Updated the Videojs library to 5.0.0
1.0.4
Videojs HTML5 Player is now compatible with WordPress 4.3
1.0.3
Added an option to mute the audio output of a video
Added an option to loop a video
1.0.2
Added an option to show/hide controls
Added an option to set preload attribute
1.0.1
First commit
Мета
Версия: 1.1.9
Обновление: 4 месяца назад
Активных установок: 10 000+
Версия WordPress: 4.2 или выше
Совместим вплоть до: 6. 1.1
Языки:
Dutch, Dutch (Belgium), English (Australia), English (Canada), English (New Zealand), English (South Africa), English (UK), English (US), German, Italian, Spanish (Colombia), Spanish (Ecuador), Spanish (Mexico), Spanish (Spain), Spanish (Venezuela) и Turkish.
Перевести на ваш язык
Метки:
embedHTML5playervideovideojs
Дополнительно
Оценки
Посмотреть все
5 звёзд
12
4 звезды
4
3 звезды
1
2 звезды
0
1 звезда
0
Войдите, чтобы оставить отзыв.
Участники
Noor Alam
Поддержка
Решено проблем за последние 2 месяца:
0 из 3
Перейти в форум поддержки
Пожертвование
Would you like to support the advancement of this plugin?
Пожертвовать на развитие плагина
Начало работы с Video.js — Video.js: The Player Framework
Существует несколько способов начать работу с Video.js (в настоящее время версия 8.0.4), но вам следует выбрать тот, который лучше всего подходит для вашего конкретного случая использования.
Наши друзья из Fastly достаточно любезны, чтобы предоставить хостинг для всех необходимых файлов для Video.js в своей сети доставки контента. Использование этих размещенных файлов, вероятно, является самым простым способом начать работу с Video.js, вам просто нужно включить следующие ссылки на свою страницу.
Для просмотра этого видео включите JavaScript и рассмотрите возможность перехода на
веб-браузер, который
поддерживает видео HTML5
Для более продвинутых рабочих процессов рекомендуется установка через npm
$ npm install --save-dev video.js
Начиная с v7, мы больше не будем поддерживать версии Microsoft Internet Explorer до IE 11, включая IE 8, 9 и 10. Microsoft прекратила поддержку этих версий более двух лет назад, многие считают, что они не соответствуют современным стандартам безопасности, и они составляют менее 0,1% использования браузера Video.js.
Для версий Video.js до v7 есть несколько общих моментов, о которых следует помнить независимо от того, как вы в конечном итоге включите Video.js в свой проект. Основная кодовая база использует несколько современных функций Javascript (ES5), поэтому, если вы хотите поддерживать IE8, вам необходимо включить прокладку ES5. Чтобы упростить задачу, мы создали единый файл, который вы можете включить для поддержки IE8. Независимо от того, где находится основная библиотека Video.js, этот файл должен находиться в папке 9.0015
документа.
Мы включили урезанный пиксель Google Analytics, который отслеживает случайный процент (в настоящее время 1%) проигрывателей, загруженных из CDN. Это позволяет нам увидеть (примерно), какие браузеры используются в реальной жизни, а также другие полезные показатели, такие как ОС и устройство. Если вы хотите отключить аналитику, вы можете просто включить следующий глобальный параметр перед включением Video.js через бесплатный CDN:
Примечание: версия 7 не будет отправлять данные, а версия 6.8 и выше соблюдают флаг браузера «не отслеживать». .
window.HELP_IMPROVE_VIDEOJS = ложь;
Если вы загрузили один из выпусков или установили его через менеджер пакетов, вы, вероятно, заметили, что его содержимое немного отличается от исходного кода, доступного на Github. Первый включает только скомпилированные файлы, необходимые для использования Video.js, а второй включает исходный код, используемый для создания этих файлов.
Дистрибутив Video.js — это то, что вы найдете, если загрузите выпуск или установите его через менеджер пакетов.
Этот пакет включает в себя все, что вам нужно для использования Video.js на рабочем сайте. По умолчанию мы связываем Video.js с отличным VTT.js от Mozilla. Если вам по какой-либо причине не нужны функции VTT.js, вы можете использовать одну из копий Video.js, не включающую VTT.js. У них novtt в названии и находится в каталоге alt/. Шрифт / включает в себя все сгенерированные файлы шрифтов значков из проекта Videojs Font. lang/ содержит все сгенерированные файлы перевода.
Исходный код — это все, что вы найдете при просмотре git-репозитория Video.js. Сюда входят все исходные файлы и любые инструменты, необходимые для создания готовой к работе версии Video.js, а также полезные инструменты разработки, такие как изолированные примеры.
Большая часть корневого исходного каталога представляет собой конфигурации JSON для различных менеджеров пакетов, потому что Internet. Скорее всего, важные вещи, которые вы ищете, находятся в src/ и build/ . src/ содержит все исходные файлы как для JS проигрывателя, так и для базового скина, а каталог build/ содержит различные задачи grunt, а также основной файл сборки grunt.js .
Перед началом работы вам необходимо установить Node.js. Смотрите CONTRIBUTING.md для более подробной информации.
Готовое использование Video.js — это хорошо, но мы считаем, что лучше сделать его самостоятельно. Плагины и скины позволяют полностью настроить ваш плеер.
Обложка проигрывателя полностью построена из HTML и CSS, в том числе при использовании Flash и других проигрывателей, таких как YouTube.
Изменения скина могут быть такими же простыми, как выравнивание кнопки воспроизведения по центру (вы можете просто добавить класс vjs-big-play-centered к тегу видео), или такими сложными, как создание совершенно новых макетов. Мы создали проект codepen, где вы можете исследовать различные изменения.
Темы домашней страницы
Темы домашней страницы взяты из библиотеки тем Videojs. Чтобы использовать их в проигрывателе, импортируйте CSS, а затем добавьте соответствующий класс в тег видео. Например, если вы хотите использовать тему «Город», вы можете настроить свой HTML следующим образом:
Отличным местом для начала является дизайнер скинов Video.js, но в конце дня мы предлагаем использовать каскадный аспект CSS, чтобы просто переопределить части дизайна, которые вы хотите настроить.
Video.js сам по себе очень прост. Он поддерживает основные функции воспроизведения видео и аудио и гарантирует, что они работают одинаково в разных технологиях воспроизведения («технологиях»). Любые более продвинутые функции создаются в виде плагинов, включая списки воспроизведения, аналитику, рекламу и поддержку расширенных форматов, таких как HLS и DASH. Посетите страницу плагинов, чтобы узнать, что доступно.
Плагины Video.js
Плагин Nuevo для проигрывателя Videojs
Платформа проигрывателя Videojs — это проект, созданный сообществом, который может обрабатывать самые профессиональные варианты использования и используется на тысячах видео-сайтов. Библиотека с открытым исходным кодом для работы с видео в Интернете с десятками доступных плагинов делает Videojs самым передовым и самым популярным проигрывателем HTML5 на сегодняшний день.
Что такое Nuevo Plugin & Skins?
Плагин Nuevo представляет собой набор расширенных оригинальных функций и параметров проигрывателя, объединенных в один файл плагина javascript относительно небольшого размера. Последняя версия плагина Nuevo — 10.4.0 (21-02-2023) и подходит для версии Videojs 7x. Примеры и демонстрации, используемые на нашем веб-сайте, используют версию videojs 7.21.1 (21-11-2022)
Представленные скины плеера для Videojs имеют уникальный, полностью индивидуальный дизайн, оптимизированный для мобильных устройств на основе современной таблицы стилей css и javascript. код. Скины корректно работают только с плагином Nuevo, поскольку для них требуются определенные кнопки и порядок элементов панели управления, управляемый с помощью кода javascript. Все параметры плагина Nuevo, примеры кода настройки проигрывателя перечислены на специальной странице веб-сайта с онлайн-документацией. История версий плагина Nuevo доступна здесь и на отдельных демонстрационных страницах.
Основные характеристики
Собственное изображение логотипа и небольшой значок логотипа на панели управления.
Средство выбора качества видео для стандартного MP4 и автоматическое средство выбора качества для потоков HLS и DASH
Контейнер адаптивных связанных видео
Лучшие сервисы обмена, постоянные ссылки и контейнеры встроенных ссылок
Параметр отображения миниатюр над полосой прогресса
Альтернативные миниатюры предварительного просмотра на основе VTT
Параметр пользовательского контекстного меню
Быстрый выбор качества автоматического выбора HLS и DASH-MPEG Запомнить последний том
Уникальный список воспроизведения видео и оригинальный список воспроизведения Ui
Однако, идея плеера в использовании семантики и его небольшой размер очень хороши. Для небольших проектов он мог бы подойти идеально.
js HTML5 Player is a user-friendly plugin that supports video playback on desktop and mobile devices. It makes super easy for you to embed both self-hosted video files or video files that are externally hosted using Video.js library.
js HTML5 Player Add-onscom/wp-content/uploads/videos/myvid.mp4" webm="https://example.com/wp-content/uploads/videos/myvid.webm" ogv="https://example.com/wp-content/uploads/videos/myvid.ogv"]
com/wp-content/uploads/videos/myvid.mp4" webm="https://example.com/wp-content/uploads/videos/myvid.webm" ogv="https://example.com/wp-content/uploads/videos/myvid.ogv"]
So It is recommended that you enable autoplay for a video with no controls.
js HTTP Streaming. It allows you to play HLS, DASH, and other HTTP streaming protocols with Video.js, even where they are not natively supported.
1.1
net/8.0.4/video-js.css" rel="таблица стилей" />
<тело>
<видео
контролирует
предварительная загрузка = "авто"
плакат="MY_VIDEO_POSTER.jpg"
настройка данных = "{}"
>
Microsoft прекратила поддержку этих версий более двух лет назад, многие считают, что они не соответствуют современным стандартам безопасности, и они составляют менее 0,1% использования браузера Video.js.
Если вы хотите отключить аналитику, вы можете просто включить следующий глобальный параметр перед включением Video.js через бесплатный CDN:
svg
│ ├── VideoJS.ttf
│ └── VideoJS.woff
├── язык/
├── видео-js-
Мы создали проект codepen, где вы можете исследовать различные изменения.
Он поддерживает основные функции воспроизведения видео и аудио и гарантирует, что они работают одинаково в разных технологиях воспроизведения («технологиях»). Любые более продвинутые функции создаются в виде плагинов, включая списки воспроизведения, аналитику, рекламу и поддержку расширенных форматов, таких как HLS и DASH. Посетите страницу плагинов, чтобы узнать, что доступно.
