Некоторое время назад была эпоха Flash плеера. Большинство компаний в 2009 году заявляли, что 99% пользователей используют его на своих ПК. Первым отказался от этого проигрывателя Стив Джобс, когда выпустил свой новый iPhone. Причиной была слабая защищенность и неработоспособность на сенсорных экранах. Огромное количество контента было создано с помощью этой технологии, но эпоха подошла к концу в начале 2021 года. Заменой стали новые стандарты, одним из самых популярных является HTML5. На сегодняшний день плеер для сайта HTML5 широко используется для встраивания видео на веб-сайты.
Можно использовать бесплатные плееры для сайта с открытым исходным кодом или премиальные версии. Плееры фильмов для сайта включают в себя различные инструменты для коммерческого использования, настройки встраиваемой рекламы. Существуют также популярные встроенные проигрыватели: YouTube, Vimeo. По некоторым причинам они плохо подходят для управления и монетизации видео на вашем сайте. Поэтому остановимся на бесплатных и премиальных HTML5 плеерах. Не обращайте внимания на порядок списка.
1. Plyr
Простой Html плеер для сайта. Поддерживает субтитры и устройства для чтения с экрана. Позволяет работать с Vimeo и YouTube. Открытый исходный код и условно-бесплатное распространение в сочетании с удобностью и простотой позволяют назвать его одним из лучших для новичков. Есть встроенный полноэкранный режим, настройки качества изображения, поддерживает HLS, DASH, Shaka. Занимает очень мало места на сервере. Вставить плеер на сайт можно через команду <video>. Детали можно узнать тут https://plyr.io/.
2. Video.js
Самый популярный встраиваемый плеер на сайт. Используется более чем на 300 000 веб-сайтах, многие из которых имеют внушительный трафик. Очень быстро воспроизводит видео на мобильных устройствах и персональных компьютерах. Поддерживает различные плагины и форматы: HTTP Live Streaming и Dynamic Adaptive Streaming over HTTP, WebM. Можно бесплатно использовать CDN. В сообществе активно создаются и распространяются различные плагины, скины и расширения. Полностью совместим со практически всеми браузерами. Перейдите по ссылке, чтобы узнать больше https://videojs.com/.
3. JW Player
Изначально бесплатный продукт, который со временем превратился в платформу для выполнения различных задач. Бесплатной версией можно пользоваться только для некоммерческих целей. Обеспечивает аналитикой и полностью позволяет настраивать воспроизведение HTML5. Идеально подходит для WordPress сайтов и совместим со всеми популярными CMS. Главная особенность заключается в простоте использования даже для людей без большого опыта. Если вам стало интересно, то вот адрес https://www.jwplayer.com/.
4. Cloudinary
Данный видео плеер на сайте используют в основном крупные компании и предприятия. Позволяет воспроизводить видео в высоком качестве и без потери скорости загрузки. Есть инструменты для обработки и кодирования видеофайлов. Предоставляет услуги хостинга. Добавить плеер на сайт можно с помощью embed кода. В наличии имеются инструменты для аналитики и отображения взаимодействия аудитории. Если вас заинтересовал этот проект, можете ознакомиться подробнее на сайте https://cloudinary.com/documentation/cloudinary_get_started.
5. Shaka Player
Видеоплеер является бесплатным. Можно использовать офлайн, благодаря коробочному решению. Помощь в разработке оказывает компания Google. Открытый исходный код позволяет настраивать под индивидуальные требования, но требуется помощь сообщества при возникновении проблем. Молодой и актуальный проект, стоит обратить внимание. Для поддержки рекламы и аналитики придется пользоваться сторонними сервисами или искать решение самому. Подробности можно найти здесь https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html.
6. Kaltura Player
Это веб-плеер, созданный на основе Shaka Player от Google. Включает в себя большой список фунций, включая поддержку рекламы и аналитики. Используется на различных платформах, позволяет легко настраивать внешний вид проигрывателя под ваш веб-сайт. Модель распространения условно-бесплатная. Подробнее можно узнать на сайте http://player.kaltura.com/docs/.
7. MPV Player
MVPplayer – хороший плеер для сайта. Сервис также является молодой платформой видеохостинга. Есть ряд отличий его от HTML5 видеопроигрывателей, можно ознакомиться с ними на сайте https://mpvplayer.com/. Монетизировать контент можно различными способами, включая криптовалюту. С помощью панели управления и различных инструментов сбора статистики и аналитики легко настраивается интеграция рекламных блоков.
8. JPlayer
Очень старый видеопроигрыватель, но часто встречается в обзорах. Мы решили добавить его, чтобы почтить память. Скрипты для сайта плеер использовал в виде отличного PHP-пакета. С помощью данного плеера можно было создавать гибкие решения, инновационные для своего времени. Увы, сообщество забросило его и можно сказать, что на сегодня он прекратил существование. Это один из главных минусов у продукта с открытым исходным кодом.
9. Lightbox
Бесплатная программа, которая позволяет добавить на ваш сайт красиво всплывающее окно проигрывателя. Для коммерческих целей придется покупать дорогую лицензию. Примечательна тем, что не требует вообще никаких знаний в программировании. Без единого кода в несколько щелчков можно добавить видео, настроить внешний вид, выбрав из множества шаблонов. Выглядеть встроенный плеер на сайте будет как миниатюрное окно, обрамленное в выбранную вами рамку. Посмотреть, а это того стоит, можно на сайте https://videolightbox.com/.
10. Media Element.js
Последний, но не худший в нашем списке. Это плагин, который позволяет использовать под тегом видео в формате AVC. Есть стандартные функции для проигрывателей, но имеет и многое другое. Перевод с помощью Google Translate, повтор воспроизведения, фоновая подсветка из проигрываемых кадров. Продукт бесплатен и с открытым исходным доступом. Если ваш плеер не поддерживает формат HTML5, то плагин меняет его на другой.
От автора: при создании сайтов очень часто возникает необходимость в публикации видеоматериалов на его страницах, а для отображения видео, как Вы знаете, необходим видеоплеер. Поэтому в данном уроке мы с Вами рассмотрим, как установить видео плеер на странице сайта, как добавить видео для воспроизведения и как настроить видеоплеер под свои собственные нужды.
В данном уроке мы с Вами будем говорить об одном из наиболее популярных и наиболее удобных видеоплееров под названием jwplayer.
1. Введение
Данный плеер обладает очень хорошим функционалом, поддерживает такие видео форматы как flv, mp4, аудио mp3, aac, также возможно проигрывание роликов с канала youtube. Поддерживается всеми известными браузерами, такими как Chrome, Firefox, IE, Opera, Safari, мобильный операционной системой Android, и такими устройствами как iPhone / iPad.
Краткие характеристики:
Технологии FLASH и HTML5, то есть плеер легко отображается на всех устройствах.
Удобный и доступный JavaScript API
Поддержка потокового видео протокола RTMP и HTTP псевдо-потока.
Возможность загрузки скинов (только для платной версии).
Для работы нам потребуется небольшой тестовый сайт, либо одна интернет страница, на которой мы и будем выводить видео плеер. Данный сайт уже заранее подготовил, вот так он выглядит:
Думаю, приводить исходный код здесь по тексту нет необходимости, так как он очень простой, к тому же в исходных материалах к уроку он будет приведен.
Теперь давайте установим данный плеер.
2. Установка плеера jwplayer.
Первым делом необходимо скачать плеер. Для этого переходим на официальный сайт разработчика, по адресу: //www.longtailvideo.com/.
Далее переходим по ссылке Get JW Player — открылась страница скачивания плеера.
Вводите адрес своего почтового ящика в поле e-mail и кликаете по ссылке FREE DOWNLOAD для скачивания. Обратите внимание, что данный плеер поставляется в двух версиях: платной и бесплатной. Бесплатная версия, обладает, конечно, ограниченным функционалом, но его вполне достаточно для нормального отображения видео и полноценной настройки под Ваши нужды. К примеру, в платной версии есть возможность выбора, различных скинов (внешний вид плеера), также шаринг в социальных сетях (ссылка поделиться данным видео) и т.д.
В результате скачивания мы получаем архив: jwplayer-3242.zip. Давайте его распакуем в папку js тестового сайта. В результате в данной папке мы получили следующие файлы:
jwplayer.flash.swf
jwplayer.html5.js
jwplayer.js
Далее необходимо подключить файл jwplayer.js к нашему тестовому сайту. Для этого открываем файл index.php и пишем следующий код (между тегами head):
|
<script type=“text/javascript” src=“js/jwplayer.js”></script> |
После этого необходимо создать блок, в котором будет выведен плеер, поэтому создадим блок div с идентификатором player:
|
<div id=“player”>For player</div> |
Строка For player при загрузке плеера показана не будет. Далее, используя javascript необходимо прописать код, который будет выводить плеер в созданном блоке. Для этого можно создать отдельный файл и все кодирование вести в нем, или писать в этом же файле, открыв теги script. Но мне удобней использовать отдельный файл, поэтому давайте создадим пустой файл под названием script.js и сразу же его подключим. Только данный файл необходимо подключать после того как Вы создали блок, для отображения плеера. Поэтому подключаем данный файл:
|
<script type=“text/javascript” src=“js/script.js”></script> |
Итак, установка плеера завершена, теперь осталось его вызвать для отображения на экране.
3. Воспроизведение видео.
Итак, давайте выведем плеер в указанном блоке, для этого открываем файл script.js и пишем следующий код:
|
jwplayer(“player”).setup({ file:“files/video.mp4”, image:“files/pic.jpg” }); |
Обратите внимание, что вызывается метод jwplayer() – данный метод входит в состав файла jwplayer.js и является основным при отображении плеера. То есть вызывая данный метод мы передаем ему параметром идентификатор того блока, в котором он должен быть отображен на экране. В нашем случае это блок div с идентификатором player. Затем вызываем метод setup – который определяет все основные параметры плеера:
file – путь к файлу, который должен быть воспроизведен в плеере. В нашем случае это видео в формате mp4 и файл video.mp4.
image – путь к изображению, которое будет показано до начала воспроизведения видео (либо музыки, либо ролика канала youtube).
Теперь давайте сохраним изменения и посмотрим, что отображается на экране браузера.
Как Вы видите, плеер нормально отображается и если, нажать по кнопке воспроизвести, то начнется воспроизведение видео ролика. Теперь, если Вам необходимо воспроизвести аудио файл, для этого необходимо указать путь к этому файлу в параметре file:
Если необходимо отобразить видео-ролик из канала youtube, для этого ссылку на данный ролик также указываете в параметре file:
|
file:” //www.youtube.com/watch?v=eLJ_O5Ekxqw” |
Согласитесь все очень просто. Теперь давайте поговорим о настройках данного плеера.
4. Настройка плеера.
Первым делом давайте настроим размеры данного плеера. Для этого необходимо указать два параметра width и height:
|
jwplayer(“player”).setup({ file:“files/1.mp3”, image:“files/pic.jpg”, width:“640”, height:“480” }); |
Думаю, что Вы уже догадались, что width это ширина, а height – высота. Размерность – пиксели. Теперь давайте посмотрим, что у нас получилось:
Как Вы видите, размеры плеера изменились. Теперь давайте добавим еще несколько настроек:
|
jwplayer(“player”).setup({ file:“files/1.mp3”, image:“files/pic.jpg”, width:“640”, height:“480”, controls:true, autostart:false, mute:false, stretching:“uniform”, title:“hello world”, }); |
Давайте по-порядку рассмотрим каждый параметр:
controls:true – отвечает за отображение панели управления плеера. Если будет установлено значение false, то панель управления отображаться не будет. По умолчанию – true;
autostart:false – если установить значение true, то воспроизведение данного ролика начнется сразу же поле загрузки страницы с плеером. По умолчанию – false;
mute:false – если установить значение true, то при воспроизведении будет отключен звук (конечно, используя панель управления, плеером го можно включить). По умолчанию – false;
stretching:»uniform» – масштабирование видео в окне плеера. Имеет следующие значения: none – реальный размер видео; exactfit – видео бут растянуто по величине окна плеера (не пропорционально), при этом может наблюдаться потеря качества, то есть, видео может быть либо вытянутым, либо растянутым; uniform – масштабирование пропорционально, что бы видео поместилось в окно плеера; fill – пропорциональное масштабирование видео до размеров экрана, но если из-за формата видео, оно не будет помещаться в окно плеера, лишние части будут обрезаны. По умолчанию – uniform;
title:»hello world» – заголовок видео ролика.
Давайте сохраним изменения и посмотрим, что у нас получилось:
Если, установить значение высоты плеера, равное 40 пикселей, то на экране мы увидим вот такой плеер:
На мой взгляд, очень удобно использовать при воспроизведении музыкальных файлов.
5. Работа с playlist.
Playlist – это заранее определенный список файлов, которые должны быть воспроизведены в плеере. Плеер jwplayer также поддерживает плейлисты, поэтому давайте научимся с ними работать, и добавим несколько файлов к воспроизведению. Для этого пишем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
jwplayer(“player”).setup({ width:“640”, height:“480”, listbar: { position:‘bottom’,//right size:150 }, playlist: [ { file:“files/video.mp4”, title:“hello world”, image:“files/pic.jpg”, description:“dsf sdjfhv sdjfhsdj fhsd vsdfj”, }, { file:“files/video1.mp4”, title:“Second video”, image:“files/pic1.jpg” }, { file:“files/video2.mp4”, title:” next video”, image:“files/pic2.jpg” }, { file:“files/1.mp3”, title:“Music”, image:“files/pic1.jpg” } ] }); |
Обратите внимание, что за отображение плейлиста отвечает параметр playlist, у которого так же есть свои параметры. Здесь будьте очень внимательны с синтаксисом. Смотрите код параметра playlist выделен квадратными скобками, а каждый новый файл плейлиста отделен фигурными скобками (позиции плейлиста). Теперь о параметрах playlist:
file – путь к файлу, для воспроизведения;
image – изображение, которое выводится перед указанным файлом;
title – заголовок файла;
description – краткое описание файла, что воспроизводится.
Теперь для того, что бы показать сам плейлист (список файлов), необходимо также указывать параметр listbar, у которого также есть две настройки:
position:’bottom’ – позиция отображения плейлиста. В данном случае внизу, также есть возможность расположить данный блок справа. Для этого необходимо указать значение right;
size:150 – размер блока в пикселях.
Теперь давайте посмотрим в браузере, что у нас получилось:
Как Вы видите, плейлист успешно отобразился. Теперь давайте посмотрим, как задать несколько источников на одно и то же видео. К примеру, если у нас есть видео и оно сохранено в различных файлах и при этом у каждого файла различное качество. Для этого пишем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
jwplayer(“player”).setup({ width:“640”, height:“480”, listbar: { position:‘bottom’,//right size:150 }, playlist: [ { title:“Sources”, image:“files/pic2.jpg”, description:“dsf sdjfhv sdjfhsdj fhsd vsdfj”, sources : [ { file:“files/video.mp4”, label:“360p”, title:“hello world”, image:“files/pic.jpg”, }, { file:“files/video1.mp4”, label:“780p”, title:“second video”, image:“files/pic2.jpg”, default:true } ] } ] }); |
Как Вы видите, используется все тот же параметр playlist, но теперь он имеет всего лишь одну секцию (как бы всего одна позиция в списке воспроизведения). Описываем уже знакомые нам параметры title, image, description, но вместо параметра file, пишем параметр sources. Данный параметр определяет источники одного и того же видео файла и как Вы видите в нем также есть свои настройки:
file – путь к файлу для воспроизведения;
label – заголовок, который будет отображен в специальном меню выбора источников видео;
title – заголовок;
image – изображение, которое показано перед воспроизведением;
default – если установлено значение true, значит, данный источник показывается по умолчанию
Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:
Как Вы видите, все нормально отображается. Теперь на панель управления плеером добавлена возможность выбора источников.
6. Отображение субтитров.
Плеер jwplayer поддерживает возможность отображения субтитров. Для этого нужно создать специальный текстовый файл, с расширением VTT, вот такого содержания:
|
WEBVTT 00:00:05 —> 00:00:08 <b>hello world I am subtitle</b> 00:00:10 —> 00:00:12 <b>erdefsd</b><font color=“#3333CC”> fsdf sd</font> fsd fsd fsd f |
Смотрите, вначале указываете ключевое слово WEBVTT, затем указываете временные интервалы и текст, который будет отображен в определенном интервале времени. При отображении текста можно использовать некоторые html теги. Для форматирования текста. К примеру, теги b — для придания жирности текста и font color=»#3333CC» для определения цвета текста. Для отображения субтитров необходимо добавить следующий код:
|
jwplayer(“player”).setup({ file:“files/video.mp4”, image:“files/pic.jpg”, tracks: [ { file:“files/sub.vtt”, label:“English” }, { file:“files/sub.vtt”, label:“Russian”, default:true } ] }); |
Как Вы видите, за работу с субтитрами отвечает параметр tracks. У каждого видео может быть несколько различный субтитров, к примеру, на разных языках, поэтому синтаксис данного параметра аналогичен параметру playlist, то есть, вначале указываем квадратные скобки, а затем настройки, относящиеся к определенному субтитру, отделяются фигурными скобками. Настройки параметра tracks:
file – путь к VTT файлу (текст субтитров и временные интервалы);
label – название субтитра на панели выбора субтитров;
default – если данная настройка имеет значение true, значит, субтитр выводится по умолчанию.
Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:
Используя параметр tracks, можно облегчить навигацию по видео файлу, используя небольшие скриншоты видео ролика, показывающиеся, при наведении курсора мыши на временную панель плеера. Для этого необходимо в фале VTT, вместо текста, который отображался в субтитрах прописать имена фалов, которые должны отображаться в определенные интервалы времени, к примеру (файл sub_th.vtt):
|
WEBVTT 00:00 —> 00:05 0_0.jpg 00:05 —> 00:10 0_1.jpg |
Далее пишем следующий код:
|
jwplayer(“player”).setup({ file:“files/video.mp4”, image:“files/pic.jpg”, tracks: [ { file:“files/sub_th.vtt”, kind:“thumbnails” } }); |
Как Вы видите, необходимо указать путь к файлу VTT и задать настройке kind, значение «thumbnails» . Теперь давайте посмотрим, что у нас получилось:
7. Работа с javaScript API.
Плеер jwplayer содержит очень большой набор различных функций и методов, для работы, используя язык javaScript. Сейчас мы рассмотрим только несколько из них. Подробное описание данных функций и методов Вы найдете в официальной документации по плееру, по адресу //www.longtailvideo.com/support/jw-player/28832/about-jw-player.
Теперь давайте создадим несколько кнопок, для управления плеером. Для этого откроем файл index,php и добавим несколько строк (которые будут служить кнопками):
|
<ul> <li onclick=“jwplayer(‘player’).play()”>Start</li> <li onclick=“alert(jwplayer(‘player’).getVolume())”>Get volume</li> <li onclick=“add_volume()”>Set volume</li> </ul> |
А в файле script.js, создадим функцию add_volume(), которая будет увеличивать громкость воспроизведения видео:
|
function add_volume() { var volume = jwplayer(‘player’).getVolume(); if(volume < 100) { volume = volume + 10; } jwplayer(‘player’).setVolume(volume); } |
Смотрите, у плеера jwplayer есть метод play(), вызывая который мы начинаем воспроизведение, или останавливаем его (если оно уже началось). Что мы и делаем при нажатии кнопки Start. То есть описали для данной кнопки обработчик события onclick (он сработает, когда по тексту кликнуть мышью), другими словами, при нажатии по кнопке Start будет вызван метод play() (начало/останов воспроизведения).
Далее, при нажатии по кнопке Get volume – вызывается метод getVolume() – который возвращает текущую громкость плеера, ее мы и выводим на экран при помощи функции alert().
И последняя кнопка Set volume – используется для плавного увеличения громкости плеера. Для этого мы создали функцию add_volume(), которая вызывается при клике мышью по данной кнопке. Данная функция очень проста. Смотрите, вначале получаем текущую громкость и записываем ее в переменную volume. Проверяем, не вышла ли она за пределы максимального значения (значение 100). И используя метод setVolume(volume), устанавливаем новое значение громкости (новое значение передается параметром методу).
Теперь если проверить в браузере, то все работает нормально.
Итак, данный урок можно завершать. Надеюсь, Вам понравился рассматриваемый плеер и Вы будете использовать его у себя на сайтах.
Всего Вам доброго, удачного кодирования и до новых встреч!
Время на прочтение
3 мин
Количество просмотров 186K
С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.
Используем <audio> для вставки звукового файлу на страницу
Ниже приведен простейший пример использования тега , он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly, который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.
<audio src="sound.mp3" autoplay></audio>
Воспроизведение звука в цикле
Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.
<audio src="sound.mp3" autoplay loop></audio>
Отображение элементов управления
Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls.
<audio src="sound.mp3" controls></audio>
Различные форматы файлов
Тег
поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.
<audio controls>
<source src="sound.ogg">
<source src="sound.mp3">
</audio>
Указываем MIME-тип файлов
При использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type.
<audio controls>
<source src="sound.ogg" type="audio/ogg" >
<source src="sound.mp3" type="audio/mp3" >
</audio>
Для старых браузеров
А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег
? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег .
<audio controls>
<source src="sound.ogg" type="audio/ogg" >
<source src="sound.mp3" type="audio/mp3" >
Ваш браузер не пожжерживает тег audio!
</audio>
Буферизация файлов
При воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload. Он может принимать 3 значения:
- none - если вы не хотите использовать буфер файлов;
- auto - если вы хотите, чтобы браузер беферизировал файл целиком;
- metadata - для загрузки лишь служебной информации (продолжительность звучания и др.).
Управление воспроизведением через JavaScript
Управлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером:
<audio id="player" src="sound.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Воспроизведение</button>
<button onclick="document.getElementById('player').pause()">Пауза</button>
<button onclick="document.getElementById('player').volume+=0.1">Громкость +</button>
<button onclick="document.getElementById('player').volume-=0.1">Громкость -</button>
</div>
Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега .
С каждым днем мы все больше и больше слышим о HTML5. По мнению экспертов HTML5 — это будущее Интернета. В HTML5 есть очень интересные функции, например воспроизведение аудио-видео роликов.
Предлагаю вашему вниманию краткий обзор 10 бесплатных HTML5 видео плееров для разработчиков.
Plyr
Plyr — простой, легковесный, кастомизируемый, доступный (accessible) HTML5 плеер для воспроизведения как аудио, так и видео контента.
Поддерживает популярные стриминговые платформы: YouTube и Vimeo. Работает во всех современных браузерах.
PlayerJS
Позволяет создать полностью свой плеер. Есть возможность управлять дизайном, настройками и рекламой в конструкторе плееров для сайтов PlayerJS. Используйте свободу выбора. В конструкторе есть все необходимые опции, чтобы создать свой плеер мечты.
MediaelEment.js
HTML5 <video> и <audio> проигрыватель на чистом HTML и CSS с фолбеком на Flash и Silverlight. На данные момент входит в ядро WordPress.
jPlayer
Это jQuery плагин для проигрывания аудио и видео. Поддержка форматов: mp3, m4a (AAC), m4v (H.264), ogv, oga, wav, webm.
Скачать
MediaFront
Открытая бесплатная платформа (лицензия GPLv3) для внедрения плеера в веб-страницу, использует все новороты HTML5. Внедрение роликов с YouTube, Vimeo. Темы основаны на jQuery-UI ThemeRoller
Скачать
JME
jme — это HTML5 аудио/видео компонент с Flash и VLC Fallback, который сфокусирован на гибком интуитивно понятном DOM-API и семантичном коде.
Скачать
FlareVideo
Flare — бесплатный HTML 5 видео плеер. Темы основаны на CSS/HTML/JS. Полностью открытый исходный код. Бесплатен для коммерческого использования.
Скачать
Projekktor
Projekktor обертка для новых HTML5 аудио и видео элементов. Прост в интеграции (всего один JavaScript файл). Кроссбраузерный (IE, Opera, Chrome, Safari, Firefox и другие). Поддерживает внедрение рекламы в проигрываемый ролик. Использует свободный видеокодек Theora. Есть плейлисты. Показ роликов с YouTube. Темы основаны на HTML/CSS. Бесплатен для некоммерческого и коммерческого использования (лицензия GNU GPL)
Скачать
Video JS
HTML5 видео плеер. Использует современные возможности браузеров. Бесплатен. Исходный код открыт. Легковесный. Не использует картинок. Скины задаются через CSS. Есть полноэкранный режим. В старых браузерах плеер автоматически заменяется на Flowplayer. Лицензия MIT.
Скачать
AmplitudeJS
Amplitude.JS — современный HTML5-аудиоплеер. Не нужно никаких зависимостей. Поддержка плейлистов, хуков, мобильных девайсов, тач устройств, SoundCloud. Дизайн полностью кастомизируется. Через этот плеер можно организовывать стримы. 2232 звезды на Github.
Скачать
HTML5 Обзоры
Ищите HTML5- video player для браузера? В этой статье приводится список лучших HTML5-видеоплееров
- Plyr.io
- Videojs
- Плеер для сайта HTML5 – 15 лучших решений
YouTube - Projekktor
- Подбираем лучшие шрифты для сайта
JPlayer - Mediaelement.js
- Afterglowplayer
- Лучшие плагины HTML5-видеоплееров для WordPress
- Responsive Video Embeds
- Video Gallery WordPress Plugin
- Youtube Channel Gallery
- MediaElement.js
Простой и гибкий онлайн проигрыватель видео для сайта, который поддерживает YouTube-видео. Он популярен среди профессионалов и новичков благодаря своему простому дизайну, и позволяет плавно обрабатывать даже большие видеофайлы.
Ключевые особенности:
- Полная поддержка экранных дикторов и VTT;
- Гибко настраиваемая платформа, которая позволяет пользователям изменять внешний вид по своему выбору;
- Широкий спектр инструментов для обработки и редактирования;
- Адаптивный дизайн с функцией полноэкранного режима.
Еще один видеоплеер для сайта, который разработан с использованием HTML5. Video.js поддерживает Flash-видео, HTML5, Vimeo и YouTube. Можно наслаждаться воспроизведением видео с помощью Videojs на мобильных устройствах и настольных компьютерах. Этот видеоплеер был запущен в 2010 году и в настоящее время используется более чем на 200 000 сайтов.
Ключевые особенности этого плеера для сайта HTML5:
- Широкий охват форматов;
- Простота настройки;
- Возможность подключения дополнительных плагинов, которые обеспечивают поддержку многих социальных сетей.
Недавно YouTube перешел на использование нового видеоплеера, созданного на базе HTML5. Теперь не нужно беспокоиться о кодировании видео. YouTube позволяет воспроизводить видео в любом браузере. Но для доступа к этому инструменту нужно создать учетную запись YouTube. Также необходимо учитывать, что видео автоматически удаляются, если они нарушают любое из положений политики YouTube.
Ключевые особенности:
- YouTube прост в использовании;
- Доступен бесплатно;
- Поддерживаются все форматы и браузеры.
Видеоплеер с открытым исходным кодом. Projekktor был выпущен под лицензией GPLv3, он написан с использованием JavaScript. Данная платформа обладает возможностями, достаточными для решения всех проблем, связанных с кроссбраузерной совместимостью.
Ключевые особенности этого плеера с плейлистом для сайта:
- Автоматическое определение лучших способов воспроизведения видео;
- Projekktor известен благодаря впечатляющему дизайну и удобству;
- Профессионалы считают Projekktor одним из самых надежных решений для воспроизведения видео.
Еще один бесплатный видеоплеер с открытым исходным кодом, для которого доступна впечатляющая медиа-библиотека, написанная на JavaScript. JPlayer известен как комплексный инструмент для разработки инновационных медиа-решений.
Основные функции:
- Может быть развернут в течение нескольких минут и прост в использовании;
- Полностью настраиваемая платформа с поддержкой CSS и HTML;
- Не нагружает процессор.
Это продвинутый видео и аудио-плеер на HTML5, который поддерживает Silverlight с Flash. А также предоставляет интерфейс, который корректно отображается во всех браузерах. Плеер использует обновленные и настраиваемые инструменты Flash вместе с плагинами Silverlight, чтобы все старые и новые браузеры могли использовать один интерфейс. Не нужно создавать плеер для сайта, потому что есть Mediaelement.js.
Основные функции:
- Видео и аудио-плеер разработан с поддержкой CSS и HTML;
- Mediaelement.js соответствует различным стандартам доступности, включая WebTT.
Плеер поддерживает управление всеми элементами видео.
Ключевые особенности:
- Прост в настройке и использовании;
- Поддерживает множество форматов видеофайлов;
- Быстрое время отклика.
Responsive video embeds содержит много интересных функций. Позволяет вставлять несколько видеороликов в одну запись и изменять размер встроенных видео в виде iFrames. Таким образом, они смогут вписываться в окна разных размеров.
Этот продвинутый плеер для мобильного сайта в настоящее время поддерживает почти все популярные видео, размещаемые на WordPress.TV, Revision 3, hulu.com, Scribd, Daily motion, Vimeo и YouTube и т. д. Он доступен на бесплатной основе:
Этот WordPress-плагин стоит от $15. Он не только обрабатывает галереи видео, но и может работать как галерея, в которую можно добавлять аудио, изображения и видео. Он также позволяет размещать рекламу на YouTube. Чтобы помочь профессионалам в реализации маркетинговых кампаний, этот инструмент дает возможность удалять водяные знаки и заменять их новыми логотипами. А также помогает делиться контентом в социальных сетях одним кликом мыши:
Простой в использовании бесплатный плагин со всеми основными функциями, который позволяет встраивать плейлисты YouTube на WordPress -сайты. А также создавать список миниатюр с пользовательскими настройками канала. С помощью простых элементов управления можно персонализировать через галерею каналов YouTube все, начиная от соотношения сторон окна плеера для сайта, качества видео и продолжая типом видеопотока, темы и ссылки. Поддерживаются различные настраиваемые виджеты:
Продвинутый аудио-видео HTML5-плеер, который работает с Flash Fallback. С его помощью можно получить доступ к широкому спектру ярлыков для аудио и видео. Можно использовать полноэкранный режим, так как он отлично работает в Internet Explorer и Chrome.
Наиболее полезные опции данного плагина: цикличные видео, управление размерами, настройки автоматического воспроизведения, индикатор выполнения, настройки громкости и продолжительности, предварительный просмотр видео и управление аудио функциями.
MediaElements.js позволяет управлять множеством интерактивных функций одним кликом мыши. Он отлично подойдет для начинающих благодаря своему простому и удобному интерфейсу:
