必须使用 plyr 命名，因 plyr js 引擎仅监听固定类名（如 plyrcontrol、plyrprogress）来绑定事件、计算状态和应用样式；自定义前缀（如 video-player）会导致事件不触发、进度拖动异常、全屏图标不切换等功能性失效。
必须用 plyr__* 命名，而不是自定义前缀；写错类名会导致 JS 事件不绑定、状态不同步、样式完全失效。
为什么不能用 video-player__* 替代 plyr__*
Plyr 的 JS 引擎只监听 plyr__control、plyr__progress 等固定类名，它不读取你写的 CSS 文件，也不解析自定义前缀。即使你把样式写得再精准，只要类名不匹配，JS 就不会注册点击、拖拽或状态更新逻辑。
- 常见错误现象：
<button class="video-player__play-btn"></button>点击无反应 → JS 根本没给这个元素绑事件 -
.video-player__progress样式生效了，但拖动时进度跳变或卡死 → Plyr 把它当普通 div，没启用内部的 timeupdate 监听和缓冲计算 - 全屏按钮图标不切换 →
plyr--fullscreen类只加在根容器上，而你的自定义类名不在它的作用域内，CSS 规则无法命中
plyr__control 和 plyr__progress 必须严格分离
它们语义不同、DOM 结构不同、JS 处理逻辑也不同。混用会直接破坏播放器行为链。
-
plyr__control是交互入口：必须带data-plyr属性，值为"play"、"volume"、"fullscreen"等官方字符串 -
plyr__progress是只读展示区：内部必须嵌套plyr__progress__buffer和plyr__progress__played，不能塞进plyr__control里 - 错误示例：
<input type="range" class="plyr__control plyr__progress">→ JS 会把它同时当作音量控件和进度条处理，造成值覆盖和 UI 错位
状态类只能用 plyr--*，不能自己造 is-playing 或 video-player--paused
Plyr 通过 JS 动态在根容器（.plyr）上添加/移除 plyr--playing、plyr--muted、plyr--fullscreen 等类。这些是全局开关，所有子元素样式都依赖它们做条件渲染。
- 自己写
.video-player__play-btn.is-playing→ 图标可能显示暂停，但实际视频已暂停，状态脱节 - 用
:not(.plyr--playing) .plyr__control[data-plyr="play"]::before控制播放图标，比任何手动 class 切换都可靠 - 修饰符必须依附于 Plyr 原生类存在，单独写
.plyr--muted无效，它永远只出现在.plyr元素上
最易被忽略的一点：BEM 在 Plyr 里不是“写法偏好”，而是 DOM 与 JS 的契约接口。哪怕你只改一个下划线为连字符（比如 plyr-control），整个控制链就断了——这不是样式问题，是运行时找不到节点导致的功能性失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
