空格键播放/暂停需视频获焦点，方向键快进/后退需拦截默认行为并校验聚焦状态，音量与播放状态应统一管理，自定义进度条须同步时间与拖拽逻辑。
空格键播放/暂停是原生支持的，但必须先让视频获得焦点；方向键控制进度则需要手动监听事件并计算跳转逻辑——关键在于聚焦状态判断、默认行为拦截和时间值合理设定。
确保视频能被键盘聚焦
默认情况下 <video></video> 元素不可聚焦，键盘事件不会触发。必须显式添加 tabindex="0"：
- 在 HTML 中写：
<video tabindex="0"></video> - 用户需主动点击视频区域，或按 Tab 键将焦点移到它上面，之后空格键才生效
- 移动端 Safari 和部分 Android 浏览器对 focus 支持有限，不建议强依赖键盘操作
用方向键实现快进/后退
← 和 → 键默认会滚动页面，必须阻止默认行为，并只在视频聚焦时响应：
- 监听 video 元素自身的
keydown事件，避免绑定到 document 上造成干扰 - 检查
document.activeElement === video，确保当前焦点确实在视频上 - 每次跳转建议固定时间（如 5 秒），而非像素或百分比：
video.currentTime += 5 - 注意边界：跳转后用
Math.max(0, ...)和Math.min(video.duration, ...)限制范围
音量与播放状态的键盘联动
↑↓ 控制音量、空格切换播放，都属于基础交互，需统一管理：
- 音量每次增减 0.1，上限 1.0，下限 0，避免小数精度问题
- 播放/暂停不要仅靠
video.paused判断，建议维护一个isPlaying状态变量 - 监听
play、pause、ended事件，自动同步 UI 和状态 - 首次用户交互前，浏览器通常禁止自动播放（即使静音），这是策略限制，不是代码缺陷
自定义进度条与拖拽跳转
若使用自定义进度条（移除 controls 属性），需手动同步时间和响应拖动：
- 监听
timeupdate事件，用(currentTime / duration) * 100更新进度条宽度或input.value - 对进度条容器绑定
click事件，根据鼠标位置计算跳转时间点 - 对
<input type="range">同时监听input（实时）和change（释放）事件，提升拖拽响应感 - 视频未加载完成（
loadeddata未触发）前，禁用拖拽和播放按钮，避免无效操作
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
