Video.js 中的空间导航增强了智能电视设备上的用户体验和可访问性。此功能支持使用遥控器方向键在播放器中的交互元素之间无缝导航。

空间导航类

Video.js 中的空间导航类提供了基本功能，允许用户轻松导航可聚焦组件。

方法

• start() - 通过向播放器添加 keydown 事件监听器来启动空间导航系统。
• stop() - 通过从播放器中移除 keydown 事件监听器并更新内部状态来停止空间导航。
• pause() - 暂时禁用空间导航功能，但不移除事件监听器。
• resume() - 在暂停后重新启用空间导航功能。
• updateFocusableComponents() - 更新并检索播放器中可聚焦组件的列表。
• findSuitableDOMChild(component) - 在组件中查找合适的子元素。
• getCurrentComponent() - 检索当前聚焦的组件。
• add(component) - 如果组件符合可聚焦条件，则将其添加到可聚焦组件列表中。
• remove(component) - 从可聚焦组件列表中移除指定的组件。
• clear() - 清空可聚焦组件列表。
• move(direction) - 根据指定方向导航到下一个可聚焦组件。
• refocusComponent() - 聚焦于上次聚焦的组件。
• focus(component) - 如果组件可聚焦，则将其设置为聚焦；否则，在其内部查找可聚焦的子元素并聚焦。

Stop 和 Pause 的区别

在技术层面上，当调用 start() 函数时，stop() 会移除由 spatial-navigation 添加的 onKeyDown 事件监听器，而 pause() 则在 onKeyDown 处理函数中管理一个标志：当 pause() 为 true 时，该事件监听器内部不会调用 move() 函数。

Video.js 选项参考 - spatialNavigation

要在 Video.js 中配置空间导航，可以使用以下选项

spatialNavigation

类型：Object 默认值：{enabled:false, horizontalSeek:false}

启用空间导航并指定附加属性。

属性

• enabled

  类型：boolean，默认值：false

  在播放器中启用空间导航。

• horizontalSeek

  类型：boolean，默认值：false

  启用水平导航寻迹功能，使用遥控器右键和左键。

启用空间导航

如果您已经在使用任何 React/Angular/Vue/其他空间导航解决方案，您应该仅通过以下代码在 Video.js 中启用空间导航

var player = videojs('my-player', {
  spatialNavigation: {
    enabled: true,
    horizontalSeek: true
  }
});

这将实例化 SpatialNavigation 类。

启动空间导航

如果您不使用任何 React/Angular/Vue/其他空间导航解决方案，您还必须启动空间导航。这样，空间导航将开始监听 Video.js 播放器中的 keydown 事件。

var player = videojs('my-player');

player.ready(function() {
  player.spatialNavigation.start();
});

空间导航事件

空间导航提供了两个您可以监听的自定义事件

focusableComponentsChanged

var player = videojs('my-player');

player.ready(function() {
  player.spatialNavigation.on('focusableComponentsChanged', event => {
    console.log('Focusable elements changed:', event.focusableComponents);
  });
});

endOfFocusableComponents

当播放器界面中所需方向上没有更多可聚焦组件时，此事件会向开发者或应用程序发送通知。通过检测此事件，开发者可以实现逻辑，将焦点无缝切换到其他元素，确保在播放器界面之外也能提供流畅直观的用户体验。

var player = videojs('my-player');

player.ready(function() {
  // Add an event listener to check when the player has no more element to focus
  player.spatialNavigation.on('endOfFocusableComponents', event => {
    // Your logic here
  });
});