:playing 和 :paused 伪类在主流浏览器中不可靠或完全不支持，应改用 class + JS 监听 play/pause 事件同步状态，再通过 CSS 控制样式，并需兼顾自动播放拦截等边界情况。
:playing 和 :paused 在绝大多数主流浏览器中**不可靠或完全不支持**——MDN 明确标注 :paused 是 “limited availability”，:playing 甚至未被任何浏览器正式实现。你写上 video:playing { opacity: 0.8; }，几乎肯定不会生效。
为什么 :playing/:paused 基本不能用
这两个伪类属于 CSS Selectors Level 4 提案，但截至 2026 年中，Chrome、Firefox、Safari 都未完整实现。实测：
-
getComputedStyle(video).getPropertyValue('animation-play-state')返回空字符串，说明浏览器根本没把播放状态映射为可选中的伪类 - DevTools 的 Elements 面板里，
video元素上永远看不到:playing或:paused被激活的高亮 - 即使强行写
video:paused::after，也从不渲染——不是样式被覆盖，是选择器压根没匹配上
真正能落地的替代方案：用 class + JS 监听事件
必须手动同步状态到 DOM class，再用 CSS 选择器驱动样式。关键点不是“能不能”，而是“怎么同步得稳”：
- 监听
play和pause事件，而非playing/waiting等过渡态事件（它们触发频繁且不可控） - 在事件回调里用
el.classList.toggle('is-playing', !el.paused)，比add/remove更防重复 - 初始化时补一手：
el.classList.toggle('is-playing', !el.paused)，避免页面加载后状态错位 - 如果视频可能被 JS 外部调用
play()或pause()，确保所有入口都走同一套同步逻辑
CSS 写法要兼容 fallback 和可维护性
别只写 .is-playing:hover，得考虑降级和语义清晰：
立即学习“前端免费学习笔记（深入）”；
- 光标图标必须带
, auto后缀，否则 Safari 会直接忽略整个cursor声明 - 自定义 SVG 光标推荐用 Base64 内联，避免跨域或 404 导致光标失效
- 暂停态样式不要只依赖
.is-paused，可叠加video:not(.is-playing)作为兜底 - 若需动画效果（如暂停时淡入遮罩），用
transition而非依赖伪类切换时机
最易被忽略的一点：媒体元素的 paused 属性在自动播放被拦截、preload="none" 或网络异常时可能长期为 true，但用户并没主动暂停——这时候加 .is-paused 类反而造成误导。真要严谨，得结合 networkState 和 readyState 做状态过滤。
