В этой статье мы собрали лучшие плееры для сайта HTML5 и плагины под них. Эти плееры могут воспроизводить видео из YouTube или Dailymotion на сайте.
1.VideoJS
VideoJS – это бесплатный, адаптивный онлайн плеер видео с открытым исходным кодом.Он способен использовать Flash или другую технологию воспроизведения онлайн-видео (например, Silverlight).
Плеер включает в себя базовый функционал для воспроизведения: автоматический старт и предварительную загрузку. Он также использует JavaScript для реализации кроссбраузерности.
Это лучший бесплатный видеоплеер для публикации видео. Он также реализован в виде плагина для WordPress.
При помощи плагинов плеер может быть значительно усовершенствован. Некоторые расширения для этого плеера:
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
5. Kaltura HTML5
6. Plyr
Простой настраиваемый плеер. Он поддерживает HTML5 видео из YouTube и Vimeo.
7. Elite
Адаптивный настраиваемый плеер для WordPress с поддержкой рекламных форматов и воспроизведения видеороликов с YouTube, Vimeo и Google Диска.
8. Ultimate
9. jPlayer
Бесплатный HTML видеоплеер с открытым исходным кодом, написанный на JavaScript. Он простой и лёгкий, без ограничений использования по лицензии.
10. Elmedia
Elmedia – плеер под Mac OS, воспроизводящий все типы видео в самом плеере, в том числе и онлайн. Вы сможете смотреть видео с Vimeo, Dailymotion, Facebook и т.д. А также загружать видеоролики с этих сайтов.
11. Chameleon – HTML5 видео плеер с поддержкой Flash
HTML5 видео – это одна из самых крутых новых возможностей. Но Internet Explorer не поддерживает полноэкранное воспроизведение.
Chameleon решает эту проблему. Когда браузер не может переключиться в полноэкранный режим, используется Flash.
12. Afterglow
Простой видеоплеер с дополнительными инструментами. Он легко встраивается и настраивается, с открытым исходным кодом.
Топ плагинов HTML5-видеоплееров для WordPress
13. Плеер Videojs HTML5
Плеер Videojs HTML5 поддерживает воспроизведение видео с сайтов на настольных и мобильных устройствах. Он обеспечивает простое встраивание внешних файлов через библиотеку Videojs.
14. Video Embed & Thumbnail Generator
Плагин видеоплеера с возможностью переключения на Flash для браузеров, не поддерживающих HTML5 видео.
15. FV Flowplayer
Бесплатная, лёгкая в использовании альтернатива для встраивания видео в формате FLV и MPEG4 на страницы или в записи.
Дайте знать, что вы думаете по этой теме статьи в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, отклики, лайки!
Пожалуйста, оставьте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!
Youtube Player — создание собственного плеера на JavaScript
Вступление
Как многие знают, для вставки собственно видео на свой сайт существует простая возможность «скопировать HTML код» при нажатии на видео правой кнопкой в Youtube и получить в буфере iframe:
Таким iframe как раз и можно управлять на своем сайте. Далее расскажу, как это сделать на примере формирования своих элементов управления и обработчиков событий на Javascript + Jquery.
Страница с плеером — верстка
Сначала создаем простую html-страничку, в которой будут несколько div-block’ов, на которые мы привяжем наш плеер.
И самое главное — javascript.
Для создания и инициализации плеера через iframe api необходим div с идентификатором, к которому будет привязываться iframe с видео. В нашем случае это
Управление плеером — JavaScript
Все равно, куда вы его положите, но главное ниже подключаемых библиотек (для простоты можно прямо в html-документе).
А теперь как это работает. Для начала создаем плеер — для этого нужна обязательная функция:
И events: <'onReady': onPlayerReady>— хук, цепляющий метод для обработки события готовности. Дальше как раз идет эта функция, в ней собраны методы для обработки событий и т.п.
Теперь что касается объекта player. Он создан и им можно управлять, вызывая методы, как в панели управления в html — кнопочки.
Кнопки play и pause
— play
— pause
Здесь все просто плей-пауза
Кнопки back и next
Эти кнопки нужны для переключения видео в плейлисте.
Для создания плейлиста есть кнопка
— которая вызывает функцию по клику.
Эта функция вызывает метод player.loadPlaylist (<. >)
с параметрам playlist’: [‘9HPiBJBCOq8’, ‘Mp4D0oHEnjc’, ‘8y1D8KGtHfQ’, ‘jEEF_50sBrI’] — список видео в плейлисте. ‘listType’: ‘playlist’ — тип, ‘index’: 0 — индекс видео, с которого начать, остальные параметры очевидны. Так загружаются плейлисты. Также плейлист можно инициализировать прямо в начале, тогда нужно в параметрах объекта YT.Player прописать playerVars: < 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0, playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'] >,
Также реализованы кнопки управления громкостью
— при нажатии включает или вырубает звук. Используются методы по аналогии:
Здесь кратко описаны функции для работоспособности панельки. В итоге — Кнопки Play, Pause, есть кнопка загрузки плейлиста из 3-х видео, Next и Back для плейлиста, фейдер и линия прогрузки, обновляющееся время, кнопки, демонстрирующие работу громкости, качества и фуллскрин — все это начальные сведения для разработки собственного плеера, взаимодействующего с Youtube Iframe.
Демо вариант доступен Вот тут
При написании статьи использовался мануал от Youtube в котором можно найти расширенное описание работы с Youtube iframe API здесь
Обзор видеоплееров для веба
Однажды по-работе у меня возникла задача сделать исследование рынка существующих веб-плееров, которые можно было бы взять для нашего нового модного проекта. В процессе сформировалось это сравнение.
Я подумал, что кому-то ещё это могло бы оказаться полезным и решил оформить в виде статьи на Хабр.
Веб-плееры с открытым исходным кодом
Video.js
30k загрузок в день) и самый древний (
10 лет репозиторию) веб-плеер.
Его поддерживают 10 мейнтейнеров и онлайн видеоплатформа Brightcove, которая является основным спонсором проекта. Их собственный проприетарный плеер построен на базе video.js.
Быстрые релизные циклы. Разработчики выкатывают новую версию каждую неделю.
Может практически всё, благодаря богатой экосистеме плагинов. Вы можете написать свой плагин и добавить его в каталог. Несколько лет назад мы написали свой плагин для шаринга.
Имеет самый большой вес (486 kB минифицированного кода) среди конкурентов.
jQuery в мире веб-плееров.
Shaka Player
Второй по популярности веб-плеер (
15k загрузок в день). Поддерживается компанией Google, находится в активной разработке, имеет дорожную карту.
Из коробки реализует работу в офлайне.
На основе него сделан проприетарный Kaltura Player (см. ниже).
Это набирающий популярность веб-плеер. В данный момент он занимает третье место по популярности (
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).
Можно сказать, что плеер мёртв. В этот обзор он попал только потому, что часто встречается в других обзорах.
Веб-плееры с закрытым исходным кодом
Эти варианты нам не подходят. Выписал, чтобы просто про них знать.
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, естественно), но примеров никаких ещё нет.
Как встроить видео
Загруженные видео можно разместить на любом сайте или в блоге. Для этого нужно получить код вставки в интерфейсе Видеохостинга или через API.
Код вставки можно получить с помощью такого запроса:
Код вставки содержит iframe-контейнер, в котором отображается плеер с указанным видео. Разместите код вставки на нужной веб-странице. Вы можете настроить размер видео и параметры запуска плеера. Встроенное видео заработает в течение 30 минут.
Как настроить размер видео
Параметры запуска плеера
Список параметров и их значений приведен в таблице ниже. Если параметры не указаны, плеер загрузится с параметрами по умолчанию.
Значение по умолчанию — 0.
Громкость звука в процентах при загрузке плеера.
Может принимать значения от 0 до 100 включительно.
Значение по умолчанию — 0.
При autoplay=1 параметр preload игнорируется.
Останавливать воспроизведение видео при уходе из зоны видимости и начинать воспроизведение при нахождении в ней. Параметр влияет на показ как видеоконтента, так и рекламных роликов. Он может принимать значения:
Префикс для postMessage-сообщений от плеера.
Значение по умолчанию — 0.
Громкость звука в процентах при загрузке плеера.
Может принимать значения от 0 до 100 включительно.
Значение по умолчанию — 0.
При autoplay=1 параметр preload игнорируется.
Останавливать воспроизведение видео при уходе из зоны видимости и начинать воспроизведение при нахождении в ней. Параметр влияет на показ как видеоконтента, так и рекламных роликов. Он может принимать значения:
Префикс для postMessage-сообщений от плеера.
Топ 5 Open Source HTML5 видеоплееров на 2018 год
За короткий срок стандарт HTML5-видео заменил Flash Player и аналогичные сторонние медиаплееры. Ранее, для корректного запуска медиафайлов требовалось приложить немало усилий. Для воспроизведения мультимедиа зачастую нужно было использовать теги и с внушительным списком параметров.
Разница в том, что HTML5 теги аудио и видео воспринимают файлы как изображения. Такие атрибуты, как высота, ширина и автозапуск задаются в тегах как и в любом другом HTML элементе:
Почему стоит выбирать плеер с открытым исходным кодом?
Видеоплееры с открытым исходным кодом предлагают некоторые преимущества над проприетарными плеерами. Многие организации и отдельные пользователи предпочитают открытые приложения ввиду их бесплатности.
Коммерческие видеоплееры c закрытым исходным кодом распространяются путем лицензирования, при котором пользователи должны внести плату и согласиться с различными условиями, прежде чем использовать продукт.
Видеоплееры с открытым исходным кодом можно свободно использовать без лицензионных платежей и длинных соглашений. Стоит также учесть более пристальное внимание к безопасности и устранению ошибок.
Среди дополнительных преимуществ можно выделить следующие:
Бесплатное использование
Медиаплееры с открытым исходным кодом совершенно бесплатны для скачивания и использования широкой публикой, а исходный код можно свободно посмотреть и проанализировать.
Некоторые разработчики open source медиаплееров предоставляют бесплатную пробную версию пакетов программного обеспечения, которые также содержат исходный код.
Малое количество ошибок и их быстрое исправление
Тысячи людей по всему миру просматривают код популярных open source видеоплееров. Таким образом, вероятность обнаружения ошибки, по сравнению с проприетарным медиаплеером, возрастает в разы. Кроме того, обычно, open source сообщества значительно быстрее разрабатывают и внедряют различные исправления и патчи.
Возможность кастомизации
Видеоплееры с открытым исходным кодом можно настраивать и модифицировать в соответствии с конкретными требованиями организации или отдельного пользователя. Что касается видеоплееров с закрытым кодом, то самое большее, что можно сделать, это отправить запросы на добавление функций и новых возможностей в соответствии с вашими потребностями. Решение по реализации остается за компанией-разработчиком.
Неограниченная поддержка
При использовании видеоплеера с открытым исходным кодом можно обратиться к его глобальному сообществу, где разработчики и пользователи всегда готовы ответить на вопросы и дать совет независимо от того, на каком этапе разработки находится приложение. Вы можете найти подробную документацию, вики, обсуждения на форумах, а также написать кому-нибудь на электронную почту или в чат. Всё это абсолютно бесплатно.
Топ 5 плееров с открытым исходным кодом
В этом разделе мы составили список из пяти HTML5 медиаплееров с открытым исходным кодом, которые мы считаем одними из лучших на сегодняшний день.
Plyr — это простой HTML5, Vimeo и YouTube медиаплеер, который поддерживает все современные браузеры. Он легковесный, удобный и настраиваемый. При установке плеера через NPM с помощью команды npm install plyr вы получите полный исходный код приложения.
Ниже приведены примеры кода для HTML5 аудио и видео —
HTML5 Audio
HTML5 Video
Video.js
Video.js — видеоплеер, созданный с использованием HTML5. Он поддерживает HTML5 и Flash видео наряду с Vimeo и YouTube. Воспроизведение видео возможно как на десктопах, так и на мобильных устройствах. Плеер Video.js появился в 2010 году и в настоящее время активно применяется более чем на 200 000 веб-сайтах.
Вы можете бесплатно использовать CDN версию Video.js, добавив следующие теги в документа:
Чтобы поместить видео на страницу, достаточно лишь создать элемент с дополнительным атрибутом data-setup. Как минимум, этот атрибут должен иметь значение ‘<>’, но он также может включать в себя любые параметры Video.js, при условии, что они представляют собой корректный JSON, как показано ниже —
Как только страница загрузится и появится этот элемент, Video.js автоматически установит плеер на страницу.
Afterglow
Afterglow является инструментом, который позволяет создать полностью отзывчивый видеоплеер при помощи различных HTML5 видеоэлементов, прикладывая минимальные усилия.
Afterglow имеет очень простой процесс инициализации и поддерживает различные качества видеоизображения —
MediaElement.js
MediaElement.js — это HTML5 видео и аудио плеер с поддержкой Flash и Silverlight, который имитирует HTML5 MediaElement API и предоставляет одинаковый UI для всех браузеров.
Вместо того, чтобы отображать HTML5-плеер для современных браузеров и Flash-плеер для старых браузеров, MediaElement.js просто обоновляет его, используя пользовательские плагины Flash и Silverlight, имитирующие HTML5 MediaElement API.
Полное руководство по установке MediaElement.js доступно на сайте в разделе “Installaton”, а краткое описание по созданию и использованию MediaElement — в разделе “Usage”. Чтобы посмотреть дополнительные функции, вы можете обратиться к их репозиторию на GitHub.
jPlayer
jPlayer —это бесплатная медиа-библиотека с открытым исходным кодом, написанная на JavaScript.
jPlayer позволяет быстро внедрить кроссплатформенные аудио и видео на веб-страницы при помощи jQuery плагина. Всеобъемлющий API-интерфейс jPlayer позволяет создавать инновационные медиа-решения. jPlayer поддерживается активным open source сообществом разработчиков.
jPlayer имеет отличный PHP-пакет, который можно установить с помощью Composer. Для этого нужно добавить следующие строки в composer.json вашего проекта:
После этого нужно будет выполнить команду:
Composer загрузит все компоненты и установит необходимые файлы в определенную директорию.
Дополнительные видеоплееры, о которых вам стоит знать
На случай, если вам интересно, ниже указаны лучшие HTML5 видеоплееры с закрытым исходным кодом, которые тоже заслуживают внимания:
Cloudinary
Данный HTML5 видеоплеер от компании Cloudinary предназначен в первую очередь для бизнеса и предприятий. Он оптимизирован для лучшего восприятия изображения, поддерживает видео высокого разрешения и адаптивную потоковую передачу.
Тем не менее видеоплеер Cloudinary выделяется среди остальных тем, что он предлагает кодирование и обработку видео, а также услуги хостинга для ваших видеоматериалов.
Все трансформации с видео происходят на лету на уровне плеера. Интеграция на сайт организации происходит очень просто при использовании embed кода.
Встроенная аналитика предоставляет актуальные данные о взаимодействии зрителя с видео в режиме реального времени и отчеты по показам видео с точки зрения конверсии.
JW Player
С некоторых пор JW Player стал поддерживать воспроизведение HTML5 видео. Этот плеер полностью настраиваемый. Он обеспечивает отзывчивость видео на странице и содержит множество функций: от доступа к аналитике до полного управления HTML5 видео.
JW Player уникален в качестве HTML5 видеоплеера для WordPress сайтов. Он также является альтернативным вариантом для видеоплеера Youtube. Кроме того, JW Player поддерживает ряд пользовательских тем. Его многочисленные плагины совместимы с наиболее популярными CMS, что делает интеграцию довольно легкой и быстрой.
HTML5 видеоплеер Kaltura
Kaltura Player — это бесплатный HTML5 видеоплеер с открытым исходным кодом, используемый для создания настраиваемых скинов для разных устройств или браузеров. Скины могут соответствовать дизайну вашего веб-сайта либо дополнять его. Некоторые ключевые особенности плеера Kaltura:
1. Мультиплатформенная поддержка
2. Широкая функциональность
3. Поддержка рекламы и аналитики
Заключение
Сегодня на рынке, несомненно, доступен широкий спектр HTML5 видеоплееров как с открытым исходным кодом, так и проприетарных. Нужно лишь найти подходящий видеоплеер, отвечающий всем вашим требованиям.
Вероятнее всего, вы не хотели бы использовать слишком громоздкое приложение, или же, что еще хуже, недостаточно функциональное для решения поставленной задачи.
