空间导航

Video.js 中的空间导航增强了智能电视设备上的用户体验和辅助功能,使用遥控器方向键可以无缝导航播放器中的交互元素。此功能允许用户轻松浏览可聚焦组件。

构造函数

new SpatialNavigation(player)

使用初始设置构造一个 SpatialNavigation 实例。设置播放器实例,并准备空间导航系统。

参数
名称类型描述
播放器播放器

空间导航所附加到的 Video.js 播放器实例。

继承

成员

(受保护) allowedEvents_

一个对象,其中包含事件名称作为键,布尔值作为值。

注意:如果此处将事件名称设置为trueEventTarget#trigger将具有额外功能。有关更多信息,请参阅该函数。

属性
名称类型描述
EventTarget.prototype.allowedEvents_

方法

add(component)

将组件添加到可聚焦组件数组中。

参数
名称类型描述
组件组件

要添加的 Component

addEventListener()

EventTarget#on 的别名。允许 EventTarget 模拟标准 DOM API。

any(type, fn)

此函数将添加一个 事件监听器,该监听器仅触发一次,然后从所有事件中移除。这就像使用 EventTarget#on 添加一个 事件监听器 数组,在首次触发时对所有事件调用 EventTarget#off

参数
名称类型描述
类型string | Array.<string>

一个事件名称或事件名称数组。

函数函数

为每个事件名称调用一次的函数。

calculateDistance_(center1, center2, direction) → {number}

计算两点之间的距离,并根据指定的导航方向调整计算。

参数
名称类型描述
中心点1Object

第一个元素的中心点。

中心点2Object

第二个元素的中心点。

方向string

导航方向('up'、'down'、'left'、'right')。

返回

两个中心点之间计算出的距离。

类型: 
数字

clear()

清除可聚焦组件数组。

dispatchEvent()

EventTarget#trigger 的别名。允许 EventTarget 模拟标准 DOM API。

findBestCandidate_(currentCenter, candidates, direction) → {Object|null}

根据当前中心位置、候选列表和指定的导航方向,找到最佳候选。

参数
名称类型描述
当前中心点Object

当前聚焦组件元素的中心位置。

候选数组

接收焦点的候选组件数组。

方向string

导航方向('up'、'down'、'left'、'right')。

返回

最适合接收焦点的组件。

类型: 
Object | null

findSuitableDOMChild(component) → {HTMLElement|null}

在所提供组件的DOM元素内查找合适的子元素。

参数
名称类型描述
组件Object

包含要搜索的DOM元素的组件。

返回

如果找到合适的子元素则返回该元素,否则返回 null。

类型: 
HTMLElement | null

focus(component)

聚焦到给定组件。如果组件可聚焦,则聚焦到该组件。否则,它会尝试在该组件中查找合适的DOM子元素并聚焦到它。

参数
名称类型描述
组件组件

要聚焦的组件。

getCurrentComponent(targetopt) → {Component|null}

从可聚焦组件列表中获取当前聚焦的组件。如果提供了目标元素,则使用该元素查找相应的组件。如果未提供目标,则默认使用文档的当前活动元素。

参数
名称类型属性描述
目标HTMLElement<可选>

要与可聚焦组件进行检查的 DOM 元素。如果未提供,则使用 document.activeElement

返回
  • 如果在可聚焦组件中找到聚焦组件,则返回该组件,否则如果没有找到匹配组件则返回 null。
类型: 
Component | null

handlePlayerBlur_(event)

处理播放器失焦事件。

参数
名称类型描述
事件string | Event | Object

事件的名称,一个Event对象,或一个其类型键设置为事件名称的对象。

在以下情况下调用播放器失焦处理:*下一个聚焦元素不是当前聚焦元素的子元素,并且下一个聚焦元素不是播放器的子元素。*没有下一个聚焦元素。

handlePlayerFocus_()

处理播放器聚焦事件。

如果当前元素可聚焦,则调用播放器聚焦处理。

isInDirection_(srcRect, targetRect, direction) → {boolean}

确定目标矩形是否相对于源矩形处于指定的导航方向。

参数
名称类型描述
源矩形Object

源元素的边界矩形。

目标矩形Object

目标元素的边界矩形。

方向string

导航方向('up'、'down'、'left'、'right')。

返回

如果目标相对于源处于指定方向,则为 True。

类型: 
布尔值

move(direction)

根据指定方向导航到下一个可聚焦组件。

参数
名称类型描述
方向string

'up'、'down'、'left'、'right'

off(type, fn)

EventTarget实例中移除特定事件的事件监听器。这使得当指定事件发生时,事件监听器将不再被调用。

参数
名称类型描述
类型string | Array.<string>

一个事件名称或事件名称数组。

函数函数

要移除的函数。

on(type, fn)

EventTarget实例添加一个事件监听器事件监听器是一个函数,当某个名称的事件被触发时,该函数将被调用。

参数
名称类型描述
类型string | Array.<string>

一个事件名称或事件名称数组。

函数函数

使用EventTargets调用的函数。

onKeyDown_(event)

响应空间导航和媒体控制的 keydown 事件。

确定空间导航或媒体控制是否处于活动状态,并相应地处理按键输入。

参数
名称类型描述
事件KeyboardEvent

要处理的 keydown 事件。

one(type, fn)

此函数将添加一个 事件监听器,该监听器仅触发一次。首次触发后,它将被移除。这就像使用 EventTarget#on 添加一个 事件监听器,该监听器会对自己调用 EventTarget#off

参数
名称类型描述
类型string | Array.<string>

一个事件名称或事件名称数组。

函数函数

为每个事件名称调用一次的函数。

pause()

暂停空间导航功能。此方法设置一个标志,可用于暂时禁用导航逻辑。

performMediaAction_(key)

根据给定的按键输入执行媒体控制操作。

控制媒体播放器的播放和跳转功能。

参数
名称类型描述
按键string

表示要执行的媒体操作的按键。接受的按键有:'play'(播放)、'pause'(暂停)、'ff'(快进)、'rw'(倒带)。

refocusComponent()

聚焦到播放器失焦前保存的最后一个聚焦组件。

remove(component)

从可聚焦组件数组中移除组件。

参数
名称类型描述
组件组件

要从可聚焦组件数组中移除的组件。

removeEventListener()

EventTarget#off 的别名。允许 EventTarget 模拟标准 DOM API。

resume()

如果空间导航功能已暂停,则恢复其功能。此方法重置暂停标志,重新启用导航逻辑。

start()

通过向视频容器添加 keydown 事件监听器来启动空间导航。此方法确保事件监听器只添加一次。

stop()

通过从视频容器中移除 keydown 事件监听器来停止空间导航。同时将 isListening_ 标志设置为 false。

trigger(event)

此函数会触发一个事件的发生。这将导致所有等待该事件的事件监听器被调用。如果事件没有事件监听器,则什么都不会发生。

如果正在触发的事件名称在EventTarget.allowedEvents_中,Trigger 还会调用 on + uppercaseEventName 函数。

示例:'click' 在EventTarget.allowedEvents_中,因此,如果存在,Trigger 将尝试调用 onClick

参数
名称类型描述
事件字符串 | EventTarget~事件 | 对象

事件的名称,一个Event对象,或一个其类型键设置为事件名称的对象。

updateFocusableComponents() → {Array}

获取一组可聚焦组件。

返回

返回一个可聚焦组件的数组。

类型: 
数组

userSeek_(ct)

防止 liveThreshold 导致跳转在用户看来像是没有发生。

参数
名称类型描述
ct数字

要跳转到的当前时间