构造函数
new SpatialNavigation(player)
使用初始设置构造一个 SpatialNavigation 实例。设置播放器实例,并准备空间导航系统。
名称 | 类型 | 描述 |
---|---|---|
播放器 | 播放器 | 空间导航所附加到的 Video.js 播放器实例。 |
继承
成员
(受保护) allowedEvents_
一个对象,其中包含事件名称作为键,布尔值作为值。
注意:如果此处将事件名称设置为
true
,EventTarget#trigger将具有额外功能。有关更多信息,请参阅该函数。
名称 | 类型 | 描述 |
---|---|---|
EventTarget.prototype.allowedEvents_ |
方法
add(component)
将组件添加到可聚焦组件数组中。
名称 | 类型 | 描述 |
---|---|---|
组件 | 组件 | 要添加的 |
addEventListener()
EventTarget#on 的别名。允许 EventTarget
模拟标准 DOM API。
any(type, fn)
此函数将添加一个 事件监听器
,该监听器仅触发一次,然后从所有事件中移除。这就像使用 EventTarget#on 添加一个 事件监听器
数组,在首次触发时对所有事件调用 EventTarget#off。
名称 | 类型 | 描述 |
---|---|---|
类型 | string | | 一个事件名称或事件名称数组。 |
函数 | 函数 | 为每个事件名称调用一次的函数。 |
calculateDistance_(center1, center2, direction) → {number}
计算两点之间的距离,并根据指定的导航方向调整计算。
名称 | 类型 | 描述 |
---|---|---|
中心点1 | Object | 第一个元素的中心点。 |
中心点2 | Object | 第二个元素的中心点。 |
方向 | 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 元素。如果未提供,则使用 |
- 如果在可聚焦组件中找到聚焦组件,则返回该组件,否则如果没有找到匹配组件则返回 null。
- 类型:
- Component |
null
handlePlayerBlur_(event)
处理播放器失焦事件。
名称 | 类型 | 描述 |
---|---|---|
事件 | string | | 事件的名称,一个 在以下情况下调用播放器失焦处理:*下一个聚焦元素不是当前聚焦元素的子元素,并且下一个聚焦元素不是播放器的子元素。*没有下一个聚焦元素。 |
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 | | 一个事件名称或事件名称数组。 |
函数 | 函数 | 要移除的函数。 |
on(type, fn)
向EventTarget
实例添加一个事件监听器
。事件监听器
是一个函数,当某个名称的事件被触发时,该函数将被调用。
名称 | 类型 | 描述 |
---|---|---|
类型 | string | | 一个事件名称或事件名称数组。 |
函数 | 函数 | 使用 |
onKeyDown_(event)
响应空间导航和媒体控制的 keydown 事件。
确定空间导航或媒体控制是否处于活动状态,并相应地处理按键输入。
名称 | 类型 | 描述 |
---|---|---|
事件 | KeyboardEvent | 要处理的 keydown 事件。 |
one(type, fn)
此函数将添加一个 事件监听器
,该监听器仅触发一次。首次触发后,它将被移除。这就像使用 EventTarget#on 添加一个 事件监听器
,该监听器会对自己调用 EventTarget#off。
名称 | 类型 | 描述 |
---|---|---|
类型 | 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
。
名称 | 类型 | 描述 |
---|---|---|
事件 | 字符串 | | 事件的名称,一个 |
updateFocusableComponents() → {Array}
获取一组可聚焦组件。
返回一个可聚焦组件的数组。
- 类型:
- 数组
userSeek_(ct)
防止 liveThreshold 导致跳转在用户看来像是没有发生。
名称 | 类型 | 描述 |
---|---|---|
ct | 数字 | 要跳转到的当前时间 |