Js video player: Video.js — Make your player yours

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

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

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

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

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, устаревших статей, обзоров и плагинов. Однако, то, как активно его разрабатывают в данный момент, как много в нём уже решённых задач и реализованных фич приводит к мысли, что не зря он до сих пор держит марку самого популярного веб-плеера.

Video.

js – видеоплеер на HTML5 с открытым исходным кодом

• Статья

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

• 21 августа 2014
• 1 мин

Алексей Ница

Выпускник МГТУ им.

Новый HTML5-видеоплеер Video.js позволит разработчикам и дизайнерам создавать и настраивать внешний вид плеера, а также с легкостью встраивать видео на страницу сайта, так же, как это происходит сейчас с изображением, используя только тег <video>.

Video.js – это библиотека JavaScript и CSS, которая облегчает работу по созданию HTML5-видео. Библиотеку можно также назвать HTML5-видеоплеером. Video.js обеспечивает управление и создание внешней оболочки плеера в HTML/CSS, а также исправляет несоответствия в разных браузерах и добавляет дополнительные функции, такие как полноэкранный режим и наличие субтитров.

Video.js позволяет переключаться на Flash тогда, когда недоступен HTML5, а также обеспечивает JavaScript API для взаимодействия с видео.

Что такое HTML5 видео?

HTML – это язык разметки, из которой состоит любая страница в Интернете. Новейшая версия, HTML5, включает спецификации для тега <video>, который дает возможность веб-разработчикам добавлять видео на страницу таким же образом, как это делается с изображением. Для того чтобы это работало, разработчики веб-браузеров создали встроенные функциональные возможности воспроизведения видео в своих браузерах.

Фрагмент интерфейса сайта Video.js.

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

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

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

Сайт: Video.js.

Самое популярное

• Статья

Обращение к читателям и активистскому сообществу

• Интервью

Григорий Свердлин, экс-директор «Ночлежки», о жизни после ухода из фонда и новом антивоенном проекте

• Статья

Они звонят среди ночи, вляпываются в истории, не слушают юристов и пропадают… Как быть?

Будьте с нами на связи, независимо от алгоритмов

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

Videojs HTML5 Player – Плагин WordPress

• Детали
• отзывов
• Монтаж
• Поддерживать
• Развитие

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

Video.js Функции проигрывателя HTML5

• Встраивайте видеофайлы MP4 в запись/страницу или в любое место на вашем сайте WordPress
• Встраивайте адаптивные видеоролики для лучшего взаимодействия с пользователем при просмотре с мобильного устройства
• Встраивайте видео HTML5, совместимые со всеми основными браузерами
• Вставка видео с постерами
• Встраивание видео с помощью проигрывателя videojs
• Автоматически воспроизводить видео при отображении страницы
• Встраивайте видео, загруженные в вашу медиатеку WordPress, используя прямые ссылки в шорткоде
• Настройка не требуется, просто установите и начните встраивать видео
• Легкий и совместимый с последней версией WordPress
• Чистый и стильный плеер без водяных знаков
• запасные варианты для других поддерживаемых HTML5 типов файлов (WebM, Ogv)
• HTTP-поток

Video.

js Надстройки HTML5 Player

• Отключить правый клик

Как использовать Video.js HTML5 Player

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

 [videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4"]
 

Здесь «url» — это расположение исходного видеофайла MP4 (в кодировке H.264). Вам необходимо заменить образец URL-адреса фактическим URL-адресом видеофайла.

Параметры короткого кода видео

В коротком коде поддерживаются следующие параметры.

WebM

Вы можете указать видеофайл WebM в дополнение к исходному видеофайлу MP4. Этот параметр является необязательным.

 [videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" webm="https://example.com/wp-content/uploads/videos/myvid.webm" ]
 

Ogv

Вы можете указать видеофайл Ogv в дополнение к исходным видеофайлам MP4 и WebM. Этот параметр является необязательным.

 [videojs_video url="https://example.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"]
 

Ширина

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

 [videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4"]
 

Предварительная загрузка

Указывает, следует ли и каким образом загружать видео при загрузке страницы. По умолчанию стоит «авто» (видео должно загружаться полностью при загрузке страницы). Другие варианты:

Элементы управления

Указывает, что должны отображаться элементы управления видео. По умолчанию «истина». Чтобы скрыть элементы управления, установите для этого параметра значение «false».

 [videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" control="false"]
 

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

Автовоспроизведение

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

 [videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" autoplay="true"]
 

Плакат

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

 [videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" poster="https://example.com/wp-content/uploads/poster.jpg"]
 

Цикл

Заставляет видеофайл вернуться к началу после завершения и автоматически продолжить воспроизведение.

 [videojs_video url="https://example. com/wp-content/uploads/videos/myvid.mp4" loop="true"]
 

Без звука

Указывает, что аудиовыход видео должен быть отключен.

 [videojs_video url="https://example.com/wp-content/uploads/videos/myvid.mp4" muted="true"]
 

Video.js HTTP Streaming

Плагин поддерживает формат файла m3u8, который можно использовать для Video.js HTTP Streaming. Он позволяет воспроизводить HLS, DASH и другие протоколы потоковой передачи HTTP с помощью Video.js, даже если они изначально не поддерживаются.

 [videojs_video url="https://example.com/wp-content/uploads/videos/myvid.m3u8"]
 

Для получения подробной документации посетите страницу плагина Videojs HTML5 Player

• Video.js Player Demo

1. Перейдите на экран «Добавить новые плагины» в панели управления WordPress
2. Перейдите на вкладку загрузки
3. Найдите файл плагина (videojs-html5-player.zip) на своем компьютере
4. Нажмите «Установить сейчас», а затем нажмите кнопку активации

Что такое Video.

js?

Video.js — это веб-видеоплеер, созданный с нуля для мира HTML5. Он поддерживает воспроизведение видео HTML5 на настольных и мобильных устройствах.

Как запустить Video.js?

Установите плагин Video.js и добавьте шорткод к своей записи/странице WordPress.

Является ли Video.js открытым исходным кодом?

Да.

Поддерживает ли подключаемый модуль Video.js протокол HLS?

Да.

Поддерживает ли плагин Video.js потоковую передачу по HTTP?

Да.

Какие медиаформаты поддерживает плагин Video.js?

MP4, WebM, Ogv и M3U8.

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

Отличный плагин, активная разработка, отсутствуют некоторые функции (потоки hls).

Оцениваю стабильное воспроизведение видео. Однако есть некоторые нарекания. -Отсутствует функция вывода структурированных данных движущихся изображений. -Помимо mp4, в качестве опций можно установить webm и Ogv, но нельзя указать порядок, в котором они читаются. (*Даже если вы хотите загрузить webm в браузер, который может читать webm, MP4 является приоритетным описанием, поэтому нет смысла подготавливать файл в формате webm.) Мы стремимся быть в состоянии ответить на эти вопросы.

Лучший способ быстро добавить видео в сообщение. И всплывающее окно тоже. Спасибо!!!!

Отличный плагин, спасибо, отлично работает на ноутбуке/смартфоне (Android) Это позволяет видео LearnPress быть адаптивным (они изначально не адаптивные).

Мне нравится

Прочитать все 17 отзывов

«Videojs HTML5 Player» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

Авторы

• Нур Алам

1.

1.8

• Добавлена ​​поддержка дополнения «Отключить правый клик».

1.1.7

• Добавлена ​​поддержка потоковой передачи HTTP Video.js.

1.1.6

• Video.js обновлен до версии 7.14.3.

1.1.5

• Videojs обновлен до версии 7.10.1.

1.1.4

• Сделаны некоторые улучшения безопасности в плагине

1.1.3

• Кнопка воспроизведения Videojs теперь по умолчанию центрирована.

1.1.2

• Videojs HTML5 Player теперь совместим с WordPress 4.9.

1.1.1

• Добавлена ​​поддержка атрибута playsinline, который позволяет воспроизводить видео в режиме inline на iOS (видео не будет автоматически переходить в полноэкранный режим при начале воспроизведения).

1.1.0

• Сценарий Videojs теперь ставится в очередь в нижнем колонтитуле, чтобы избежать ошибки установки JavaScript.

1.0.9

• Сделал jQuery зависимостью для сценария videojs.

1.0.8

• Обновлены файлы перевода, чтобы подключаемый модуль мог использовать языковые пакеты.
• Videojs HTML5 Player теперь совместим с WordPress 4.4.

1.0.7

• Добавлен новый параметр шорткода для принятия Ogv в качестве формата источника видео.

1.0.6

• Добавлен новый параметр шорткода для принятия WebM в качестве формата источника видео.

1.0.5

• Библиотека Videojs обновлена ​​до версии 5.0.0

1.0.4

• Videojs HTML5 Player теперь совместим с WordPress 4.3

1.0.3

• Добавлена ​​возможность отключения аудиовыхода видео
• Добавлена ​​возможность зацикливать видео

1.0.2

• Добавлена ​​возможность показать/скрыть элементы управления
• Добавлена ​​возможность установить атрибут предварительной загрузки

1.

0.1

• Первая фиксация

Мета

• Версия: 1.1.8
• Последнее обновление: 2 месяца назад
• Активные установки: 10 000+
• Версия WordPress: 4.2 или выше
• Протестировано до: 6.0.3
• Языки:

  нидерландский (Бельгия), английский (Австралия), английский (Канада), английский (Новая Зеландия), английский (ЮАР), английский (Великобритания), английский (США), немецкий, итальянский, испанский (Колумбия), испанский (Эквадор), испанский (Мексика), испанский (Испания), испанский (Венесуэла) и турецкий.

  Перевести на ваш язык

• Теги:

  embedHTML5playervideovideojs

• Расширенный вид

Служба поддержки

Проблемы, решенные за последние два месяца:

3 из 3

Посмотреть форум поддержки

Пожертвовать

Хотите поддержать продвижение этого плагина?

Пожертвовать этому плагину

Видеоплеер

— Примеры Vue.

js

видео-плеер Приложение интерфейс Попутный ветер CSS Разнообразный Игры Календарь Картинки Nuxt Сделать Приборная доска Шаблон редактор Графики Веб-сайт Сборщик Стол Вите Форма Шаблон администратора Машинопись Прокрутить Вход Слайдер Инструмент Модальный Стартер Выбирать Меню API Тяга Диалог Загрузка Анимация Начальная загрузка Администратор Макет Время Уведомление Калькулятор Поиск Музыка Карты Javascript Проверка Выскакивать Ларавель Уценка Покупка

Компонент видеоплеера, созданный на Vue

04 апреля 2022 г.

Легко встраивайте проигрыватель YouTube и лениво загружайте видео, чтобы сэкономить ресурсы и уменьшить первоначальный размер загрузки.

29 марта 2021 г.

Это компонент для Vue.js, позволяющий легко использовать YouTube, Vimeo, DailyMotion, Coub API для встраивания iframe.

07 августа 2020 г.

Крошечная оболочка vue для поддержки собственного режима «картинка в картинке».

17 июня 2020 г.

Легкий видеоплеер для Vue.js.

23 сентября 2019 г.

Плагин vue video.js 7, так что вы можете легко воспроизводить видео m3u8 в html5.

18 сентября 2019 г.

Это видеокомпонент html5, созданный на VueJS для быстрого добавления видео с заполнителями и вступлениями.

06 сентября 2019 г.

Компонент Vue.js для отложенной загрузки видео с YouTube.

02 сентября 2019 г.

Динамический/реактивный рендеринг видео и аудио.

04 мая 2019 г.

Прикоснитесь к себе на пути Vue.

08 декабря 2018 г.

Используйте video. js с vue для воспроизведения потоков RTMP && HLS &&.

31 октября 2018 г.

компонент xgplayer vue.

18 сентября 2018 г.

Встроить видео с YouTube.

03 сентября 2018 г.

Vue PWA: YouTube Player для детей: воспроизводить только одобренные плейлисты

10 августа 2018 г.

Плагин Vue2, облегчающий воспроизведение видео.

07 июля 2018 г.

Игривый пример Vuejs, Bootstrap 4 и Font Awesome. Креативный способ отображения YouTube, Vimeo или других встроенных видео.

18 мая 2018 г.

Набор компонентов Vue для видео- и аудиоплеера plyr.

29 апреля 2018 г.

Простой компонент для мощного API. vue-youtube предоставляет простой слой для использования вашего воображения в API YouTube IFrame Player.