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">，设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时可能跳过播放按钮
真正难的是平衡：既要视觉干净，又不能切断操作链路或丢掉语义。控制条不是装饰，它是视频可操作性的最后防线。
