如何在多视频页面选中当前激活/最近聚焦的视频以执行自定义键盘操作？

浏览器原生逻辑原理 #

浏览器之所以能让聚焦的视频响应Space、F这类快捷键，核心是焦点管理：

• video元素默认是可聚焦的（tabindex="0"），不管是鼠标点击还是用Tab键切换，只要视频获得焦点，浏览器就会把后续的键盘事件绑定到这个聚焦的元素上。
• 原生快捷键是浏览器内置在video元素的焦点状态下的事件监听。

你的方案问题所在 #

你之前用body的点击事件委托，存在两个核心问题：

1. 键盘激活无效：用Tab切换选中视频时不会触发点击事件，自然无法捕获当前视频。
2. 两次点击生效：第一次点击本质是让video获得焦点，第二次点击才会触发你的选中逻辑——但浏览器原生是把焦点获取和事件响应绑定在一起的，不需要额外的“选中”步骤。

正确实现方案 #

核心思路是跟踪当前聚焦的视频元素，再绑定全局键盘事件针对该元素执行自定义操作，完美适配动态生成的视频：

1. 跟踪当前激活的视频

利用focusin事件（冒泡特性，能捕获动态生成的元素），在全局监听所有video元素的焦点获取：

let currentActiveVideo = null;

// 监听全局焦点获取事件，捕获所有video元素的激活状态
document.addEventListener('focusin', (e) => {
  if (e.target.tagName === 'VIDEO') {
    // 更新当前激活的视频
    currentActiveVideo = e.target;
    // 可选：给激活的视频加视觉标识（比如边框）
    document.querySelectorAll('video.active-video').forEach(vid => {
      if (vid !== currentActiveVideo) vid.classList.remove('active-video');
    });
    currentActiveVideo.classList.add('active-video');
  }
});

2. 绑定自定义键盘操作

在全局监听键盘事件，判断当前有激活视频时执行自定义逻辑：

document.addEventListener('keydown', (e) => {
  // 仅处理自定义快捷键（比如按S打开设置）
  if (e.key.toLowerCase() === 's' && currentActiveVideo) {
    e.preventDefault(); // 阻止浏览器默认行为（如果S有冲突的话）
    
    // 这里替换成你的自定义操作，比如找到视频容器内的设置按钮并触发点击
    const settingsBtn = currentActiveVideo.closest('.video-container').querySelector('.settings-btn');
    if (settingsBtn) settingsBtn.click();
    
    // 如果是要调用视频原生控件的设置，可通过模拟右键或直接操作API（原生设置无直接触发API，需自定义面板）
  }
});

3. 可选：处理视频失焦逻辑

如果需要在视频失去焦点（且焦点不在同容器内）时清空激活状态，可添加focusout监听：

document.addEventListener('focusout', (e) => {
  if (e.target.tagName === 'VIDEO' && currentActiveVideo === e.target) {
    // 判断焦点是否转移到当前视频容器外
    const nextFocus = e.relatedTarget;
    if (!nextFocus || !currentActiveVideo.closest('.video-container').contains(nextFocus)) {
      currentActiveVideo.classList.remove('active-video');
      currentActiveVideo = null;
    }
  }
});

关键优势 #

• 同时支持鼠标点击和键盘Tab切换激活视频，完美覆盖所有操作场景。
• 自动适配动态生成的video元素，无需为新生成的视频单独绑定事件。
• 和浏览器原生逻辑对齐，避免额外的“两次点击”问题。

内容的提问来源于stack exchange，提问作者Three Year Old