如何用JavaScript实现按下空格键暂停/播放网页视频？

Question

在网页开发中，如何用JavaScript实现按下空格键控制视频的暂停与播放是一个常见的需求。问题在于：当页面包含多个视频时，如何精准地控制当前活动视频（即用户正在交互的视频）？如果直接监听全局键盘事件，可能会导致误操作，影响用户体验。此外，还需要考虑移动端或不同浏览器间的兼容性问题。例如，在某些浏览器中，视频的自动播放功能可能受到限制，或者空格键默认行为会滚动页面，这需要通过`event.preventDefault()`来阻止默认行为。因此，如何优雅地结合事件委托和焦点管理，确保空格键仅作用于目标视频，同时保持代码简洁高效，是开发者需要解决的关键技术问题。

Answer 1

1. 问题概述与常见技术挑战

在网页开发中，使用JavaScript控制视频播放和暂停是一个常见的需求。然而，当页面包含多个视频时，如何精准地控制当前活动视频（即用户正在交互的视频）成为了一个关键问题。直接监听全局键盘事件可能会导致误操作，影响用户体验。此外，还需要考虑移动端或不同浏览器间的兼容性问题，例如某些浏览器限制了视频的自动播放功能，或者空格键默认行为会滚动页面。

以下是几个需要解决的核心问题：

• 如何确保空格键仅作用于目标视频？
• 如何优雅地结合事件委托和焦点管理？
• 如何处理不同浏览器的行为差异和移动端的特殊需求？

2. 解决方案设计：事件委托与焦点管理

为了实现精准控制当前活动视频的功能，我们可以采用事件委托和焦点管理相结合的方式。以下是一个分步解决方案：

1. 为所有视频元素绑定点击事件：通过点击事件将焦点设置到特定视频上。
2. 监听全局键盘事件：在键盘事件中检查当前是否有视频处于焦点状态。
3. 阻止默认行为：通过`event.preventDefault()`防止空格键触发页面滚动。
4. 控制视频播放/暂停：根据视频的当前状态切换播放或暂停。

以下是一个示例代码片段：

document.addEventListener('keydown', (event) => {
    if (event.key === ' ') {
        event.preventDefault(); // 阻止空格键默认行为
        const activeVideo = document.activeElement;
        if (activeVideo.tagName === 'VIDEO') {
            if (activeVideo.paused) {
                activeVideo.play();
            } else {
                activeVideo.pause();
            }
        }
    }
});

document.querySelectorAll('video').forEach(video => {
    video.addEventListener('click', () => {
        video.focus(); // 点击视频时设置焦点
    });
});
    

3. 兼容性与移动端支持

在实际开发中，不同浏览器对视频控件的支持可能存在差异。例如，某些浏览器可能禁止自动播放带有声音的视频。此外，移动端设备通常对键盘事件的支持有限，因此需要额外的适配策略。

浏览器/设备	兼容性问题	解决方案
Safari	禁止自动播放带声音的视频	设置`muted`属性以允许自动播放
iOS	键盘事件可能无效	提供触摸手势作为替代方案
Android	部分设备不支持全屏模式	通过`requestFullscreen`手动触发全屏

4. 流程图：整体逻辑结构

下面是一个描述整体逻辑的流程图：

graph TD;
            A[开始] --> B{用户是否点击视频};
            B --是--> C[设置视频焦点];
            B --否--> D[忽略事件];
            C --> E{按下空格键};
            E --是--> F[阻止默认行为];
            F --> G{视频是否暂停};
            G --是--> H[播放视频];
            G --否--> I[暂停视频];

通过上述方法，我们可以确保空格键仅作用于目标视频，同时兼顾跨浏览器和移动端的兼容性。