HTML5视频无法仅隐藏默认控制条而保留功能，必须移除controls属性并用JavaScript手动实现全部交互逻辑。

HTML5 视频默认控制条（controls）不能直接“隐藏但保留功能”，必须通过移除 controls 属性 + 手动实现 UI 来自定义——这是浏览器强制行为，不是样式能绕过的。

移除默认控制栏：删掉 controls 属性即可

只要不写 controls，浏览器就不会渲染原生控制条。注意：这同时会禁用所有原生交互（播放/暂停/音量/进度拖拽等），后续需自行实现。

常见错误是只加 style="display: none" 或覆盖 CSS，无效——因为控制条由 UA stylesheet 渲染且不可被普通 CSS 选择器精准定位隐藏。

• ✅ 无控制条
• ❌ 默认显示
• ❌ 语法非法，无效

自定义控制栏：必须用 JS 操作 HTMLMediaElement API

核心是监听用户操作（如点击按钮）、调用 play()、pause()、修改 currentTime、读取 duration 和 volume 等属性。

关键点：

• 进度条需监听 timeupdate 事件更新 的 value
• 音量控制要同步 volume（0–1）和 muted 状态
• 播放状态切换时，按钮文案/图标应响应 paused 属性变化
• 移动端需额外处理 touchstart 替代 click，避免 300ms 延迟

▶

隐藏控制栏但保留快捷键（如空格播放）？做不到

移除 controls 后，浏览器会一并禁用所有原生键盘快捷键（空格、←→、↑↓、M 静音等）。这些快捷键绑定在原生控件上，JS 无法模拟或接管——除非你自己监听 keydown 并手动实现逻辑。

例如支持空格播放需：

• 给 添加 tabindex="0" 使其可聚焦
• 监听 keydown，判断 event.code === 'Space' 且 event.target === video
• 手动调用 video.play() 或 video.pause()

但注意：自动播放策略（autoplay policy）仍生效，静音视频才可能免用户手势触发 play()。

真正难的不是隐藏，而是补全交互细节：拖拽进度条的平滑性、seeking 状态反馈、加载中占位、全屏切换兼容性、无障碍属性（aria-label、role="slider"）——这些容易被忽略，但直接影响可用性。