Sobre o projeto

Plyr é um player de mídia simples, leve, acessível e personalizável para vídeo e áudio HTML5, além de embeds do YouTube e Vimeo. Ele tem como alvo navegadores modernos e é escrito em JavaScript ES6 puro, sem dependência de framework ou jQuery, com estilos criados em Sass e expostos por meio de custom properties CSS. Principais recursos evidenciados pelo README: - Suporte a formatos: elementos nativos de vídeo e áudio HTML5, além de progressive enhancement de iframes do YouTube e Vimeo ou divs simples usando os atributos data-plyr-provider e data-plyr-embed-id. - Acessibilidade: legendas VTT e suporte a leitores de tela, com marcação semântica como input type=range para volume, elementos progress e botões reais. - Personalização: custom properties CSS (por exemplo --plyr-color-main) e variáveis Sass permitem reformular o player globalmente, por classe ou inline. - Layout responsivo e uma classe de wrapper responsivo 16:9 para provedores iframe. - Integrações de reprodução por streaming com hls.js, Shaka Player e dash.js. - API JavaScript e eventos padronizados para todos os provedores, de modo que YouTube e Vimeo não exigem tratamento separado de API. - Tela cheia com fallback para modo janela inteira, picture-in-picture, suporte a playsinline, atalhos de teclado, controles de velocidade, múltiplas faixas de legendas, i18n dos controles e miniaturas de pré-visualização. - Ganchos de monetização via integração de anúncios parceiros ou uma opção personalizada ads.tagUrl. A configuração é direta: inclua plyr.css e plyr.js (ou a versão com polyfills) de um CDN ou arquivos auto-hospedados e instancie com new Plyr('#player'). Arquivos minificados pré-construídos estão disponíveis no CDN ou no unpkg, ou você pode compilar a partir do código-fonte com npm i && npm run build. Um sprite SVG para ícones é carregado do CDN por padrão e pode ser sobrescrito por meio de opções. O README documenta um grande conjunto de custom properties CSS que cobrem cores, espaçamento e raios dos controles, menus, tooltips, estilo de progresso e range, legendas e tipografia, tornando prático combinar com um sistema de design existente sem precisar modificar a folha de estilos.