浏览器原生支持空格键暂停媒体，但需视频/音频元素获得焦点；添加tabindex="0"使其可聚焦，配合aria-label提供无障碍提示，禁用原生控件不影响快捷键，无标准API可彻底禁用。

怎么让<video></video>或<audio></audio>支持空格键暂停

浏览器原生支持空格键控制媒体播放，但前提是元素获得焦点。没焦点就按了白按——这是最常被忽略的前提。

• 必须手动调用 element.focus()，或者让用户用 Tab 键主动聚焦到媒体元素上
• <video></video> 默认不可聚焦，得加 tabindex="0" 才能被键盘选中
• 如果页面有其他可聚焦元素（比如输入框、按钮），焦点可能被抢走，空格自然失效
• 移动端不适用：触摸设备无键盘焦点概念，空格键根本不会触发

如何显示“空格暂停”提示文本又不干扰操作

提示文本本质是辅助信息，不是控件本身。放错位置会遮挡画面、影响可访问性，甚至被屏幕阅读器误读为操作目标。

• 用 aria-label 或 aria-describedby 关联提示，比纯视觉文字更可靠
• 视觉提示建议放在播放控件层（如自定义 <div class="controls"> 内），避免覆盖视频主体 <li>不要用 <code>title 属性：它只在鼠标悬停时出现，对键盘用户无效
• 若用 CSS 显示/隐藏提示（比如 hover/focus 时浮现），确保 :focus-within 覆盖媒体元素获得焦点的场景

为什么监听 keydown 实现空格控制反而容易出问题

绕过浏览器原生行为自己写逻辑，看似灵活，实则引入兼容性和维护负担。


htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
• 原生空格行为已适配所有桌面浏览器（Chrome/Firefox/Safari/Edge），自己实现要重复处理 preventDefault()、状态同步、多实例冲突等问题
• 容易误拦截：比如用户在搜索框里输“空格”，结果把视频暂停了——必须严格判断 event.target 是否为媒体元素本身
• 无障碍退化：自行绑定事件后，role="application" 等语义可能被破坏，影响读屏软件识别
• 移动端 WebView 行为不一致，某些安卓内核下 keydown 根本不触发

controlsList 属性能隐藏原生控件，但不影响快捷键

很多人以为关掉原生控件就等于关掉了快捷键，其实不是。controlsList 只控制 UI 元素显隐，键盘行为照常工作。

立即学习“前端免费学习笔记（深入）”；

• 设置 controlsList="nodownload noremoteplayback" 不会影响空格/箭头键功能
• 但若同时移除了 controls 属性且未提供替代控件，用户将失去除快捷键外的所有操作入口
• 注意 Safari 对 controlsList 支持有限，nofullscreen 在 iOS 上无效
• 想彻底禁用快捷键？没有标准 API —— 浏览器不提供该能力，强行阻止会损害可访问性
焦点和语义标记才是关键，不是加一行 JS 就能搞定的事。