Медиа-плейер Plyr для HTML5, YouTube и Vimeo

Plyr — это красивый, простой и легко настраиваемый плеер, который поддерживают все современные браузеры. И кроме этого он имеет массу других преимуществ.

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 файл с вашего сайта:

Или с сайта разработчика:

Подключаем JS файл и инициализируем:

Как и CSS файл, JS можно подключить с сайта разработчика:

По умолчанию, значки, используемые в элементах управления 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 видео

5. Подключение HTML5 аудио

6. Подключение видео с YouTube

Видео с YouTube можно подключить двумя способами.

Через <iframe>с прогрессивным улучшением (используя embed). Данный метод рекомендуется.

Примечание: класс plyr__video-embed сделает плеер формата 16:9. Когда плеер включится, будет использоваться пользовательский параметр конфигурации ratio

Второй вариант через <div>

Примечание: атрибут data-plyr-embed-id может быть либо идентификатором видео, либо его URL-адресом.

7. Подключение видео с Vimeo

Подключается почти также, как и YouTube

Через <iframe>

Через <div>

8. Настройки

Второй аргумент конструктора для настроек, например:

Параметры настроек могут быть переданы также в атрибуте data-plyr-config:

Список настроек:
Настройка и ее тип По умолчанию Описание
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. Методы

Пример использования:

Список методов:
Метод Параметры Описание
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:
jQuery:
начать воспроизведение сначала выключить

10. Геттеры и сеттеры

Пример сеттеров (установка значений)

Пример геттеров (получение значений)

Список геттеров и сеттеров:
Свойство Геттер Сеттер Описание
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-адрес.
Установка источника:

Это позволяет изменять данные и тип плеера на лету, например:

Примечание: src может быть идентификатором видео или URL.

Примечание: src может быть идентификатором видео или URL.

Свойство Тип Описание
type Строка Либо video, либо audio. Примечание: YouTube и Vimeo в настоящее время не поддерживаются в качестве источников звука.
title Строка Название нового медийного файла. Используется для атрибута aria-label на кнопке воспроизведения и внешнего контейнера. YouTube и Vimeo заполняются автоматически.
sources Массив Массив источников.
poster Строка URL-адрес для постера (только видео HTML5).
tracks Строка Массив объектов трека (только видео HTML5).
Пример:
Формат видео:
HTML:
jQuery:

11. События

Можно прослушивать события на элементе где используется 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:

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"

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Сергей:

    Есть ли возможность отключить на проигрывателе видео с Ютуб иконку ютуба, название видео и всплывающие похожие видео в экране плеера. Если да, то подскажите, пожалуйста, как это сделать.

    Ответить
    • Alexander:

      На сколько я знаю нет.

      Ответить
  • Павел:

    error — Отправляется при возникновении ошибки. Атрибут error элемента содержит дополнительную информацию.

    Александр, добрый день!
    Не смог заставить работать событие error. Я так понял, что оно ни у кого не работает. Может у вас есть какие-то обходные решения?

    Ответить
    • Alexander:

      Оно будет работать если атрибут src прописан непосредственно к video или audio, а не к source.
      Это события не плюра так то, а медийные
      Можно, например так вызвать его:

      const video = document.querySelector('#player source');
      video.addEventListener('error', () => {
      	console.log("Ошибка");
      });
      Ответить
      • Павел:

        Так вот и получается, что событие error не будет работать в принципе, т.к. источник через src плюру мы задать не можем, только через source.
        Через source событие ловится, однако суть ошибки понять невозможно — всё undefined 🙁
        Нормальная информация, судя по stackoverflow выдается с ошибками к audio/video, но у плюра они не ловятся…
        Засада!

        Ответить
        • Alexander:

          А какую ошибку вы хотите поймать?
          Плюр можно задать без source, например

          <audio src="file.mp3" id="player"></audio>

          А source можно ловить без него, через addEventListener
          Если файла нет или он не может быть проигран, мы эту ошибку поймаем и далее что угодно.

          Ответить
          • Павел:

            У меня plyr с плейлистом (еще одна благодарность в вашу копилку! =), поэтому мне необходимо задавать источник с помощью скрипта. Вариант с атрибутом src не подходит.

            Если файла нет или он не может быть проигран, мы эту ошибку поймаем

            Да, мы поймаем сам факт ошибки. А в чем она — расшифровки не будет.
            А мне хотелось бы понимать, в чем трабла — нет файла (404, 410), или нет доступа к файлу (403, 401) или может файл битый и не может быть проигран, формат не тот — вариантов полно.

            Ответить
            • Alexander:

              А мне хотелось бы понимать, в чем трабла

              Посмотрите не в сторону Плюра, а в сторону медиек HTML5, например вот

              Ответить
  • Александр:

    добрый день, можно немного подробней где и что настраивать
    подключаю src="path/to/plyr.js" и не фига не работает если беру из демо то ок src="path/to/demo.js"

    внутри js путь к svg правильный, получается что plyr.js или не запускается или не работает хотя скорее что не работает тк с demo.js все ок
    Вопрос почему???

    Ответить
    • Alexander:

      Нужно результат смотреть, чтобы видеть, что как подключено, инициализировано и т.л.

      Ответить
      • Александр:

        Вообщем дело было не в бабине ….
        Ктож знал что

            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"

        Ответить
        • Alexander:

          Что это за демо такое?
          А вообще вот

          Ответить
          • Александр:

            демо есть в папке с дистрибутом, эта страница https://plyr.io/

            ну и еще вопрос, в демо при наведении на полосу прокрутки появляется кадр того места куда навел
            а тут выше в примерах просто тайминг как и у меня
            Что надо настроить и где?

            да я видел пункт про previewThumbnails предварительный просмотр эскизов, но что то мне кацца это не то

            Ответить
            • Alexander:

              Это оно, вот например, такой же первый попавшийся с ютуба

              Вот только как это делается, не руками же, я не интересовался.

              Ответить
        • Аноним:

          надо подключать в конце body
          я его изначально вставил в head как и все

          Спасибо тебе человечище!!!

          Ответить
  • Владимир:

    Я использую wmplayer.biz
    Они принимают сайты почти всех тематик, есть возможность монетизации трафика, неплохие готовые шаблоны

    Ответить
  • Жека:

    Здравствуйте.
    Подскажите есть ли возможность переключения плейлиста в фоновом режиме на заблокированном экране мобильного устройства?

    Ответить
  • en:

    Здраствуйте, хорошая статья. Только я мало, что соображаю — есть вопросы
    Вы написали скачиваем PLYR, устанавливаем. Куда устанавливаем?

    Вы задаёте путь href="/path/to/plyr.css" / посмотрел по структуре скаченной директории там нет такого пути и по поиску plyr.css не выдает не один файл.

    Надеюсь подключить плеер, не могу разобраться. Если можете чуть подробнее обяснить куда этот файл заливать, объясните пожалуйста

    Ответить
    • Alexander:

      /path/to/ имеется в виду путь к нему, т.к. на сайте он может быть где угодно.
      В архиве все нужные файлы находятся а папке dist
      Структура такая:
      1 — подключаем css
      2 — html коды плеера(ов)
      3 — подключение js и инициализируем с настройками или без

      Ответить
      • Алексей:

        Здравствуйте, ищу плеер воспроизведений аудиокниг и коротких рассказов. Для этого мне нужно что бы плеер запоминал позицию времени — то есть при перезагрузке странице возвращал таймкод в то положение в котором было до загрузки странице.
        Реализация в этом плеере возможна? если да, то как это осуществить. Я особо не разбираюсь в java

        Ответить
  • Олег:

    Здравствуйте!
    подскажите пожалуйста, как вообще установить на сайт: 6. Подключение видео с YouTube?
    Уже все перепробовал, ничего не получается 🙁
    Объясните пожалуйста новичку.

    Ответить
  • Василий:

    Подключаю ютуб видео через plyr, не получается установить выбор качества (не отображается в плеере). Controls и quality подключены. В чем может быть дело?

    Ответить
      • Василий:

        Спасибо.
        Посмотрел, обновил — пока, видимо, не организовали 🙁

        Ответить
  • Максим:

    При использовании постера не воспроизводит видео на телефоне. У кого-нибудь была такая проблема?

    Ответить
    • Alexander:

      А на этой странице в Демо и Подключение HTML5 видео тоже не воспроизводится? (в них используется постер)

      Ответить
      • Максим:

        На этой странице все воспроизводится …

        Ответить
        • Alexander:

          Тогда код в студию!!!
          А точнее вашу страницу, где не работает

          Ответить
  • Александр:

    Подскажите как сделать что бы одновременно проигрывался только один плеер, а предидущий ставился на паузу, нужно для аудио плеера (про Вимео знаю) ?

    Ответить
    • Alexander:

      Наверняка можно умнее сделать, но первое, что пришло на ум, вот:

      $.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();
          }
          }
          });
          });

          Ответить
      • Александр:

        Благодарю! Как раз искал подобное решение, чтобы два и более аудио не звучало одновременно!

        Ответить
  • Dany:

    Всем привет! Кто подскажет, как настроить, чтобы воспроизводились файлы mp4 с другого сервера? Например, плеер у меня на странице по адресу http://mysite.com/video/id_video=123, а файл находится по адресу http://server.mysite.com/video/123.mp4

    Ответить
    • Alexander:

      А если путь прямой прописать, он разве не работает?

      Ответить
  • Плер:

    Как сделать чтобы работало с разными видео на одной странице?

    Ответить
    • Alexander:

      Несколько плееров?
      Ниже комментарий про это.

      Ответить
  • Alex:

    Привет, не в курсе как вывести что б при наведении на шкалу времени отображались картинки из видео, это реализовано у них на демо ролике.

    Ответить
    • Alexander:

      Настройка previewThumbnails
      Только для этого нужны спрайты и информация для их показа

      Ответить
  • Джесси:

    Спасибо, круто!

    А как сделать несколько плееров на одной странице ?

    Ответить
    • Alexander:

      Добавил в описание:

      const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));

      или

      const players = Plyr.setup('.js-player'); 

      К плеерам добавляем класс js-player и оперируем потом с массивом, например:

      <div onclick="players[1].play()">Включить второй</div> 
      Ответить
  • Евгений:

    Спасибо за подробное описание

    Ответить
    • Андрей:

      А как подключать vast/vpaid ссылки?

      Ответить