<p>video-playercontrols 是唯一合法的根容器类名，所有控制条必须以此为最外层类，不可省略前缀；plyrcontrol 与 data-plyr 组合标识可交互控件；进度条须用 plyr__progress 及其子类；状态样式必须基于 plyr--* 官方修饰符。</p>
video-player__controls 是唯一合法的根容器类名
所有播放器控制条必须以 video-player__controls 作为最外层容器类名，不能用 player-controls、ui-controls 或其他自定义前缀。BEM 不是风格选择，而是与 JS 行为强绑定的契约——Plyr、Video.js 等主流库只监听该 class 下的子元素；写错就等于断开控制逻辑。
常见错误现象：<div class="controls"> 写完发现拖动进度条没反应 → JS 根本没绑定事件监听器，因为没匹配到 video-player__controls；<div class="video-controls"> 导致 CSS 规则权重不足或被忽略，样式无法生效。
实操建议：
- 根容器必须是
<div class="video-player__controls">，不可省略video-player__前缀 - 不要把
video-player__controls当作“样式类”去覆盖，它本质是行为锚点 - 若需复用到其他视频场景（如背景视频），应新建独立 Block，如
hero-video__controls，而非复用
每个可交互控件必须带 data-plyr 属性且用 plyr__control 类名
不是所有按钮都叫 video-player__play-btn。Plyr 的 JS 只识别 plyr__control + data-plyr 的组合，否则点击无响应、状态不同步、图标不切换。自定义类名会导致整个控制链断裂。
立即学习“前端免费学习笔记（深入）”；
示例正确结构：
<button class="plyr__control" data-plyr="play"></button> <input type="range" class="plyr__control" data-plyr="volume"> <button class="plyr__control" data-plyr="fullscreen"></button>
关键点：
-
plyr__control是通用容器类，不决定外观，只表示“这是个可交互控件” -
data-plyr值才是功能标识：必须是"play"、"volume"、"fullscreen"等 Plyr 官方支持的字符串 - 禁止给
plyr__control加额外修饰符（如--custom），会干扰 JS 状态判断 - 进度条不是控件，不能用
plyr__control，而要用独立的plyr__progress
进度条必须拆成 plyr__progress + plyr__progress__buffer + plyr__progress__played
plyr__progress 是只读展示区域，不是用户拖拽目标。把它和音量滑块混为一谈（比如都塞进 plyr__control）会导致 JS 把缓冲进度当音量值处理，UI 错位、拖动失效。
标准 DOM 结构必须是：
<div class="plyr__progress"> <div class="plyr__progress__buffer"></div> <div class="plyr__progress__played"></div> </div>
为什么不能简化？
-
plyr__progress__buffer显示已加载但未播放的部分（灰色） -
plyr__progress__played显示已播放部分（蓝色），JS 动态更新其 width - 二者必须同级嵌套在
plyr__progress下，否则 Plyr 的进度同步逻辑失效 - 禁止用
video-player__progress-bar替代plyr__progress，CSS 规则不会命中
全屏/静音等状态类必须走 plyr--* 修饰符，不能自己写 is-fullscreen
Plyr 的 JS 在进入全屏时，是在根容器（.plyr）上加 plyr--fullscreen，不是在按钮上加 is-active。自己写的状态类名不会触发任何样式变化，也不会被 JS 同步，导致按钮图标与真实状态脱节。
典型问题：
- 写了
.plyr__fullscreen-btn.is-active::before { content: "✕"; }，但点击后按钮没变 → 因为 JS 没加is-active，它只加plyr--fullscreen - 想让全屏时控制栏撑满高度，却用
.video-player__controls.is-fullscreen→ 应该写.plyr--fullscreen .video-player__controls
实操要点：
- 所有状态驱动的样式，必须基于
.plyr--playing、.plyr--muted、.plyr--fullscreen这类官方修饰符 - 不要在 HTML 中手动添加这些类，全部交由 Plyr JS 控制
- 如果要扩展自定义状态（如加载中），也必须用
plyr--loading，并确保 JS 同步更新
BEM 在播放器里不是“怎么好看怎么写”，而是“怎么能让 JS 找到、认出、控制”。类名写错一个字符，就可能让进度条不动、音量调不了、全屏按钮变哑巴——这种问题往往卡在 DevTools 里查不到原因，因为表现是“功能失效”，根源却是命名契约断裂。
