Плеер для сайта HTML5 - 15 лучших решений

В этой статье мы собрали лучшие плееры для сайта HTML5 и плагины под них. Эти плееры могут воспроизводить видео из YouTube или Dailymotion на сайте.

1.VideoJS

1.VideoJS

VideoJS– это бесплатный, адаптивный онлайн плеер видео с открытым исходным кодом.Он способен использовать Flash или другую технологию воспроизведения онлайн-видео (например, Silverlight).

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

Это лучший бесплатный видеоплеер для публикации видео. Он также реализован в виде плагина для WordPress.

Особенности:

  • Шаблонизатор – построен на основе HTML и CSS. Вы также можете использовать дизайнер обложек.
  • Плагины –данный видеоплеер поддерживает несколько плагинов и продвинутых форматов, таких как HLS и DASH. Список плагинов доступен на этой странице.

При помощи плагинов плеер может быть значительно усовершенствован. Некоторые расширения для этого плеера:

  • Analytics – позволяет следить за событиями Google Analytics в плеере video.js.
  • Playlist – реализует поддержку плейлистов в video.js.
  • Brand – добавляет логотип в панель управления плеером.
  • Поддержка Chromecast.

2.JW Player

2.JW Player

JW Player поддерживает воспроизведение HTML5 видео и предлагает большое количество инструментов от аналитики до настроек доступности. А также набор кнопок управления видео в HTML5. Это лучший плеер для сайта. Его также можно использовать в WordPress и как альтернативу видеоплееру YouTube.

Инструменты: JW Player, предлагает широкий набор инструментов, доступный через расширения. Плеер имеет широкие возможности настройки режимов работы и внешнего вида, а также встроенный API.

Также доступны плагины JW Player для большинства популярных CMS.

3. Media Element.js

Media Element.js

MediaElement.js– это jQuery-плагин, который позволяет использовать тег video в сочетании с файлом, сохраненным в формате AVC. Если плеер не поддерживает видеоформаты html5, плагин заменяет его на Flash или Silverlight.

Плагин предоставляет стандартные кнопки управления воспроизведением, обложки и полноэкранное видео. А также позволяет добавлять уникальные опции: повторение воспроизведения, автоматический перевод (предоставленный Google Translate), демонстрация заставки после видео (отображает заданный HTML код). И даже виртуальную фоновую подсветку, которая обрамляет рамку видео подходящими цветами, взятыми из него во время воспроизведения (только в версии HTML5 видеоплеера).

4. Video for Everybody

Video for Everybody

Video for Everybody– это одно из самых ранних решений для поддержки HTML5 и Flash видео. Оно состоит из базовой разметки, которая использует HTML5 для перехода к следующему поддерживаемому формату. Для этого используется элемент <video>.

Особенности:

  • Настраиваемые кнопки управления
  • Поддержка видео в формате WebM.

5. Kaltura HTML5

Kaltura HTML5

Бесплатный HTML5 видеоплеер с открытым исходным кодом, который позволяет создавать настраиваемые кроссбраузерные и кроссплатформенные обложки для плеера. Существует множество шаблонов, встроенных в плеер Kaltura.

Особенности:

  • Мультиплатформенная поддержка.
  • Высокая производительность.
  • Инструменты для рекламы и аналитики – рекламные форматы включают в себя VAST 3.0, а также интегрированные плагины для Google DoubleClick DFP, FreeWheel, Ad Tech, Eye Wonder, AdapTV, Tremor Video и других.

6. Plyr

Простой настраиваемый плеер. Он поддерживает HTML5 видео из YouTube и Vimeo.

Plyr

Особенности:

  • Доступность – в плеере реализована поддержка заголовков VTT и устройств для чтения с экрана.
  • Настраиваемый – возможность изменять плеер по своему усмотрению.
  • Адаптивность – плеер изменяет размер в зависимости от диагонали экрана пользовательского устройства.
  • HTML видео и аудио – поддержка аудиоформатов.
  • Встраиваемое видео –возможность проигрывать видео из YouTube и Vimeo.
  • Прямые трансляции – поддержка прямых трансляций через hls.js, Shaka и dash.js.

7. Elite

Адаптивный настраиваемый плеер для WordPress с поддержкой рекламных форматов и воспроизведения видеороликов с YouTube, Vimeo и Google Диска.

Elite

Особенности:

  • Простота установки.
  • Поддержка плейлистов/каналов YouTube и Vimeo.
  • Поддержка YouTube 360 VR.
  • Поддержка прямых трансляций (HLS .m3u8)
  • Загрузка видео на Google Диск.
  • Несколько форматов рекламы: pre-roll (до видео), mid-roll (в середине), post-roll (после), всплывающая реклама.
  • Поддержка форматов изображений Jpg, Png, gif.

8. Ultimate

Ultimate

Адаптивный видео/аудио плеер с функцией воспроизведения видео с YouTube или Vimeo. Он поддерживает только форматы mp4/mp3, работает на мобильных и настольных устройствах. Это платный плеер, и вы можете приобрести его здесь.

Особенности:

  • Шифрование URL видео, которое позволяет скрыть адрес источника от пользователей.
  • Адаптивность.
  • Поддержка нескольких вариантов качества видео.
  • Приватные / защищённые паролем видео.
  • Поддержка HLS / m3u8 видео.
  • Поддержка панорамного видео и VR.
  • Функция распространения видеороликов в социальных сетях.
  • Возможность добавить логотип компании в виде водяного знака.
  • Опция загрузки видео.

9. jPlayer

jPlayer

Бесплатный HTML видеоплеер с открытым исходным кодом, написанный на JavaScript. Он простой и лёгкий, без ограничений использования по лицензии.

Особенности:

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

10. Elmedia

Elmedia

Elmedia– плеер под Mac OS, воспроизводящий все типы видео в самом плеере, в том числе и онлайн. Вы сможете смотреть видео с Vimeo, Dailymotion, Facebook и т.д. А также загружать видеоролики с этих сайтов.

Особенности:

  • Поддержка аппаратного ускорения.
  • Вы сможете смотреть видео из YouTube, Vimeo, Dailymotion, не открывая браузер.
  • Поддержка SWF (в PRO-версии).
  • Создание скриншотов с видео.
  • Загрузка видео (в PRO-версии).
  • Опция извлечения аудио из видео.

11. Chameleon – HTML5 видео плеер с поддержкой Flash

Chameleon – HTML5 видео плеер с поддержкой Flash

HTML5 видео – это одна из самых крутых новых возможностей. Но Internet Explorer не поддерживает полноэкранное воспроизведение.

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

Особенности:

  • Две обложки на выбор.
  • Построен на CSS и шрифтов иконок. Это гарантирует отличное отображение на Retina-экранах.
  • Может использоваться на адаптивных сайтах.
  • Настраиваемое выпадающее меню, которое может включать в себя ссылку на авторские права.
  • Иконки социальных сетей, чтобы пользователи могли делиться вашим видео.

12. Afterglow

Afterglow

Простой видеоплеер с дополнительными инструментами. Он легко встраивается и настраивается, с открытым исходным кодом.

Особенности:

  • Кроссбраузерный: работает в большинстве браузеров и устройств. IE поддерживается вплоть до IE9.
  • Адаптивный по умолчанию.
  • Переключение разрешения.

Топ плагинов HTML5-видеоплееров для WordPress

13. Плеер Videojs HTML5

Плеер Videojs HTML5 поддерживает воспроизведение видео с сайтов на настольных и мобильных устройствах. Он обеспечивает простое встраивание внешних файлов через библиотеку Videojs.

Особенности:

  • Встраивание видео, сохраненного в формате mpeg4 в запись/страницу на WordPress-сайте.
  • Адаптивный.
  • Добавление HTML5 видео, которые совместимы со всеми основными браузерами.
  • Добавление видео с картинками-постерами.

14. Video Embed & Thumbnail Generator

Плагин видеоплеера с возможностью переключения на Flash для браузеров, не поддерживающих HTML5 видео.

Особенности:

  • Video.js (файлы включены в плагин);
  • Плеер по умолчанию использует MediaElement.js, который был представлен в WordPress 3.6
  • JW Player 6.

15. FV Flowplayer

Бесплатная, лёгкая в использовании альтернатива для встраивания видео в формате FLV и MPEG4 на страницы или в записи.

Особенности:

  • Автоматическая проверка кодировки видео.
  • Адаптивный.
  • Настраиваемые начальный и конечный экраны. Вы можете использовать персональный дизайн до и после видео.
  • Все дополнительные функции доступны в стандартной сборке (Google Analytics, горячие клавиши, субтитры, замедленное воспроизведение, случайная перемотка, поддержка Retina-дисплеев).
  • Доступна профессиональная лицензия для одного сайта (JW Player требует пакет из пяти лицензий для доступа ко всей функциональности)
  • Кроссбраузерный.
  • Поддержка Amazon S3, CloudFront и других сетей доставки контента.
  • Полностью брендируемый.
  • Поддерживает продвинутую видео рекламу.