正确做法是保留 controls="true"，用绝对定位遮罩层覆盖原生控制条并控制 opacity 和 pointer-events；遮罩层需设 position: absolute、height: 36px（ios 44px），外层容器为 position: relative；js 需区分 mouse/touch 事件，触屏用 touchstart 单次触发+5s 延时，桌面端 mousemove 重置 2–3s 计时器；遮罩层必须加 aria-hidden="true"，确保可访问性。
video controls 无法直接 hover 显示，必须用包裹层遮盖
浏览器原生 controls 属性只有开/关两种状态，不支持“悬停显示、闲置隐藏”的过渡逻辑。强行设 controls="false" 再手写控制条，会丢失 ARIA 标签和键盘导航能力，对屏幕阅读器用户不友好。正确做法是保留 controls="true"，用绝对定位的遮罩层盖住它，再通过 JS 控制遮罩层的 opacity 和 pointer-events。
遮罩层必须用 position: absolute，不能用 fixed
遮罩层要精准贴合 video 底部控制条区域，fixed 会脱离父容器，导致在滚动或缩放时错位。正确结构是：
-
video外层套一个div.video-container，设position: relative - 遮罩层用
::after伪元素或真实div，设position: absolute; bottom: 0; left: 0; right: 0; height: 36px - 高度 36px 是 Chrome/Firefox 原生控制条典型高度，iOS Safari 约为 44px，需用媒体查询微调
JS 监听要区分 mouse 和 touch，避免计时器冲突
在桌面端监听 mousemove 和 mouseenter，移动端监听 touchstart，但不能混用同一套倒计时逻辑，否则一次滑动就反复清空 timeout。实操建议：
- 用
'ontouchstart' in window判断是否为触屏设备 - 触屏设备只在
touchstart触发一次显示，并设较长的隐藏延时（比如 5s），避免误触后立刻消失 - 桌面端每次
mousemove都清除旧 timer 并重置，延时通常设 2–3s - 隐藏时设
opacity: 1; pointer-events: none，显示时反过来，且必须加transition: opacity 0.3s ease-out
可访问性不能丢：遮罩层必须加 aria-hidden="true"
遮罩层只是视觉覆盖，不能阻断原生控件的语义信息。如果忘了加 aria-hidden="true"，屏幕阅读器会把遮罩层当作一个空元素反复播报，干扰操作。同时注意：
- 不要给遮罩层设
tabindex或任何交互属性 - video 元素本身仍需保持
aria-label或title描述 - 隐藏状态下，控制条虽不可见，但键盘
Tab仍能聚焦到播放/音量按钮，这是预期行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
