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

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

1.VideoJS

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

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

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

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

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

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

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

2.JW Player

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

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

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

3. Media Element.js

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

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

4. Video for Everybody

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

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

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

5. Kaltura HTML5

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

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

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

6. Plyr

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

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

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

7. Elite

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

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

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

8. Ultimate

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

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

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

9. jPlayer

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

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

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

10. Elmedia

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

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

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

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

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

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

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

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

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