video元素原生支持空格键播放/暂停，但需添加tabindex="0"使其可聚焦；方向键快进/音量调节需手动监听keydown事件并阻止默认行为；移动端和Safari存在focus兼容性问题，需结合muted、playsinline等策略确保快捷键生效。
video 元素原生就支持空格键播放/暂停
不用写一行 JS， 在聚焦状态下按 Space 就能切换播放状态。但前提是用户得先点一下视频区域（或用 tab 键聚焦到它），否则键盘事件不会触发。常见疏忽是忘了加 tabindex="0" —— 默认情况下 不可聚焦，键盘控制自然失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
加上tabindex="0"，确保能被键盘聚焦 - 用户首次交互后，浏览器才会允许自动播放（含静音自动播放），这是策略限制，不是代码问题
- 避免用
autoplay+controls混搭，部分 iOS/Android 会忽略autoplay
监听键盘事件实现自定义快捷键（如 ← → ↑ ↓）
原生不支持方向键快进/音量调节，必须手动监听 keydown 事件。关键点在于：只在视频获得焦点时响应，且要防止全局快捷键干扰页面其他功能。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 绑定事件到
video元素本身，而非document，避免误触 - 用
e.preventDefault()阻止默认行为（比如方向键滚动页面） - ← 和 → 建议按 5 秒跳转，不要用固定像素值（
video.currentTime += 10更合理） - ↑ ↓ 控制音量时，每次增减 0.1，上限 1.0，下限 0
const video = document.querySelector('video');
video.addEventListener('keydown', (e) => {
if (document.activeElement !== video) return;
e.preventDefault();
switch(e.key) {
case 'ArrowLeft': video.currentTime = Math.max(0, video.currentTime - 5); break;
case 'ArrowRight': video.currentTime = Math.min(video.duration, video.currentTime + 5); break;
case 'ArrowUp': video.volume = Math.min(1.0, video.volume + 0.1); break;
case 'ArrowDown': video.volume = Math.max(0, video.volume - 0.1); break;
}
});处理移动端和 Safari 的 focus 兼容性问题
iOS Safari 和部分 Android 浏览器对 video 的聚焦支持极弱——即使加了 tabindex，focus() 方法也可能静默失败，keydown 根本不会触发。这不是 bug，是平台策略：为防误操作，默认禁用非触摸驱动的键盘控制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 移动端优先用触摸控件（进度条、音量滑块），别强依赖键盘
- 若必须支持，可在首次点击视频后调用
video.focus()，并配合playsinline属性 - Safari 需额外加
webkit-playsinline和x5-playsinline（微信内嵌） - 不要尝试用
contenteditable或input模拟聚焦，无效
静音与自动播放策略直接影响快捷键可用性
如果视频没设 muted，又没用户手势触发（如 click/touchstart），Chrome/Firefox/Safari 都会阻止 play() 调用——这意味着你按空格键，video.play() 抛出 NotAllowedError，快捷键直接失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要自动播放时，务必同时加
muted和autoplay - 非静音视频，必须等用户显式交互（哪怕只是点一下空白处）后再启用快捷键逻辑
- 监听
video的pause/play事件来同步 UI 状态，别只靠按键判断 - 错误信息
"The request is not allowed by the user agent or the platform in the current context."就是这个策略拦截的明确提示
真正卡住人的从来不是怎么写监听函数，而是聚焦时机、平台策略、静音要求这三者没对齐。只要其中一环没满足，键盘事件看似绑上了，实际按了也没反应。
