CSS如何使视频控制条在无操作时平滑隐去

video元素默认controls无悬停显示功能，需用css遮罩层+js监听鼠标/触摸事件动态控制opacity和pointer-events实现平滑显隐，同时兼顾可访问性与移动端兼容。

video 元素默认控制条的隐藏逻辑

浏览器原生 controls 属性不提供“悬停显示、闲置隐藏”的平滑过渡能力，它只有“始终显示”或“完全禁用”两种状态。想实现鼠标离开后淡出、移入时渐显，必须手动接管控制条的显示逻辑，不能依赖 controls 自动行为。

常见错误是直接给 video::-webkit-media-controls 加 opacity: 0 或 display: none，这会导致整个控制栏不可交互，甚至在部分 chrome 版本中触发控制条永久消失（尤其配合 controlslist="nodownload" 时）。

用 CSS + JS 实现 hover 显示 + timeout 隐藏

核心思路：保留原生控制条（controls 始终为 true），但用包裹容器遮盖它；通过 JS 监听鼠标进出和空闲时长，动态切换包裹层的 opacity 和 pointer-events。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 给 video 外层套一个 <div class="video-container">，设 <code>position: relative
• 控制条本身无法单独选中，所以用伪元素或绝对定位的遮罩层覆盖它（高度约 36px，底部对齐）
• JS 中用 setTimeout 启动隐藏倒计时，每次 mousemove 或 mouseenter 清除并重置
• 隐藏时设遮罩层 opacity: 1 + pointer-events: none，显示时反过来

示例关键 CSS：

.video-container {   position: relative; } .video-container::after {   content: '';   position: absolute;   bottom: 0;   left: 0;   right: 0;   height: 36px;   background: linear-gradient(transparent, rgba(0,0,0,0.7));   opacity: 1;   pointer-events: none;   transition: opacity 0.3s ease-out; } .video-container.show-controls::after {   opacity: 0;   pointer-events: auto; }

移动端 touch 事件的兼容处理

纯 hover 在 ios 和 android 上基本失效，且触摸屏没有“鼠标离开”概念。不加处理会导致控制条在点播后永远不隐藏。

必须补充 touch 支持：

• 监听 touchstart 触发一次显示，并重置空闲计时器
• 避免同时响应 mousemove 和 touchstart 导致计时器混乱，可用 if ('ontouchstart' in window) 分支隔离
• 部分安卓 webview 对 video::-webkit-media-controls 的渲染有延迟，建议隐藏遮罩层后 setTimeout(..., 100) 再恢复，留出渲染间隙

性能与可访问性权衡点

隐藏控制条不是视觉优化，而是交互干扰项的管理。容易被忽略的是：

• 屏幕阅读器用户依赖原生控制条的 ARIA 标签，若用遮罩层完全盖住，会破坏可访问性 —— 应确保遮罩层 aria-hidden="true"
• 频繁 toggle pointer-events 在低端安卓机上可能造成点击穿透，建议改用 visibility: hidden + opacity 组合
• 不要用 display: none 控制显示，它会中断焦点流，键盘用户按 Tab 时可能跳过播放按钮

真正难的是平衡：既要视觉干净，又不能切断操作链路或丢掉语义。控制条不是装饰，它是视频可操作性的最后防线。