video元素必须加tabindex="0"才能响应键盘事件，否则无法聚焦导致快捷键失效；需绑定keydown到video本身并preventdefault()；aria属性是刚性要求而非装饰；不同播放器键盘配置策略不同。
video 元素必须加 tabindex="0" 才能响应键盘事件
原生 <video></video> 默认不可聚焦，空格键、方向键等根本不会触发——这是最常见的失灵原因。不加 tabindex="0"，document.activeElement 永远不会指向它，所有基于焦点的快捷键逻辑都失效。
实操建议：
- 直接在 HTML 中写
<video tabindex="0"></video>，别依赖 JS 动态添加（Safari 对动态 tabindex 支持不稳定） - 避免设
tabindex="-1"：它允许 JS 聚焦，但用户无法用 Tab 键到达，破坏键盘导航流 - 首次交互后浏览器才允许自动播放，所以快捷键生效往往要先点一下或按一次 Tab 键
keydown 事件必须绑定到 video 元素本身，且需 preventDefault()
原生只支持空格键播放/暂停，其他操作（如跳转、调音量）全靠监听 keydown。但若绑在 document 上，容易和页面其他功能冲突；若不调 e.preventDefault()，方向键会滚动页面、音量键可能被浏览器拦截。
实操建议：
- 用
video.addEventListener('keydown', handler)，而非全局监听 - 开头加守卫：只有
document.activeElement === video才执行逻辑 -
ArrowLeft/ArrowRight必须e.preventDefault()，否则页面横向滚动干扰跳转 - 时间跳转用
video.currentTime = Math.max(0, Math.min(video.duration, ...))，防止越界报错
ARIA 属性不是装饰，而是屏幕阅读器的指令集
没有 aria-label 的播放按钮，对屏幕阅读器来说就是“按钮”；没设 aria-valuenow 的进度条，读出来是“滑块”，而非“已播放 42 秒，共 3 分 15 秒”。ARIA 不是锦上添花，是让辅助技术理解控件语义的刚性要求。
实操建议：
- 播放/暂停按钮必须动态更新
aria-label，例如从“播放”切为“暂停” - 音量滑块要同时设
role="slider"、aria-valuemin="0"、aria-valuemax="1"、aria-valuenow - 字幕开关用
aria-checked="true/false"，全屏按钮用aria-expanded="true/false" - 状态变化（如静音）要推送到
aria-live="polite"区域，否则用户听不到反馈
Plyr 和 Able Player 的 keyboard 配置差异直接影响可用性
不同播放器对键盘行为的默认策略不同。Plyr 默认 keyboard.focused = true，即只在获得焦点时响应；Able Player 则默认启用全局快捷键。不看清配置，就可能误以为“快捷键坏了”。
实操建议：
- Plyr 中若想全局响应（如按 D 键随时调速），得显式设
keyboard: { focused: false, global: true } - Able Player 的快捷键表可覆盖，默认
F全屏、M静音，但部分键（如R重置速度）需确认是否启用插件 - 两者都依赖
<video></video>正确设置controls或自定义 UI 的 ARIA 状态同步，否则键盘操作和 UI 显示会脱节
addEventListener，而是让每个状态变更都同步反映在 DOM 属性、ARIA 值和辅助技术可感知的上下文中——漏掉一次 aria-valuenow 更新，或者忘记在静音后切换 aria-pressed，对键盘或屏幕阅读器用户就是一次功能断裂。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
