plyr

Plyr 是一个简单、轻量级、可访问且可定制的媒体播放器，用于 HTML5 视频和音频、YouTube 和 Vimeo 嵌入。它面向现代浏览器，使用原生 ES6 JavaScript 编写，不依赖任何框架或 jQuery，样式使用 Sass 编写，并通过 CSS 自定义属性暴露。 README 所体现的关键能力： - 格式支持：原生 HTML5 视频和音频元素，以及通过 data-plyr-provider 和 data-plyr-embed-id 属性对 YouTube 和 Vimeo iframe 或普通 div 进行渐进增强。 - 可访问性：支持 VTT 字幕和屏幕阅读器，使用语义化标记，例如用于音量的 input type=range、progress 元素和真正的按钮。 - 自定义：CSS 自定义属性（例如 --plyr-color-main）和 Sass 变量允许你在全局、按类或内联地重新设置播放器样式。 - 响应式布局，以及针对 iframe 提供商的响应式 16:9 嵌入包装类。 - 与 hls.js、Shaka Player 和 dash.js 的流媒体播放集成。 - 跨所有提供商的标准 JavaScript API 和事件，因此 YouTube 和 Vimeo 无需单独处理 API。 - 全屏（回退到全窗口模式）、画中画、playsinline 支持、键盘快捷键、速度控制、多字幕轨道、控件国际化以及预览缩略图。 - 通过合作伙伴广告集成或自定义 ads.tagUrl 选项提供变现钩子。 设置很简单：从 CDN 或自托管文件引入 plyr.css 和 plyr.js（或 polyfilled 构建），然后使用 new Plyr('#player') 实例化。预构建的压缩文件可从 CDN 或 unpkg 获取，也可以使用 npm i && npm run build 从源码构建。图标使用的 SVG sprite 默认从 CDN 加载，可通过选项覆盖。 README 记录了大量 CSS 自定义属性，涵盖颜色、控件间距和圆角、菜单、工具提示、进度条和范围样式、字幕和排版，使得无需分叉样式表即可匹配现有设计系统。