1. Демо
2. Преимущества
Поддерживает основные форматы HTML5 видео и аудио, а также YouTube и Vimeo.
Поддерживает субтитры VTT и программ чтения с экрана
Имеет возможность изменять вид плеера и разметку
Использует правильные элементы:
<input type="range"> - для звука,
<progress> - для прогресса,
<button> - для кнопок
Работает с любым размером экрана
Поддерживает hls.js, Shaka и dash.js потокового воспроизведения
Переключение воспроизведения, громкости, поиска и многое другое через стандартизированный API
Поддерживает собственный полноэкранный режим с резервным режимом "полного окна"
Поддерживает управление клавиатурой
Поддерживает режим "картинка в картинке"
Поддерживает атрибут playsinline
Поддерживает нескольких дорожек субтитров
Поддерживает показ эскизов предварительного просмотра
Не требует фреймворков, таких как jQuery
Имеет возможность управлять скоростью воспроизведения
Имеет возможность монетизации видео
Описывать все эти возможности я не буду, при желании их можно посмотреть на github, но постараюсь подробно описать этот плеер, чтобы максимально удобно и быстро настроить его на сайте.
3. Установка плейера Plyr
Скачиваем плеер Plyr:
Скачать с Atuin (версия 3.6.3) Скачать с GitHub
Подключаем CSS файл с вашего сайта:
|
1 |
<link rel="stylesheet" href="/path/to/plyr.css" /> |
Или с сайта разработчика:
|
1 |
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.3/plyr.css" /> |
Подключаем JS файл и инициализируем:
|
1 2 3 4 |
<script src="path/to/plyr.js"></script> <script> const player = new Plyr('#player'); </script> |
Как и CSS файл, JS можно подключить с сайта разработчика:
|
1 |
<script src="https://cdn.plyr.io/3.6.3/plyr.js"></script> |
По умолчанию, значки, используемые в элементах управления Plyr, загружаются из SVG спрайта, который находится по адресу: https://cdn.plyr.io/3.5.6/plyr.svg
Для подключения нескольких плееров используется:
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
или
const players = Plyr.setup('.js-player');
Оба варианта вернут массив в порядке их нахождения в документе.
4. Подключение HTML5 видео
|
1 2 3 4 5 6 7 |
<video poster="/path/to/poster.jpg" id="player" playsinline controls> <source src="/path/to/video.mp4" type="video/mp4" /> <source src="/path/to/video.webm" type="video/webm" /> <!-- Субтитры являются необязательными --> <track kind="captions" label="Английские субтитры" src="/path/to/captions.vtt" srclang="en" default /> </video> |
5. Подключение HTML5 аудио
|
1 2 3 4 |
<audio id="player" controls> <source src="/path/to/audio.mp3" type="audio/mp3" /> <source src="/path/to/audio.ogg" type="audio/ogg" /> </audio> |
6. Подключение видео с YouTube
Видео с YouTube можно подключить двумя способами.
Через <iframe>с прогрессивным улучшением (используя embed). Данный метод рекомендуется.
|
1 2 3 4 5 6 7 8 |
<div class="plyr__video-embed" id="player"> <iframe src="https://www.youtube.com/embed/6wJAdfTJZUQ" allowfullscreen allowtransparency allow="autoplay" ></iframe> </div> |
Примечание: класс plyr__video-embed сделает плеер формата 16:9. Когда плеер включится, будет использоваться пользовательский параметр конфигурации ratio
Второй вариант через <div>
|
1 |
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="6wJAdfTJZUQ"></div> |
Примечание: атрибут data-plyr-embed-id может быть либо идентификатором видео, либо его URL-адресом.
7. Подключение видео с Vimeo
Подключается почти также, как и YouTube
Через <iframe>
|
1 2 3 4 5 6 7 8 |
<div class="plyr__video-embed" id="player"> <iframe src="https://player.vimeo.com/video/151297208?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media" allowfullscreen allowtransparency allow="autoplay" ></iframe> </div> |
Через <div>
|
1 |
<div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="151297208"></div> |
8. Настройки
Второй аргумент конструктора для настроек, например:
|
1 2 3 |
const player = new Plyr('#player', { title: 'Название', }); |
Параметры настроек могут быть переданы также в атрибуте data-plyr-config:
|
1 |
<video src="/path/to/video.mp4" id="player" controls data-plyr-config='{ "title": "Название" }'></video> |
Список настроек:
| Настройка и ее тип | По умолчанию | Описание |
|---|---|---|
enabledЛогический тип |
true |
Полное отключение Plyr |
debugЛогический тип |
false |
Отображение отладочной информации в консоли |
controlsМассив, функция или элемент |
['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'] |
Элементы управления плеером. Подробнее: controls.md |
settingsМассив |
['captions', 'quality', 'speed', 'loop'] |
Если используются стандартные элементы управления, то можно указать, какие настройки будут отображаться в меню |
i18nОбъект |
Подробнее defaults.js | Используется для интернационализации (i18n) текста в пользовательском интерфейсе. |
loadSpriteЛогический тип |
true |
Загружать спрайт из настройки iconUrl. Если false, то предполагается, что загрузка спрайта обрабатывается самостоятельно. |
iconUrlСтрока |
null |
URL-адрес или путь к спрайту SVG. |
iconPrefixСтрока |
plyr |
Префикс идентификатора для значков, используемых в стандартных элементах управления (например, "plyr-play" будет "plyr"). Это необходимо для предотвращения конфликтов, если используется свой собственный SVG-спрайт, но с элементами управления по умолчанию. |
blankVideoСтрока |
https://cdn.plyr.io/static/blank.mp4 |
URL-адрес или путь к пустому видеофайлу, который используется для правильной отмены сетевых запросов. |
autoplayЛогический тип |
false |
Автозапуск при загрузке. Если атрибут автозапуска присутствует в элементе <video> или <audio>, он будет автоматически установлен в true.
Автозапуск не рекомендуется и отключен во многих браузерах, так как это рассматривается как отрицательное явление. |
autopauseЛогический тип |
true |
Разрешает одновременно проигрываться только одному плееру. Применимо только для Vimeo |
seekTimeНомер |
10 |
Время в секундах для перемещения, когда пользователь нажимает перемотку вперед или назад. |
volumeНомер |
1 |
Число, от 0 до 1, представляющее начальный уровень звука. |
mutedЛогический тип |
false |
Начинать воспроизведение приглушенным.
Если атрибут muted присутствует в элементе <video> или <audio>, он будет автоматически установлен в true.
|
clickToPlayЛогический тип |
true |
Нужно ли нажатие на контейнер видео, чтобы переключать воспроизведение / паузу. |
disableContextMenuЛогический тип |
true |
Отключает правую кнопку мышки на контейнере с видео. |
hideControlsЛогический тип |
true |
Скрывает элементы управления видео автоматически после 2 секунд без движения мыши |
resetOnEndЛогический тип |
false |
Сброс воспроизведение до начала после его завершения. |
keyboardОбъект |
{ focused: true, global: false } |
Разрешает горячие клавиши |
tooltipsОбъект |
{ controls: false, seek: true } |
controls: Отображение подсказок элементов управления при наведии мышки |
durationНомер |
null |
Произвольная длительность медийного файла. |
displayDurationЛогический тип |
true |
Отображает длительность аудио или видео |
invertTimeЛогический тип |
true |
Отображение текущего времени в виде обратного отсчета, а не инкрементного счетчика. |
toggleInvertЛогический тип |
true |
Разрешает пользователям нажимать для переключения типа текущего времени (обратный или прямой отсчет). |
listenersОбъект |
null |
Позволяет привязывать прослушиватели событий к элементам управления перед обработчиками по умолчанию. |
captionsОбъект |
{ active: false, language: 'auto', update: false } |
Настройка для субтитров.active - переключает, если субтитры должны быть активны по умолчанию
language - задает язык по умолчанию для загрузки (если имеется). 'auto' использует язык браузера.
update - прослушивает изменения в треках и меню обновления. Это необходимо для некоторых потоковых библиотек, но может привести к невыбираемым языковым параметрам).
Пример файла субтитров
|
fullscreenОбъект |
{ enabled: true, fallback: true, iosNative: false } |
Настройка для полноэкранного просмотраenabled - переключение в полноэкранный режим должен быть включен.
fallback - разрешает возврат к полноэкранному виду (true/false/'force').
iosNative - использование собственного полноэкранного режима iOS при входе в него (без пользовательских элементов управления)
|
ratioСтрока |
null |
Принудительное соотношение сторон для всех видео формата: 'w:h': '16:9' или '4:3'. Если это не указано, то по умолчанию для HTML5 и Vimeo используется собственное разрешение видео. Поскольку через SDK с YouTube размеры недоступны, то по умолчанию принудительно используется 16:9. |
storageОбъект |
{ enabled: true, key: 'plyr' } |
enabled - разрешает использование локального хранилища для хранения пользовательских настроек.
key - имя ключа для использования. |
speedОбъект |
{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] } |
Скорость воспроизведенияselected - скорость воспроизведения по умолчанию.
options - Параметры для отображения в меню. Большинство браузеров откажутся играть медленнее, чем 0.5. |
qualityОбъект |
{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] } |
Качество видеоdefault уровень качества по умолчанию (если он существует в ваших источниках). options варианты для отображения. |
loopОбъект |
{ active: false } |
active - зацикливает текущее видео. Если атрибут loop присутствует в элементе <video> or <audio>, то будет автоматически установлен в true |
adsОбъект |
{ enabled: false, publisherId: '' } |
enabled - включает рекламу. publisherId: Уникальный vi.ai ID издателя. |
urlsОбъект |
Смотрите источники. | Переопределение любых URL-адресов API, |
vimeoОбъект |
{ byline: false, portrait: false, title: false, speed: true, transparent: false } |
Смотрите Vimeo опции.
Некоторые из них устанавливаются автоматически на основе других параметров конфигурации, а именно: loop, autoplay, muted, gesture, playsinline |
youtubeОбъект |
{ noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 } |
Смотрите YouTube опции. Некоторые из них устанавливаются автоматически на основе других параметров конфигурации, а именно: autoplay, hl, controls, disablekb, playsinline, cc_load_policy, cc_lang_pref, widget_referrer |
previewThumbnailsОбъект |
{ enabled: false, src: '' } |
enabled - Включает предварительный просмотр эскизов (они должны быть сгенерированы). src - должен быть или строкой или массивом строк, представляющих URL-адреса для файлов VTT, которые содержат адреса изображений. Пример VTT файла Пример спрайта Подробнее. |
9. Методы
Пример использования:
|
1 2 |
player.play(); // Старт воспроизведения player.fullscreen.enter(); // Открыть полный экран |
Список методов:
| Метод | Параметры | Описание |
|---|---|---|
play() |
- | Старт воспроизведения. |
pause() |
- | Пауза |
togglePlay(toggle) |
Логический | Переключение воспроизведения, если параметры не передаются, он будет переключаться на основе текущего состояния. |
stop() |
- | Остановка воспроизведения и сброс на начало. |
restart() |
- | Рестарт воспроизведения. |
rewind(seekTime) |
Номер | Перемотка воспроизведения на заданное время. Если параметр не передан, будет использоваться время по умолчанию. |
forward(seekTime) |
Номер | Быстрая перемотка вперед на указанное время. Если параметр не передан, будет использоваться время по умолчанию. |
increaseVolume(step) |
Номер | Увеличение громкости на указанный шаг. Если параметр не передан, будет использоваться шаг по умолчанию. |
decreaseVolume(step) |
Номер | Уменьшение громкости на указанный шаг. Если параметр не передан, будет использоваться шаг по умолчанию. |
toggleCaptions(toggle) |
Логический | Переключение отображения субтитров. Если параметр не передается, он будет переключаться в зависимости от текущего состояния. |
fullscreen.enter() |
- | Вход в полноэкранный режим. Если он не поддерживается, вместо него будет использоваться резервный вариант "полное окно". |
fullscreen.exit() |
- | Выход из полноэкранного режима. |
fullscreen.toggle() |
- | Переключение полноэкранного режима. |
airplay() |
- | Запуск диалогового окна airplay на поддерживаемых устройствах. |
toggleControls(toggle) |
Логический | Переключение элементов управления (только видео). |
on(event, function) |
Строка, функция | Добавление прослушивателя событий для заданного события. |
once(event, function) |
Строка, функция | Добавление прослушивателя событий для заданного события один раз. |
off(event, function) |
Строка, функция | Удаление прослушивателя событий для заданного события. |
supports(type) |
Строка | Проверка поддержки типа mime. |
destroy() |
- | Удаление. |
Пример:
HTML:
|
1 |
<div class="mybtn-restart">начать воспроизведение сначала</div> |
jQuery:
|
1 2 3 4 |
$('.mybtn-restart').click(function(){ player.restart(); player.play(); }); |
начать воспроизведение сначала
выключить
10. Геттеры и сеттеры
Пример сеттеров (установка значений)
|
1 2 |
player.volume = 0.5; // Установит громкость на 50% player.currentTime = 10; // Установит воспроизведение на 10 секунд |
Пример геттеров (получение значений)
|
1 2 3 |
player.volume; // Получит 0.5; player.currentTime; // Получит 10 player.fullscreen.active; // Получит false; |
Список геттеров и сеттеров:
| Свойство | Геттер | Сеттер | Описание |
|---|---|---|---|
isHTML5 |
✓ | - | Возвращает true/false указывающий, является ли текущий плеер HTML5. |
isEmbed |
✓ | - | Возвращает true/false указывающий, является ли текущий плеер встроенным (embed). |
playing |
✓ | - | Возвращает true/false указывающий, проигрывается ли текущий плеер. |
paused |
✓ | - | Возвращает true/false указывающий, находится ли текущий плеер в паузе. |
stopped |
✓ | - | Возвращает true/false указывающий, находится ли текущий плеер в остановке. |
ended |
✓ | - | Возвращает true/false указывающий, закончил ли текущий плеер воспроизведение
|
buffered |
✓ | - | Возвращает значение от 0 до 1, указывающее, сколько носителей буферизовано |
currentTime |
✓ | ✓ | Возвращает или задает текущее время для проигрывателя. Сеттер принимает ползунок в секундах. |
seeking |
✓ | - | Возвращает true/false указывающий, находится ли текущий плеер в перемотке. |
duration |
✓ | - | Возвращает продолжительность для текущего аудио или видео. |
volume |
✓ | ✓ | Возвращает или задает громкость для проигрывателя. Сеттер принимает число между 0 и 1. |
muted |
✓ | ✓ | Возвращает или задает приглушенное состояние проигрывателя. Сеттер принимает значение true/false. |
hasAudio |
✓ | - | Возвращает true/false, указывающее, есть ли на текущем проигрывателе звуковая дорожка. |
speed |
✓ | ✓ | Возвращает или задает скорость для плеера. Сеттер принимает значение в параметрах, указанных в конфигурации. Как правило, минимум должен быть 0,5. |
quality |
✓ | ✓ | Возвращает или задает качество для видео. Сеттер принимает значение из параметров, указанных в конфигурации. Только видео HTML5 |
loop |
✓ | ✓ | Возвращает или задает текущее состояние зацикливания проигрывателя. Сеттер принимает значение true/false.
|
source |
✓ | ✓ | Возвращает или задает текущий источник для проигрывателя. Сеттер принимает объект. Смотрите установка источника. |
poster |
✓ | ✓ | Возвращает или задает текущее изображение постера для проигрывателя. Сеттер принимает строку: URL-адрес для обновленного постера. |
autoplay |
✓ | ✓ | Возвращает или задает состояние автозапуска проигрывателя. Сеттер принимает значение true/false. |
currentTrack |
✓ | ✓ | Возвращает или задает дорожку по индексу. -1 означает, что трек отсутствует или титры не активны |
language |
✓ | ✓ | Возвращает или задает предпочтительный язык субтитров для проигрывателя. Сеттер принимает двухбуквенный код языка ISO. Поддержка языков зависит от подписей, которые включены. Если титры не содержат языковых данных или есть несколько дорожек с одним и тем же языком, можно вместо этого использовать currentTrack. |
fullscreen.active |
✓ | - | Возвращает true/false указывающий, находится ли текущий плеер в полноэкранном режиме. |
fullscreen.enabled |
✓ | - | Возвращает true/false указывающий, включен ли полноэкранный режим для текущего проигрывателя. |
pip |
✓ | ✓ | Возвращает или задает состояние проигрывателя "картинка в картинке". Сеттер принимает true/false. В настоящее время это поддерживается только в Safari 10+ (на MacOS Sierra+ и iOS 10+) и Chrome 70+. Только видео HTML5 |
ratio |
✓ | ✓ | Возвращает или задает формат видео. Сеттер принимает значение в том же формате, что и параметр ratio. |
download |
✓ | ✓ | Возвращает или задает URL-адрес для кнопки загрузки. Сеттер принимает значение, содержащее абсолютный URL-адрес. |
Установка источника:
Это позволяет изменять данные и тип плеера на лету, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
player.source = { type: 'audio', title: 'Название', sources: [ { src: '/path/to/audio.mp3', type: 'audio/mp3', }, { src: '/path/to/audio.ogg', type: 'audio/ogg', }, ], }; |
|
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 |
player.source = { type: 'video', title: 'Название', sources: [ { src: '/path/to/movie.mp4', type: 'video/mp4', size: 720, }, { src: '/path/to/movie.webm', type: 'video/webm', size: 1080, }, ], poster: '/path/to/poster.jpg', tracks: [ { kind: 'captions', label: 'English', srclang: 'en', src: '/path/to/captions.en.vtt', default: true, }, { kind: 'captions', label: 'French', srclang: 'fr', src: '/path/to/captions.fr.vtt', }, ], }; |
|
1 2 3 4 5 6 7 8 9 |
player.source = { type: 'video', sources: [ { src: 'bTqVqk7FSmY', provider: 'youtube', }, ], }; |
Примечание: src может быть идентификатором видео или URL.
|
1 2 3 4 5 6 7 8 9 |
player.source = { type: 'video', sources: [ { src: '143418951', provider: 'vimeo', }, ], }; |
Примечание: src может быть идентификатором видео или URL.
| Свойство | Тип | Описание |
|---|---|---|
type |
Строка | Либо video, либо audio. Примечание: YouTube и Vimeo в настоящее время не поддерживаются в качестве источников звука. |
title |
Строка | Название нового медийного файла. Используется для атрибута aria-label на кнопке воспроизведения и внешнего контейнера. YouTube и Vimeo заполняются автоматически. |
sources |
Массив | Массив источников. |
poster |
Строка | URL-адрес для постера (только видео HTML5). |
tracks |
Строка | Массив объектов трека (только видео HTML5). |
Пример:
Формат видео:
HTML:
|
1 |
Формат видео: <span class="ratio"></span> |
jQuery:
|
1 2 3 |
$(window).on("load", function () { $(".ratio").text(player.ratio); }); |
11. События
Можно прослушивать события на элементе где используется Plyr, например:
|
1 2 3 |
player.on('ready', event => { const instance = event.detail.plyr; }); |
Стандартные события:
| Тип события | Описание |
|---|---|
progress |
Периодически отправляет информацию о ходе загрузки медийного файла, которая доступна в атрибуте buffered медийного элемента. |
playing |
Отправляется, когда плеер начинает воспроизводиться (в первый раз, после паузы, либо после завершения и перезапуска). |
play |
Отправляется, когда воспроизведение начинается после приостановки (после события pause)
|
pause |
Отправляется, когда воспроизведение приостановлено. |
timeupdate |
Отправляется, когда время, указанное атрибутом currentTime изменилось. |
volumechange |
Отправляется при изменении громкости звука (как при установке громкости, так и при изменении muted).
|
seeking |
Отправляется, когда начинается перемотка. |
seeked |
Отправляется, когда перемотка заканчивается. |
ratechange |
Отправляется при изменении скорости воспроизведения. |
ended |
Отправляется по завершении воспроизведения. Примечание: это не срабатывает, если autoplay true. |
enterfullscreen |
Отправляется, когда плеер переходит в полноэкранный режим, либо полное окно для старых браузеров. |
exitfullscreen |
Отправляется при выходе проигрывателя из полноэкранного режима. |
captionsenabled |
Отправляется, когда субтитры включены. |
captionsdisabled |
Отправляется, когда субтитры выключены. |
languagechange |
Отправляется при изменении языка субтитров. |
controlshidden |
Отправляется, когда элементы управления скрыты. |
controlsshown |
Отправляется при отображении элементов управления. |
ready |
Запускается, когда плеер готов к вызовам API. |
Только HTML5:
| Тип события | Описание |
|---|---|
loadstart |
Отправляется при начале загрузки медийного файла. |
loadeddata |
Отправляется, когда первый кадр медийный файл завершил загрузку. |
loadedmetadata |
Метаданные медийного файла закончили загрузку |
qualitychange |
Отправляется, когда качество воспроизведения изменилось. |
canplay |
Отправляется, когда доступно достаточно данных, чтобы медийный файл можно было воспроизвести, по крайней мере, на пару кадров. Это соответствует состоянию готовности HAVE_ENOUGH_DATA readyState |
canplaythrough |
Отправляется, когда состояние готовности изменяется на CAN_PLAY_THROUGH, указывая, что весь медийный файл может воспроизводиться без перерыва, предполагая, что скорость загрузки остается по крайней мере на текущем уровне. |
stalled |
Отправляется, когда user agent пытается получить данные медийного файла, но они не поступают. |
waiting |
Отправляется, когда запрошенная операция (например, воспроизведение) задерживается до завершения другой (например, перемотка). |
emptied |
Медийный файл стал пустым; например, это событие отправляется, когда он уже загружен (или частично загружен), и вызывается метод load() для его перезагрузки. |
cuechange |
Отправляется, когда значение TextTrack изменилось во время отображения подсказки. |
error |
Отправляется при возникновении ошибки. Атрибут error элемента содержит дополнительную информацию. |
Только YouTube:
| Тип события | Описание |
|---|---|
statechange |
Состояние плеера изменилось. Код может быть доступен через событие event.detail.code.
Возможные значения: -1: неначался,
0: закончился,
1: играет,
2: пауза,
3: буферизация,
5: видео в очереди. См. документацию YouTube для дополнительной информации. |
Пример:
Когда видео проигрывается, мы добавляем к элементу(ам) классы, а когда оно находится в паузе - убираем.
Запустите видео для просмотра.
jQuery:
|
1 2 3 4 5 6 |
player.on('playing', event => { $(element).addClass('class'); }); player.on('pause', event => { $(element).removeClass('class'); }); |
12. Горячие клавиши
| Key | Action |
|---|---|
от 0 до 9 |
Пеоеместить ползунок просмотра от 0 до 90% соотв. |
Пробел |
Остановить или продолжить воспроизведение |
K |
Остановить или продолжить воспроизведение |
← |
Прыгнуть назад на заданное кол-во секунд (настройка seekTime) |
→ |
Прыгнуть вперед на заданное кол-во секунд (настройка seekTime) |
↑ |
Прибавить звук |
↓ |
Убавить звук |
M |
Отключить или включить звук |
F |
Открыть или закрыть полноэкранный режим |
C |
Включить и выключить субтитры |
L |
Включить и выключить воспроизведение по кругу |
13. Плагины и компоненты
| Тип | Автор | Ссылка |
|---|---|---|
WordPress |
Brandon Lavigne (@drrobotnik) | https://wordpress.org/plugins/plyr/ |
Angular |
Simon Bobrov (@smnbbrv) | https://github.com/smnbbrv/ngx-plyr |
React |
Jose Miguel Bejarano (@xDae) | https://github.com/xDae/react-plyr |
Vue |
Gabe Dunn (@redxtech) | https://github.com/redxtech/vue-plyr |
Neos |
Jon Uhlmann (@jonnitto) | https://packagist.org/packages/jonnitto/plyr |
Kirby |
Dominik Pschenitschni (@dpschen) | https://github.com/dpschen/kirby-plyrtag |
14. Источники и копирайты
Авторы @sam_potts / sampotts.me при помощи contributors
Сайт разработчиков: plyr.io
Plyr на github
Перевод и примеры: atuin
Видео: Oddworld, Hiérophante - Clichés
Аудио: Comfort Fit - "Sorry"
Подскажите пожалуйста, перелопатил кучу сайтов, как сделать автоматическое воспроизведение следующего плеера после окончания воспроизведения предыдущего
Любое автоматическое воспроизведение видео со звуком блокируется браузерами, а следующее видео и есть автомат.
Без звука можно сделать его, со звуком нет, и тут уже зависит от браузера, какой то не запустит вообще, какой то запустит, но без звука.
Что касается ютуба, там это можно, потому что браузер его знает 🙂
А что касается обычного сайта, тут нужно костыли какие то придумывать, т.е. работать не от событий - видео енд, другое старт, а как то иначе,
ЗЫ - я с таким не работал, именно конец видео, старт нового, просто так предположил, потому что знаю, что запустить автоматически видео со звуком сейчас нельзя, хотя есть для этого тьма мануалов, атрибуты html и события js.
Я знаю что блокируют, но по факту все сайты с музыкой воспроизводят следующий трек как так?
А вот музыка воспроизводится, посмотрел в плейлистах сейчас, там переключается и поет дальше.
Подскажите пожалусто на плеере не видны иконки как их подключить?
Добрый день, у меня почему то не работает перемотка, всегда кидает в начало и в дереве видно что js обновляет значения в ДОМе
А как убрать кнопку PiP и добавить кнопку выбора качества?
Вмду что надо прописывать код типа
const player = new Plyr('#player', { quality: { default: 576, options: [1440, 1080, 720, 576, 480, 360, 240] } });а куда именно?
Не получается подключить и несколько сразу плейлистов, либо я не понимаю как правильно прописать.
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
или
const players = Plyr.setup('.js-player');
Если речь идет об этих плейлистах, то они и не будут работать при таком подключении, там для каждого нужно отдельно.
Доброго времени суток.
Скажите не получается запустить ваш плейлист для множества песен.
Отправляю ниже html код
Скажите пожалуйста, что я делаю не так.
Здравствуйте. Счетчик просмотров привязать на него нельзя?
Данные счетчика должны где то храниться, например в базе данных, и соотв. нужно писать код для их записи и вывода.
Другими словами, мы используем событие, например ended, далее передаем данные на сервер и добавляем к счетчику +1
Я так понимаю вариант с ютубом не работает на сегодня.
Он работает, только никак на него не влияет
Как сделать, чтобы отображалась настройка выбора качества видео для Ютуба?
Делал так:
const player = new Plyr('#player', { quality: { default: 576, options: [1440, 1080, 720, 576, 480, 360, 240] } });никакого эффекта..
п.с. вообще что то настройки у меня никакие не работают почему то..
У ютуба не работает качество (ниже было в коментах), а про другие настройки не знаю, что не так.
А какое тогда качество по умолчанию транслирует плеер Plyr?
Здравствуйте ребят. Где прописать настройку autoplay true??
Попробуйте так:
const player = new Plyr('#player', { autoplay: true, muted: true });Со звуком точно не включится автозапуск.
Александр, благодарю Вас!
Ошибок много Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin
Почему выходят ошибки не понятно у меня протокол http, а не https возможно в этом проблема
строка кода куда ведёт ошибка
n.sendMessage=function(a){a.id=this.id;a.channel="widget";var b=Lf(a),c=[Rb(this.i.src||"").replace("http:","https:")];if(this.i.contentWindow)for(var d=0;d<c.length;d++)try{this.i.contentWindow.postMessage(b,c[d])}catch(Tb){if(Tb.name&&"SyntaxError"===Tb.name){if(!(Tb.message&&0<Tb.message.indexOf("target origin ''"))){var e=void 0,f=Tb;e=void 0===e?{}:e;e.name=N("INNERTUBE_CONTEXT_CLIENT_NAME",1);e.version=N("INNERTUBE_CONTEXT_CLIENT_VERSION");var g=e||{},h="WARNING";h=void 0===h?"ERROR":h;if(f){f.hasOwnProperty("level")&&Здравствуйте! Подскажите, пожалуйста, что нужно добавить в код, чтобы plyr с видео с youtube, работал на устройствах c ios?
Сейчас вот такой код, и он прекрасно работает на компьютерах и на мобильных телефонах c oc android:
С ios я не подскажу, мне проверить негде.
Здравствуйте! Подскажите, пожалуйста, если ли функция блокировки всплывающих подсказок. Когда подключаю видео с одноклассников - всплывают комментарии из под видео прямо на экране.
Врядли, т.к. подключение видео идет через фрейм, а его нельзя редактировать.
Есть ли возможность отключить на проигрывателе видео с Ютуб иконку ютуба, название видео и всплывающие похожие видео в экране плеера. Если да, то подскажите, пожалуйста, как это сделать.
На сколько я знаю нет.
Александр, добрый день!
Не смог заставить работать событие error. Я так понял, что оно ни у кого не работает. Может у вас есть какие-то обходные решения?
Оно будет работать если атрибут src прописан непосредственно к video или audio, а не к source.
Это события не плюра так то, а медийные
Можно, например так вызвать его:
const video = document.querySelector('#player source'); video.addEventListener('error', () => { console.log("Ошибка"); });Так вот и получается, что событие error не будет работать в принципе, т.к. источник через src плюру мы задать не можем, только через source.
Через source событие ловится, однако суть ошибки понять невозможно - всё undefined 🙁
Нормальная информация, судя по stackoverflow выдается с ошибками к audio/video, но у плюра они не ловятся...
Засада!
А какую ошибку вы хотите поймать?
Плюр можно задать без source, например
А source можно ловить без него, через addEventListener
Если файла нет или он не может быть проигран, мы эту ошибку поймаем и далее что угодно.
У меня plyr с плейлистом (еще одна благодарность в вашу копилку! =), поэтому мне необходимо задавать источник с помощью скрипта. Вариант с атрибутом src не подходит.
Да, мы поймаем сам факт ошибки. А в чем она - расшифровки не будет.
А мне хотелось бы понимать, в чем трабла - нет файла (404, 410), или нет доступа к файлу (403, 401) или может файл битый и не может быть проигран, формат не тот - вариантов полно.
Посмотрите не в сторону Плюра, а в сторону медиек HTML5, например вот
добрый день, можно немного подробней где и что настраивать
подключаю src="path/to/plyr.js" и не фига не работает если беру из демо то ок src="path/to/demo.js"
внутри js путь к svg правильный, получается что plyr.js или не запускается или не работает хотя скорее что не работает тк с demo.js все ок
Вопрос почему???
Нужно результат смотреть, чтобы видеть, что как подключено, инициализировано и т.л.
Вообщем дело было не в бабине ....
Ктож знал что
const player = new Plyr('#player');надо подключать в конце body
я его изначально вставил в head как и все
rel="shortcut icon" href="<?php echo $this->getTemplateFilePath('images/favicons/favicon.ico'); ?>"> rel="stylesheet" href="<?php echo $this->getTemplateFilePath('js/dist/plyr.css'); ?>" /> src="<?php echo $this->getTemplateFilePath('js/dist/plyr.js'); ?>" crossorigin="anonymous"> </head>а что в демо значит crossorigin="anonymous"
Что это за демо такое?
А вообще вот
демо есть в папке с дистрибутом, эта страница https://plyr.io/
ну и еще вопрос, в демо при наведении на полосу прокрутки появляется кадр того места куда навел
а тут выше в примерах просто тайминг как и у меня
Что надо настроить и где?
да я видел пункт про previewThumbnails предварительный просмотр эскизов, но что то мне кацца это не то
Это оно, вот например, такой же первый попавшийся с ютуба
Вот только как это делается, не руками же, я не интересовался.
Спасибо тебе человечище!!!
Я использую wmplayer.biz
Они принимают сайты почти всех тематик, есть возможность монетизации трафика, неплохие готовые шаблоны
Здравствуйте.
Подскажите есть ли возможность переключения плейлиста в фоновом режиме на заблокированном экране мобильного устройства?
Здраствуйте, хорошая статья. Только я мало, что соображаю - есть вопросы
Вы написали скачиваем PLYR, устанавливаем. Куда устанавливаем?
Вы задаёте путь href="/path/to/plyr.css" / посмотрел по структуре скаченной директории там нет такого пути и по поиску plyr.css не выдает не один файл.
Надеюсь подключить плеер, не могу разобраться. Если можете чуть подробнее обяснить куда этот файл заливать, объясните пожалуйста
/path/to/ имеется в виду путь к нему, т.к. на сайте он может быть где угодно.
В архиве все нужные файлы находятся а папке dist
Структура такая:
1 - подключаем css
2 - html коды плеера(ов)
3 - подключение js и инициализируем с настройками или без
Здравствуйте, ищу плеер воспроизведений аудиокниг и коротких рассказов. Для этого мне нужно что бы плеер запоминал позицию времени - то есть при перезагрузке странице возвращал таймкод в то положение в котором было до загрузки странице.
Реализация в этом плеере возможна? если да, то как это осуществить. Я особо не разбираюсь в java
Здравствуйте!
подскажите пожалуйста, как вообще установить на сайт: 6. Подключение видео с YouTube?
Уже все перепробовал, ничего не получается 🙁
Объясните пожалуйста новичку.
Подключаю ютуб видео через plyr, не получается установить выбор качества (не отображается в плеере). Controls и quality подключены. В чем может быть дело?
Посмотрите лучше в первоисточнике.
Вот, например тема про это: Video quality options (HTML5, YouTube, Vimeo), а новая версия 3.6.2
Может уже и организовали это.
Спасибо.
Посмотрел, обновил - пока, видимо, не организовали 🙁
При использовании постера не воспроизводит видео на телефоне. У кого-нибудь была такая проблема?
А на этой странице в Демо и Подключение HTML5 видео тоже не воспроизводится? (в них используется постер)
На этой странице все воспроизводится ...
Тогда код в студию!!!
А точнее вашу страницу, где не работает
Подскажите как сделать что бы одновременно проигрывался только один плеер, а предидущий ставился на паузу, нужно для аудио плеера (про Вимео знаю) ?
Наверняка можно умнее сделать, но первое, что пришло на ум, вот:
$.each(players,function(i){ players[i].on('play', event => { for (let a = 0; a < players.length; a++){ if (a!=i) { players[a].pause(); } } }); });Александр, здравствуйте.
Столкнулся с проблемой одновременного проигрывания треков в Plyr, использую для проигрывания именно аудио. Вы предложили немного выше решение, Вы могли бы немного уточнить ?
Плеер сетапится стандартно:
plyr.setup(document.querySelectorAll('.player'), {
controls: ['play-large', 'play', 'progress', 'current-time', 'pip', 'airplay', 'volume', 'mute']
});
Не могу понять, что именно перебирать на странице и кому добавлять pause.
Что именно подставить вместо players в Вашем примере немного ниже ?
$.each(players,function(i){
players[i].on('play', event => {
for (let a = 0; a < players.length; a++){
if (a!=i) {
players[a].pause();
}
}
});
});
Так, была излишняя паника. Отличный пример кода. Дополнил вот таким образом.
let players = plyr.setup(document.querySelectorAll('.player'), {
controls: ['play-large', 'play', 'progress', 'current-time', 'pip', 'airplay', 'volume', 'mute']
});
$.each(players,function(i){
players[i].on('play', event => {
for (let a = 0; a < players.length; a++){
if (a!=i) {
players[a].pause();
}
}
});
});
Благодарю! Как раз искал подобное решение, чтобы два и более аудио не звучало одновременно!
Всем привет! Кто подскажет, как настроить, чтобы воспроизводились файлы mp4 с другого сервера? Например, плеер у меня на странице по адресу http://mysite.com/video/id_video=123, а файл находится по адресу http://server.mysite.com/video/123.mp4
А если путь прямой прописать, он разве не работает?
Как сделать чтобы работало с разными видео на одной странице?
Несколько плееров?
Ниже комментарий про это.
Привет, не в курсе как вывести что б при наведении на шкалу времени отображались картинки из видео, это реализовано у них на демо ролике.
Настройка previewThumbnails
Только для этого нужны спрайты и информация для их показа
Спасибо, круто!
А как сделать несколько плееров на одной странице ?
Добавил в описание:
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));или
const players = Plyr.setup('.js-player');К плеерам добавляем класс js-player и оперируем потом с массивом, например:
Спасибо за подробное описание
А как подключать vast/vpaid ссылки?