HTML5视频无法仅隐藏默认控制条而保留功能，必须移除controls属性并用JavaScript手动实现全部交互逻辑。
HTML5 视频默认控制条（controls）不能直接“隐藏但保留功能”，必须通过移除 controls 属性 + 手动实现 UI 来自定义——这是浏览器强制行为，不是样式能绕过的。
移除默认控制栏：删掉 controls 属性即可
只要不写 controls，浏览器就不会渲染原生控制条。注意：这同时会禁用所有原生交互（播放/暂停/音量/进度拖拽等），后续需自行实现。
常见错误是只加 style="display: none" 或覆盖 CSS，无效——因为控制条由 UA stylesheet 渲染且不可被普通 CSS 选择器精准定位隐藏。
-
<video src="demo.mp4"></video>✅ 无控制条 -
<video src="demo.mp4" controls></video>❌ 默认显示 -
<video src="demo.mp4" controls style="controls: none"></video>❌ 语法非法，无效
自定义控制栏：必须用 JS 操作 HTMLMediaElement API
核心是监听用户操作（如点击按钮）、调用 play()、pause()、修改 currentTime、读取 duration 和 volume 等属性。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 进度条需监听
timeupdate事件更新<input type="range">的value - 音量控制要同步
volume（0–1）和muted状态 - 播放状态切换时，按钮文案/图标应响应
paused属性变化 - 移动端需额外处理
touchstart替代click，避免 300ms 延迟
<video id="myVideo" src="demo.mp4"></video>
<button id="playBtn">▶</button>
<input type="range" id="progress" min="0" max="100">
<script>
const video = document.getElementById('myVideo');
const playBtn = document.getElementById('playBtn');
playBtn.addEventListener('click', () => {
if (video.paused) video.play();
else video.pause();
});
video.addEventListener('play', () => playBtn.textContent = '⏸');
video.addEventListener('pause', () => playBtn.textContent = '▶');
</script>
隐藏控制栏但保留快捷键（如空格播放）？做不到
移除 controls 后，浏览器会一并禁用所有原生键盘快捷键（空格、←→、↑↓、M 静音等）。这些快捷键绑定在原生控件上，JS 无法模拟或接管——除非你自己监听 keydown 并手动实现逻辑。
例如支持空格播放需：
- 给
<video>添加tabindex="0"使其可聚焦 - 监听
keydown，判断event.code === 'Space'且event.target === video - 手动调用
video.play()或video.pause()
但注意：自动播放策略（autoplay policy）仍生效，静音视频才可能免用户手势触发 play()。
真正难的不是隐藏，而是补全交互细节：拖拽进度条的平滑性、seeking 状态反馈、加载中占位、全屏切换兼容性、无障碍属性（aria-label、role="slider"）——这些容易被忽略，但直接影响可用性。
