Plyr — это красивый, простой и легко настраиваемый плеер, который поддерживают все современные браузеры. И кроме этого он имеет массу других преимуществ.
- Демо
- Преимущества
- Установка
- Подключение HTML5 видео
- Подключение HTML5 аудио
- Подключение видео с YouTube
- Подключение видео с Vimeo
- Настройки
- Методы
- Геттеры и сеттеры
- События
- Горячие клавиши
- Плагины и компоненты
- Создание плейлистов (отдельная тема)
- Источники и копирайты
1. Демо
2. Преимущества
Поддерживает основные форматы HTML5 видео и аудио, а также YouTube и Vimeo.
Поддерживает субтитры VTT и программ чтения с экрана
Имеет возможность изменять вид плеера и разметку
Использует правильные элементы: — для звука, — для прогресса, — для кнопок
КАК СДЕЛАТЬ NFT Аватар ВКонтакте | Rarible | MetaMask | VK
Работает с любым размером экрана
Поддерживает hls.js, Shaka и dash.js потокового воспроизведения
Переключение воспроизведения, громкости, поиска и многое другое через стандартизированный API
Поддерживает собственный полноэкранный режим с резервным режимом «полного окна»
Поддерживает управление клавиатурой
Поддерживает режим «картинка в картинке»
Поддерживает атрибут playsinline
Поддерживает нескольких дорожек субтитров
Поддерживает показ эскизов предварительного просмотра
Не требует фреймворков, таких как jQuery
Имеет возможность управлять скоростью воспроизведения
Имеет возможность монетизации видео
Описывать все эти возможности я не буду, при желании их можно посмотреть на github, но постараюсь подробно описать этот плеер, чтобы максимально удобно и быстро настроить его на сайте.
3. Установка плейера Plyr
Скачиваем плеер Plyr:
Подключаем CSS файл с вашего сайта:
Или с сайта разработчика:
Подключаем JS файл и инициализируем:
const player = new Plyr ( ‘#player’ ) ;
Как и 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 можно подключить двумя способами.
Через с прогрессивным улучшением (используя embed). Данный метод рекомендуется.
src = «https://www.youtube.com/embed/6wJAdfTJZUQ»
allowfullscreen
allowtransparency
allow = «autoplay»
Примечание: класс plyr__video-embed сделает плеер формата 16:9. Когда плеер включится, будет использоваться пользовательский параметр конфигурации ratio
Второй вариант через
Примечание: атрибут data-plyr-embed-id может быть либо идентификатором видео, либо его URL-адресом.
7. Подключение видео с Vimeo
Подключается почти также, как и YouTube
allowfullscreen
allowtransparency
allow = «autoplay»
8. Настройки
Второй аргумент конструктора для настроек, например:
const player = new Plyr ( ‘#player’ , <
title : ‘Название’ ,
Параметры настроек могут быть переданы также в атрибуте 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 | Автозапуск при загрузке. Если атрибут автозапуска присутствует в элементе или , он будет автоматически установлен в true . Автозапуск не рекомендуется и отключен во многих браузерах, так как это рассматривается как отрицательное явление. |
| autopause Логический тип |
true | Разрешает одновременно проигрываться только одному плееру. Применимо только для Vimeo |
| seekTime Номер |
10 | Время в секундах для перемещения, когда пользователь нажимает перемотку вперед или назад. |
| volume Номер |
1 | Число, от 0 до 1, представляющее начальный уровень звука. |
| muted Логический тип |
false | Начинать воспроизведение приглушенным. Если атрибут muted присутствует в элементе или , он будет автоматически установлен в true . |
| clickToPlay Логический тип |
true | Нужно ли нажатие на контейнер видео, чтобы переключать воспроизведение / паузу. |
| disableContextMenu Логический тип |
true | Отключает правую кнопку мышки на контейнере с видео. |
| hideControls Логический тип |
true | Скрывает элементы управления видео автоматически после 2 секунд без движения мыши |
| resetOnEnd Логический тип |
false | Сброс воспроизведение до начала после его завершения. |
| keyboard Объект |
Разрешает горячие клавиши | |
| tooltips Объект |
controls : Отображение подсказок элементов управления при наведии мышки | |
| duration Номер |
null | Произвольная длительность медийного файла. |
| displayDuration Логический тип |
true | Отображает длительность аудио или видео |
| invertTime Логический тип |
true | Отображение текущего времени в виде обратного отсчета, а не инкрементного счетчика. |
| toggleInvert Логический тип |
true | Разрешает пользователям нажимать для переключения типа текущего времени (обратный или прямой отсчет). |
| listeners Объект |
null | Позволяет привязывать прослушиватели событий к элементам управления перед обработчиками по умолчанию. |
| captions Объект |
Настройка для субтитров. active — переключает, если субтитры должны быть активны по умолчанию language — задает язык по умолчанию для загрузки (если имеется). ‘auto’ использует язык браузера. update — прослушивает изменения в треках и меню обновления. Это необходимо для некоторых потоковых библиотек, но может привести к невыбираемым языковым параметрам). Пример файла субтитров |
|
| fullscreen Объект |
Настройка для полноэкранного просмотра enabled — переключение в полноэкранный режим должен быть включен. fallback — разрешает возврат к полноэкранному виду (true/false/’force’). iosNative — использование собственного полноэкранного режима iOS при входе в него (без пользовательских элементов управления) |
|
| ratio Строка |
null | Принудительное соотношение сторон для всех видео формата: ‘w:h’ : ’16:9′ или ‘4:3’ . Если это не указано, то по умолчанию для HTML5 и Vimeo используется собственное разрешение видео. Поскольку через SDK с YouTube размеры недоступны, то по умолчанию принудительно используется 16:9. |
| storage Объект |
enabled — разрешает использование локального хранилища для хранения пользовательских настроек. key — имя ключа для использования. |
|
| speed Объект |
Скорость воспроизведения selected — скорость воспроизведения по умолчанию. options — Параметры для отображения в меню. Большинство браузеров откажутся играть медленнее, чем 0.5. |
|
| quality Объект |
Качество видео default уровень качества по умолчанию (если он существует в ваших источниках). options варианты для отображения. |
|
| loop Объект |
active — зацикливает текущее видео. Если атрибут loop присутствует в элементе or , то будет автоматически установлен в true | |
| ads Объект |
enabled — включает рекламу. publisherId : Уникальный vi.ai ID издателя. | |
| urls Объект |
Смотрите источники. | Переопределение любых URL-адресов API, |
| vimeo Объект |
Смотрите Vimeo опции. Некоторые из них устанавливаются автоматически на основе других параметров конфигурации, а именно: loop , autoplay , muted , gesture , playsinline | |
| youtube Объект |
Смотрите YouTube опции. Некоторые из них устанавливаются автоматически на основе других параметров конфигурации, а именно: autoplay , hl , controls , disablekb , playsinline , cc_load_policy , cc_lang_pref , widget_referrer | |
| previewThumbnails Объект |
enabled — Включает предварительный просмотр эскизов (они должны быть сгенерированы). src — должен быть или строкой или массивом строк, представляющих URL-адреса для файлов VTT, которые содержат адреса изображений. Пример VTT файла Пример спрайта Подробнее. |
9. Методы
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() | — | Удаление. |
Источник: atuin.ru