求助：如何用js-spatial-navigation实现Video.js按钮的键盘导航

核心问题分析 #

• 动态元素未被识别：Video.js的控制按钮（包括seekButtons生成的快进/快退按钮）是在播放器初始化完成后才动态渲染的，提前执行的SN.add和SN.makeFocusable无法捕获这些后期生成的元素。
• 选择器匹配不准确：原选择器.vjs-control-bar .vjs-button没有覆盖所有可聚焦的控制元素，部分按钮的实际可聚焦节点是内部的<button>标签，而非外层容器。
• 焦点属性冲突：Video.js默认可能给按钮设置了tabindex="-1"，导致js-spatial-navigation无法将其识别为可聚焦元素。

解决方案步骤 #

1. 精准匹配可聚焦按钮的选择器

将playcontrols区域的选择器改为直接匹配控制栏内所有可聚焦的按钮节点，确保覆盖原生控制按钮和插件生成的按钮：

selector: '.vjs-control-bar button.vjs-button'

2. 延迟初始化空间导航到播放器就绪后

把空间导航的关键逻辑移到player.ready回调内，确保所有动态按钮渲染完成后再执行元素识别：

• 移除全局的SN.makeFocusable()，仅在播放器就绪后执行
• 显式设置按钮的tabindex为0，保证其处于正常焦点流中

3. 优化区域导航规则（可选）

添加leaveFor配置，明确控制栏区域与其他区域的导航逻辑，提升交互连贯性。

修改后的完整代码 #

var SN = SpatialNavigation;
SN.init();

// 先定义区域框架
SN.add("playerview", {
  selector: "#content_video"
});

SN.add("playcontrols", {
  selector: ".vjs-control-bar button.vjs-button",
  defaultElement: ".vjs-play-control button",
  leaveFor: {
    up: "@playerview"
  }
});

var player = videojs("content_video", {
  plugins: {
    seekButtons: {
      backIndex: 0,
      forward: 30,
      back: 10
    }
  }
});

player.on("ready", function () {
  player.vhs = null;

  setTimeout(() => {
    // 为所有控制按钮设置可聚焦属性
    document.querySelectorAll('.vjs-control-bar button.vjs-button').forEach(btn => {
      btn.setAttribute('tabindex', '0');
    });

    // 刷新空间导航，识别动态生成的按钮
    SN.makeFocusable();
    // 聚焦到播放按钮
    SN.focus("playcontrols");
  }, 300);
});

验证要点 #

• 打开浏览器开发者工具，确认选择器能匹配到所有需要导航的按钮
• 检查按钮的tabindex是否为0
• 测试方向键导航时，观察控制台是否有报错信息，排查元素识别问题

内容的提问来源于stack exchange，提问作者Gino