plyr

Plyr est un lecteur multimédia simple, léger, accessible et personnalisable pour les vidéos et audio HTML5, ainsi que pour les intégrations YouTube et Vimeo. Il cible les navigateurs modernes et est écrit en JavaScript ES6 vanilla, sans framework ni dépendance jQuery, avec des styles rédigés en Sass et exposés via des propriétés personnalisées CSS. Les principales capacités mises en évidence par le README : - Prise en charge des formats : éléments natifs vidéo et audio HTML5, plus amélioration progressive des iframes YouTube et Vimeo ou des simples divs utilisant les attributs data-plyr-provider et data-plyr-embed-id. - Accessibilité : sous-titres VTT et prise en charge des lecteurs d'écran, avec un balisage sémantique tel que input type=range pour le volume, des éléments progress et de vrais boutons. - Personnalisation : propriétés personnalisées CSS (par exemple --plyr-color-main) et variables Sass permettant de restyler le lecteur globalement, par classe ou en ligne. - Mise en page réactive et classe d'habillage responsive 16:9 pour les fournisseurs iframe. - Intégrations de lecture en streaming avec hls.js, Shaka Player et dash.js. - API JavaScript standardisée et événements communs à tous les fournisseurs, de sorte que YouTube et Vimeo ne nécessitent pas de gestion d'API séparée. - Plein écran avec repli en mode fenêtre complète, incrustation d'image (picture-in-picture), prise en charge de playsinline, raccourcis clavier, contrôles de vitesse, multiples pistes de sous-titres, i18n des contrôles et vignettes d'aperçu. - Accroches de monétisation via une intégration publicitaire partenaire ou une option personnalisée ads.tagUrl. L'installation est simple : incluez plyr.css et plyr.js (ou la version avec polyfills) depuis un CDN ou des fichiers auto-hébergés, puis instanciez avec new Plyr('#player'). Des fichiers minifiés préconstruits sont disponibles depuis le CDN ou unpkg, ou vous pouvez compiler depuis la source avec npm i && npm run build. Un sprite SVG pour les icônes est chargé depuis le CDN par défaut et peut être remplacé via les options. Le README documente un large ensemble de propriétés personnalisées CSS couvrant les couleurs, l'espacement et les rayons des contrôles, les menus, les infobulles, le style des barres de progression et des curseurs, les sous-titres et la typographie, ce qui permet d'adapter le lecteur à un système de design existant sans dupliquer la feuille de style.