Плеер для сайта 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 и других сетей доставки контента.
  • Полностью брендируемый.
  • Поддерживает продвинутую видео рекламу.

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

Пожалуйста, оставьте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!

Вадим Дворниковавтор-переводчик статьи «"15 Best HTML5 Video Players in 2018"»