Html аудио/видео плеер для сайта на JavaScript
Сегодня создание сайтов не обходится без медиа модулей. Почти на каждом сайте используется фото, видео, аудио — так как это лучший способ донести пользователю информацию о услугах или товарах. Для этих целей можно использовать плеер Plyr — это простой и быстро настраиваемый плеер, который поддерживает все браузеры и имеет множество настроек. Также плеер поддерживает разные форматы аудиофайлов и видеофайлов!
Преимущества аудио/видео плеера Plyr
- Поддерживает основные видео и аудио форматы, а также видео с YouTube и Vimeo.
- Поддерживает субтитры VTT
- Поддерживает возможность изменять вид плеера и микроразметку
- Использует элементы: range — для звука, progress — для прогресса, button — для кнопок
- Работает с адаптивными размерами экрана
- Поддерживает потоковое воспроизведение hls.js и dash.js
- Имеет стандартизированный API воспроизведения, громкости, поиска
- Имеет полноэкранный режим
- Поддерживает управление с клавиатуры
- Режим «картинка в картинке»
- Атрибут playsinline
- Переключение нескольких дорожек субтитров
- Показ эскизов предварительного просмотра
- Работает без фреймворков, таких как jQuery
- Возможность управлять скоростью воспроизведения
- Возможность монетизации видео
Установка видео/аудио плейера Plyr
Скачиваем плеер Plyr:
Скачать архив (версия 3.6.3) Скачать с GitHub
Аудио плеер для сайта на JS
HTML код аудио плейера CSS код аудио плейера Инициализация jQuery:
Видео плеер для сайта на JS
Transformers 3
War of the Worlds
HTML код видео плейера CSS код видео плейера Инициализация jQuery:
- JavaScript (JS)
- FrontEnd (ФронтЭнд)
Помогла ли вам статья?
Как вставить музыку на сайт
Итак, вы решили добавить музыку на ваш сайт! Хорошо. Вы пришли в нужное место. Есть несколько способов которые требуют очень мало знаний о HTML и несколько строк кода. Большинство современных браузеров будут распознавать и воспроизводить аудио файлы (.wav, .mp3, .mid, и т.д.) и предоставят простой плеер с основными элементами управления. Cincopa позволяет вам легко добавить музыку на ваш сайт, просто вставить динамический музыкальный проигрыватель непосредственно на ваших страницах и добавить меню, плейлисты, даже обложки альбомов (или добавить свои собственные изображения). Музыканты и любители музыки, также могут пользоваться достижениями аудио и интернет технологиями, предназначенными для обогащения сайта быстрыми, высоко сжимаемыми скачиваниями музыки и интерактивных аудио плееров.
Взгляни на демо скинов для музыки и подкастов:
Как вставить музыку на ваш сайт или блог
Если вы просто хотите добавить фоновую музыку на ваш сайт, когда сайт загружается , это можно сделать просто вставив аудио галерею где-то на вашей странице. Вы можете включить функцию автозапуска, чтобы убедиться,что аудио начнет проигрываться при загрузке вашей страницы.
Медиа платформа Cincopa это решение для вставки музыки на ваш сайт
С помощью музыкального проигрывателя Cincopa вы выбираете скин, загружаете свои файлы и пусть Cincopa автоматически генеририрует код, который будет производить красивые, интерактивные флеш плееры, совместимые с практически любым веб-сайтом или блогом. Вы просто вставьте код, где вы хотите, чтобы ваш флеш плеер появился и все готово.
Вы можете создать бесплатный и автономный музыкальный плеер, для любого веб-сайта и очень просто установить и настройть на своем собственном сайте или блоге. Cincopa также примет и доставит файлы из своих собственных серверов, так что вам не придется беспокоиться, что ваш собственный хост не сможет справится с местом и необходимой пропускной способностью. Добавить полностью динамичный и интерактивный музыкальный плеер на свой сайт можно в три простых шага:
Как это работает
1Выбери один из наших удивительных скинов
2Загрузи свои файлы на ,,облако” Cincopa
3Получи простой код и вставь на своем сайте
ВЫБЕРИ СКИН ДЛЯ СВОЕГО МУЗЫКАЛЬНОГО ПЛЕЕРА
У Cincopa есть 13 бесплатных скинов музыкального проигрывателя, различных размеров на выбор. Настрой размер музыкального плеера и окно плейлиста. Предварительно просмотри музыкальный плеер в отдельном окне до принятия решения о скине. Добавь обложки альбомов или добавь свои собственные изображения. Предложи музыку для скачивания или защити её. Премиум пользователи могут удалить брендинг Cincopa в своих музыкальных плеерах («Powered by Cincopa») и выбрать один из нескольких вариантов, как автозапуск, петля, повторение, и многое другое. Просто выберите ваш скин и перейдите к следующему шагу.
Загрузите ваши музыкальные файлы
- Используйте веб приложение для загрузки нескольких файлов одновременно в любом размере.
- Загрузка файлов от прямого URL или из Facebook, Instagram, Dropbox или Google Drive.
Скопируйте сгенерированный код и вставьте его на свой сайт
Как только вы выбрали ваш скин и загрузили музыку, вам будет предложено выбрать вариант реализации. Существует, на данный момент, несколько вариантов в зависимости от того, где вы хотите, чтобы ваш музыкальный плеер появляться. Вы можете отобраpзить музыку на практически любом сайте, блоге или RSS канале. Выберите метод и Cincopa будет генерировать для вас необходимый код, скопируйте код и вставьте плеер где нравится.
Cincopa это самая
полная платформа мультимедии
Добавьте новую музыку на свой плеер в любой момент. Вам не придется пройти через процесс создания нового плеера или генерированния новых фрагментов кода. Просто загрузите ваши файлы и они будут добавлены в плеер, который вы уже создали. Вы можете добавлять или удалять файлы в любое время и из любой точки мира в том числе любого компьютера, мобильного устройства или КПК, как только вы синхронизируете эти устройства с вашим Cincopa аккаунтом. Добавь музыку в любой из своих CMS блогов или веб-сайтов.
Один из лучших особенностей автономного музыкального проигрывателя Cincopa, это то что вы можете поместить его буквально в любом месте в сети. После создания музыкального плеера и загрузки файлов, визард сгенерирует код HTMLкоторый можно поместить на любую веб-страницу. Если ваш сайт или блог был создан с помощью системы управления контентом (CMS), таких как WordPress, Joomla, Drupal, добавить музыкальный плеер так же просто, как добавить одну строчку кода на ваши страницы.
Плагин музыки и аудио плеера для WordPress
Cincopa плагин для WordPress является бесплатным и простым в использовании. Он также является одним из самых популярных плагинов WordPress. Его скачали более 400 000 раз! Он получает высокие рейтинги от сообщества WordPress из за своей простоты в использовании, продолжительности, объема и поддержки на высшем уровне. После установки плагина, вы можете войти в свой аккаунт Cincopa и управлять непосредственно из вашей панели управления WordPress. Добавить музыкальный плеер в ваши страницы и посты так же просто, как нажать на кнопку на вашем WordPress панеле. При редактировании страницы или поста, просто нажмите на значок «С» в панели инструментов и вставьте в появляющемся окне короткий полученный код. Обновите страницу и все готово.
РАСШИРЕНИЕ Joomla! АУДИО ПЛЕЙЕРА
Расширения Joomla от Cincopa столь же просты в установке и доступны в Каталоге расширений Joomla (JED). Просто загрузите .zip файл на локальный компьютер и загрузите его на свой сайт Joomla с помощью FTP или непосредственно через панель администрирования Joomla. После того, как расширение включено, вы заметите кнопку Cincopa в нижней части окна для редактирования. Нажатии на кнопку Cincopa при редактировании страницы или статьи, откроет визард создания музыкального проигрывателя, который проведет вас через процесс настройки: Выберите скин, загрузите ваше медиа, а также сгенерируйте короткий код, который вы будете вставлять в вашу страницу.
DRUPAL МОДУЛЬ Музыкального плеера
Cincopa также упрощает вам создание и установку музыкального плеера на вашем сайте Drupal, непосредственно из панели управления Drupal. Создайте новую ‘site/all/modules/’ папку, если вы еще не сделали этого (папка по умолчанию на высшем уровне установки Drupal зарезервирована только для основных модулей Drupal ), загрузите файл .zip из домашней страницы Cincopa, а также включите его изнутри Drupal. Создайте свой музыкальный плеер и вставляйте его в любом месте с одной строкой кода, генерируемого для вас приложением Cincopa. Ваш музыкальный плеер Drupal может быть создан, опубликован и отображен в прямом эфире на вашем сайте в течение нескольких минут!
Как сделать собственный видео-плеер на HTML5 Video
Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.
Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.
Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).
API для управления воспроизведением
Стандарт HTML5 для работы с видео вводит в DOM новый интерфейс — HTMLVideoElement, наследующий в свою очередь интерфейс HTMLMediaElement.
Интерфейс HTMLMediaElement
Это общий интерфейс для обоих медиа-элементов (аудио и видео), описывающий доступ к базовым возможностями работы с медиа-контентом: контроль источника контента, управление воспроизведением, изменение уровня звука и обработка ошибок. Основные свойства и методы, которые нам понадобятся:
Состояние сети и готовность к работе
src — ссылка (url) на воспроизводимый контент
buffered — буферизованные куски видео
Воспроизведение и контролы
currentTime — текущий момент проигрывания (с.)
duration — длительность медиа-контента (с.)
paused — находится ли воспроизведение на паузе
ended — закончилось ли проигрывание
muted — включение/выключение звука
volume — уровень звука [0, 1]
play() — начать проигрывание
pause() — поставить на паузу
События
oncanplay — можно начать проигрывание
ontimeupdate — изменена позиция проигрывания
onplay — запущено проигрыв
onpause — нажата пауза
onended — воспроизведение закончилось
Важно: это далеко не все методы и свойства, выставляемые через интерфейс HTMLMediaElement.
Интерфейс HTMLVideoElement
Видео отличается от аудио несколькими дополнительными свойствами:
width и height — ширина и высота контейнера для проигрывания видео;
videoWidth и videoHeight — внутреннее значение ширины и высоты видео, если размеры не известны, равны 0;
poster — ссылка на картинку, которую можно показывать, пока видео недоступно (обычно это один
из первых непустых кадров).
Разница между width/height и videoWidth/videoHeight в том, что последние — это собственные характеристики видео, в частности, с учетом соотношения сторон и других характеристик, в то время как контейнер для видео может быть любых размеров (больше, меньше, с другой пропорцией).
Play & Pause
Создание нашего собственного видео-плеера мы начнем с простой задачи: научимся запускать видео на проигрывание и останавливать воспроизведение. Для этого нам понадобятся методы play() и pause() и несколько свойств, описывающих текущее состояние видео-потока (мы также будем использовать библиотеку jQuery, не забудьте ее подключить).
Первым делом нам необходим video-элемент, которым мы хотим управлять, и элемент на который можно нажимать для управления текущим состоянием:
Play #controls span < display:inline-block; >#playpause
Обратите внимание на инвертирование состояния кнопки (paused) и действия (play).
Теперь надо добавить немного js-кода, чтобы нажатие на кнопку play переключало ее состояние и соответственно запускало видео-ролик или ставило его на паузу:
$(document).ready(function()< var controls = < video: $("#myvideo"), playpause: $("#playpause") >; var video = controls.video[0]; controls.playpause.click(function() < if (video.paused) < video.play(); $(this).text("Pause"); >else < video.pause(); $(this).text("Play"); >$(this).toggleClass("paused"); >); >); При желании можно сразу добавить несколько css-стилей для кнопок управления и их различных состояний и.
… казалось бы, все уже замечательно работает, но не тут-то было! Есть несколько мелочей, которые нам также нужно учесть.
Проигрывание сначала
Во-первых, нам нужно правильно обработать окончание проигрывания видео-ролика (если, конечно, оно не зациклено), и в этот момент нужно переключить кнопки управления так, чтобы вместо состояния «pause» было состояние «play»:
video.addEventListener("ended", function() < video.pause(); controls.playpause.text("Play"); controls.playpause.toggleClass("paused"); >);Контекстное меню
Во-вторых, браузеры обычно добавляют возможность управлять воспроизведением через контекстное меню. Это означает, что пользователь, вообще говоря, может что-то изменить в обход наших элементов управления. Этот момент нужно также отловить и внести необходимые изменения во внешний вид контролов. Для этого достаточно подписаться на события onplay и onpause.
video.addEventListener("play", function() < controls.playpause.text("Pause"); controls.playpause.toggleClass("paused"); >); video.addEventListener("pause", function() < controls.playpause.text("Play"); controls.playpause.toggleClass("paused"); >);Так как у нас становится многовато мест, где меняется внешний вид, самое время попутно произвести небольшой рефакторинг, убрав из изначального переключения режимов теперь уже дублирующую смену внешнего состояния:
var controls = < . togglePlayback: function() < (video.paused) ? video.play() : video.pause(); >. >; controls.playpause.click(function()< controls.togglePlayback(); >);Кликабельное видео
Наконец, наверняка, нам захочется, чтобы проигрывание и пауза переключались по нажатию на само видео, поэтому нужно добавить еще несколько строчек:
controls.video.click(function() < controls.togglePlayback(); >);
Текущий результат:
Прогресс
Теперь давайте перейдем к отображению прогресса проигрывания. Для начала необходимо добавить несколько элементов, которые будут использоваться для отображения текущего состояния и управления текущей позицией:
00:00 / 00:00 И соответствующие стили:
#progress < width:290px; >#total < width:100%; background:#999; >#buffered < background:#ccc; >#current < background:#eee; line-height:0; height:10px; >#time
И несколько ссылок на соответствующие элементы для быстрого доступа в объект controls:
var controls = < . total: $("#total"), buffered: $("#buffered"), progress: $("#current"), duration: $("#duration"), currentTime: $("#currenttime"), hasHours: false, . >;Первым делом, нам нужно понять, какова длительность ролика — для этого у video-элемента есть свойство duration. Отследить это значение можно, например, в момент готовности ролика к проигрыванию — по событию oncanplay:
video.addEventListener("canplay", function() < controls.hasHours = (video.duration / 3600) >= 1.0; controls.duration.text(formatTime(video.duration, controls.hasHours)); controls.currentTime.text(formatTime(0),controls.hasHours); >, false);В данном случае, мы попутно определяем, нужно ли отображать количество часов в видео-плеере (кстати, вообще говоря, спецификация предполагает, что длительность ролика может изменяться — в этот момент срабатывает событие ondurationchange, и к тому же быть бесконечной — например, при стриминге радио).
Также мы используем специальную функцию formatTime для перевода секунд в формат HH:mm:ss или mm:ss:
function formatTime(time, hours) < if (hours) < var h = Math.floor(time / 3600); time = time - h * 3600; var m = Math.floor(time / 60); var s = Math.floor(time % 60); return h.lead0(2) + ":" + m.lead0(2) + ":" + s.lead0(2); >else < var m = Math.floor(time / 60); var s = Math.floor(time % 60); return m.lead0(2) + ":" + s.lead0(2); >> Number.prototype.lead0 = function(n) < var nz = "" + this; while (nz.length < n) < nz = "0" + nz; >return nz; >;Для отображения процесса проигрывания нам понадобится событие ontimeupdate, срабатывающее при изменении текущего момента:
video.addEventListener("timeupdate", function() < controls.currentTime.text(formatTime(video.currentTime, controls.hasHours)); var progress = Math.floor(video.currentTime) / Math.floor(video.duration); controls.progress[0].style.width = Math.floor(progress * controls.total.width()) + "px"; >, false);Свойство currentTime выдает в секундах текущее время. Его же можно использовать, чтобы изменить время проигрывания:
controls.total.click(function(e) < var x = (e.pageX - this.offsetLeft)/$(this).width(); video.currentTime = x * video.duration; >);Также будет полезным показывать буферизацию видео, для этого можно отталкиваться от события onprogress, срабатывающего при загрузке новых порций видео:
video.addEventListener("progress", function() < var buffered = Math.floor(video.buffered.end(0)) / Math.floor(video.duration); controls.buffered[0].style.width = Math.floor(buffered * controls.total.width()) + "px"; >, false);Важный нюанс относительно свойства buffered, который нужно иметь в виду, заключается в том, что он предоставляет не просто время в секундах, а промежутки времени в виде объекта TimaRanges. В большинстве случаев это будет только один промежуток с индексом 0, и начинающийся с отметки 0c. Однако, если браузер использует HTTP range запросы к серверу, например, в ответ на попытки перейти к другим фрагментам видео-потока, промежутков может быть несколько. Также надо учитывать, что в зависимости от реализации браузер может удалять из буфера памяти уже проигранные куски видео.
Промежуточный результат:
Звук
Наконец, давайте добавим еще небольшой штрих к нашем видео-плееру — возможность включать и выключать звук. Для этого добавим небольшой контрол с динамиком (SVG-иконка взята с сайта The Noun Project):
С соответствующими стилями для включенного и выключенного состояний:
#dynamic < fill:#333; padding:0 5px; >#dynamic.off
Для переключения состояния динамика нам понадобится свойство mute:
controls.dynamic.click(function() < var classes = this.getAttribute("class"); if (new RegExp('\\boff\\b').test(classes)) < classes = classes.replace(" off", ""); >else < classes = classes + " off"; >this.setAttribute("class", classes); video.muted = !video.muted; >);(Стандартные методы jQuery для переключения css-классов не работают с SVG-элементами.)
Если вы хотите также менять уровень громкости, то вам поможет свойство volume, принимающее значения в диапазоне [0, 1].
Финальный результат:
Что еще.
- проверка поддержки браузером HMTL5 Video,
- программное определение и переключение поддерживаемых кодеков,
- поддержка субтитров, в том числе для обеспечния accessibility.
video.addEventListener("canplay", function() < . >, false);Либо нужно делать соответствующие проверки или отлавливать возможные исключения. Исключения вообще надо отлавливать, например, событие onerror, возникающее при ошибке загрузки видео-потока 🙂
Из дополнительных опций, которые могут вам понадобиться: изменение скорости проигрывания. Для этого есть свойство playbackRate и соответствующее событие onratechange.
Готовые плееры
- VideoJS
- MediaElementJS
- Kaltura
- JW Player
- LeanBack Player
- Табличка со сравнениями плееров
10 бесплатных HTML5 аудио/видео плееров для разработчика
С каждым днем мы все больше и больше слышим о HTML5. По мнению экспертов HTML5 — это будущее Интернета. В HTML5 есть очень интересные функции, например воспроизведение аудио-видео роликов.
Предлагаю вашему вниманию краткий обзор 10 бесплатных HTML5 видео плееров для разработчиков.
Plyr
Plyr — простой, легковесный, кастомизируемый, доступный (accessible) HTML5 плеер для воспроизведения как аудио, так и видео контента.
Поддерживает популярные стриминговые платформы: YouTube и Vimeo. Работает во всех современных браузерах.
PlayerJS
Позволяет создать полностью свой плеер. Есть возможность управлять дизайном, настройками и рекламой в конструкторе плееров для сайтов PlayerJS. Используйте свободу выбора. В конструкторе есть все необходимые опции, чтобы создать свой плеер мечты.
MediaelEment.js
HTML5 и проигрыватель на чистом 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.