Об этом проекте

Plyr — это простой, легкий, доступный и настраиваемый медиаплеер для HTML5-видео и аудио, а также встраиваемых YouTube и Vimeo. Он ориентирован на современные браузеры и написан на чистом ES6 JavaScript без фреймворков и зависимостей от jQuery, стили созданы на Sass и доступны через CSS-переменные. Ключевые возможности, описанные в README: - Поддержка форматов: нативные HTML5-видео и аудио элементы, а также прогрессивное улучшение iframe YouTube и Vimeo или обычных div с атрибутами data-plyr-provider и data-plyr-embed-id. - Доступность: субтитры VTT и поддержка скринридеров, семантическая разметка, например input type=range для громкости, элементы progress и настоящие кнопки. - Настройка: CSS-переменные (например, --plyr-color-main) и Sass-переменные позволяют переопределить стили глобально, для класса или инлайн. - Адаптивная верстка и адаптивный класс-обертка 16:9 для iframe-провайдеров. - Интеграция потокового воспроизведения с hls.js, Shaka Player и dash.js. - Стандартизированный JavaScript API и события для всех провайдеров, поэтому для YouTube и Vimeo не требуется отдельная обработка API. - Полноэкранный режим с запасным вариантом на весь окно, режим «картинка в картинке», поддержка playsinline, горячие клавиши, управление скоростью, несколько дорожек субтитров, интернационализация элементов управления и превью-миниатюры. - Монетизация через партнерскую рекламную интеграцию или пользовательскую опцию ads.tagUrl. Настройка проста: подключите plyr.css и plyr.js (или сборку с полифиллами) с CDN или локальных файлов, затем создайте экземпляр с помощью new Plyr('#player'). Готовые минифицированные файлы доступны на CDN или unpkg, либо можно собрать из исходников с помощью npm i && npm run build. SVG-спрайт для иконок по умолчанию загружается с CDN и может быть переопределен через опции. В README документирован большой набор CSS-переменных, охватывающих цвета, отступы и радиусы элементов управления, меню, подсказки, стили прогресс-бара и ползунков, субтитры и типографику, что позволяет легко адаптировать плеер под существующую дизайн-систему без изменения стилей.