原生<video>控件在Chrome、Safari、Firefox中样式不一且CSS定制受限（如Safari中进度条拖柄伪元素失效）；Plyr通过隐藏原生控件（controls=false）并用HTML+CSS重绘全部UI，实现真正统一风格、自定义按钮与主题切换。
为什么原生 <video> 不适合统一 UI 风格
原生 <video> 在 Chrome、Safari、Firefox 中控件样式完全不同，且无法用 CSS 深度定制（比如进度条拖柄、音量滑块的伪元素在 Safari 中基本失效）。Plyr 就是为解决这个而生：它把所有控件转成标准 HTML + CSS，完全脱离浏览器内置 UI。
注意：Plyr 不是“美化原生控件”，而是完全替换——它会隐藏原生控件（controls=false），再用 <div> 重绘整个界面，所以你才能真正统一风格、加自定义按钮、做主题切换。
引入 Plyr 并初始化最简可用版本
别直接上 CDN 的全量包。开发阶段优先用 npm 安装，避免 CDN 版本更新滞后导致 API 不一致：
npm install plyr
然后在 JS 中初始化（确保 DOM 已就绪）：
立即学习“前端免费学习笔记（深入）”；
import Plyr from 'plyr';<br>new Plyr('#my-video', {<br> controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'settings'],<br> tooltips: { controls: true }<br>});
关键点：
-
#my-video必须是带src或poster的<video>元素，且不能有controls属性（否则 Plyr 会跳过接管） -
controls数组决定显示哪些按钮，顺序即渲染顺序；漏掉play-large就不会显示大播放按钮 -
tooltips默认关闭，不设true时 hover 按钮没文字提示
覆盖默认样式但保留 Plyr 的结构逻辑
Plyr 的 DOM 结构固定（比如进度条一定是 .plyr__progress__buffer），CSS 覆盖必须基于它的 class 命名，不能自己重写结构。直接改 plyr.css 文件风险高，推荐以下方式：
- 在项目 CSS 中用更高权重选择器覆盖，例如：
.plyr__progress input[type="range"]::-webkit-slider-thumb { width: 16px; } - 禁用 Plyr 自带样式后全量重写：
引入时去掉plyr.css，只留 JS，然后自己实现.plyr__control等核心 class 的布局和交互状态（如.plyr--paused .plyr__control--play） - 主题色只需改几个变量：
:root { --plyr-color-main: #3b82f6; --plyr-range-thumb-height: 12px; }
切记：不要删 .plyr__sr-only 这类辅助技术 class，否则影响屏幕阅读器支持。
常见坑：HLS / Dash 流媒体 + Plyr 初始化时机
如果视频源是 .m3u8 或 .mpd，Plyr 本身不解析流协议，需配合 hls.js 或 dashjs。错误做法是等 loadedmetadata 再初始化 Plyr——HLS 的元数据加载比普通 MP4 晚得多，此时 Plyr 会报 Cannot read property 'duration' of null。
正确顺序：
- 先创建
<video>元素，不设src - 用
hls.loadSource(url)加载流，监听Hls.Events.MANIFEST_PARSED - 在回调里调用
new Plyr(videoEl, options) - 若用
dashjs，等player.initialize()完成后再初始化 Plyr
另外，移动端 iOS Safari 对自动播放限制更严，即使用了 Plyr，也得手动触发播放（比如用户点击按钮后调用 plyr.play()），否则静音状态下也播不了。
