标题栏

在播放器上方显示一个元素,其中包含当前内容的标题和描述(可选)。

此组件的大部分代码源自现已废弃的 videojs-dock 插件:https://github.com/brightcove/videojs-dock/

构造函数

new 标题栏()

继承

方法

$(选择器, 上下文可选) → {元素|空}

查找匹配selector的单个DOM元素。这可以在ComponentcontentEl()中或另一个自定义上下文中进行。

参数
名称类型属性默认描述
选择器字符串

一个有效的CSS选择器,将传递给querySelector

上下文元素 | 字符串<可选>
this.contentEl()

一个用于查询的DOM元素。也可以是一个选择器字符串,在这种情况下,第一个匹配的元素将被用作上下文。如果缺失,则使用 this.contentEl()。如果 this.contentEl() 返回空,则回退到 document

覆盖
返回

找到的DOM元素,或null

类型: 
元素 |

$$(选择器, 上下文可选) → {节点列表}

查找匹配selector的所有DOM元素。这可以在ComponentcontentEl()中或另一个自定义上下文中进行。

参数
名称类型属性默认描述
选择器字符串

一个有效的CSS选择器,将传递给querySelectorAll

上下文元素 | 字符串<可选>
this.contentEl()

一个用于查询的DOM元素。也可以是一个选择器字符串,在这种情况下,第一个匹配的元素将被用作上下文。如果缺失,则使用 this.contentEl()。如果 this.contentEl() 返回空,则回退到 document

覆盖
返回

找到的DOM元素列表

类型: 
节点列表

添加子组件(子组件, 选项可选, 索引可选) → {组件}

在当前Component中添加一个子Component

参数
名称类型属性默认描述
子项字符串 | 组件

要添加的子项的名称或实例。

选项对象<可选>
{}

将传递给子项的子项的选项的键/值存储。

索引数字<可选>
this.children_.length

尝试添加子项的索引。

返回

作为子项添加的Component。使用字符串时,Component将由该过程创建。

类型: 
组件

添加类(…要添加的类)

Component的元素添加CSS类名。

参数
名称类型属性描述
要添加的类字符串<可重复>

一个或多个要添加的CSS类名。

失焦()

从此组件中移除焦点

(抽象) 构建CSS类() → {字符串}

构建默认的DOM类名。应由子组件覆盖。

返回

此对象的DOM类名。

类型: 
字符串

取消动画帧(id) → {数字}

取消传递给Component#requestAnimationFrame (rAF) 的排队回调。

如果您通过 Component#requestAnimationFrame 队列了一个 rAF 回调,请使用此函数而不是 window.cancelAnimationFrame。否则,您的销毁监听器将不会被清理,直到 Component#dispose

参数
名称类型描述
ID数字

要清除的rAF ID。Component#requestAnimationFrame的返回值。

参见
返回

返回已清除的rAF ID。

类型: 
数字

取消命名动画帧(名称)

如果存在,取消当前的命名动画帧。

参数
名称类型描述
名称字符串

要取消的requestAnimationFrame的名称。

子组件() → {数组}

获取所有子组件的数组

返回

子项

类型: 
数组

清除间隔(intervalId) → {数字}

清除通过 window.setIntervalComponent#setInterval 创建的间隔。如果您通过 Component#setInterval 设置了间隔,请使用此函数而不是 window.clearInterval。否则,您的销毁监听器将不会被清理,直到 Component#dispose

参数
名称类型描述
间隔ID数字

要清除的间隔ID。Component#setIntervalwindow.setInterval的返回值。

参见
返回

返回已清除的间隔ID。

类型: 
数字

清除超时(timeoutId) → {数字}

清除通过 window.setTimeoutComponent#setTimeout 创建的超时。如果您通过 Component#setTimeout 设置了超时,请使用此函数而不是 window.clearTimout。否则,您的销毁监听器将不会被清理,直到 Component#dispose

参数
名称类型描述
超时ID数字

要清除的超时ID。Component#setTimeoutwindow.setTimeout的返回值。

参见
返回

返回已清除的超时ID。

类型: 
数字

内容元素() → {元素}

返回Component的DOM元素。子项将插入到此处。这通常与Component#el中返回的元素相同。

返回

Component的内容元素。

类型: 
元素

创建元素() → {元素}

创建标题栏的DOM元素

返回

创建的元素。

类型: 
元素

当前尺寸(宽度或高度) → {数字}

获取组件元素的计算宽度或高度。

使用window.getComputedStyle

参数
名称类型描述
宽度或高度字符串

包含“width”或“height”的字符串。您想获取的任何一个。

返回

请求的维度,如果该维度未设置,则为0。

类型: 
数字

当前尺寸() → {组件~尺寸对象}

获取一个包含组件元素计算宽度和高度值的对象。

使用window.getComputedStyle

返回

组件元素的计算维度。

类型: 
组件~尺寸对象

当前高度() → {数字}

获取组件元素的计算高度。

使用window.getComputedStyle

返回

组件元素的计算高度。

类型: 
数字

当前宽度() → {数字}

获取组件元素的计算宽度。

使用window.getComputedStyle

返回

组件元素的计算宽度。

类型: 
数字

尺寸(宽度或高度, 数字可选, 跳过监听器可选) → {数字|未定义}

获取或设置Component元素的宽度或高度。这是Component#widthComponent#height的共享代码。

需要了解的事项

  • 如果宽度或高度是数字,这将返回以“px”为后缀的数字。
  • 如果宽度/高度是百分比,这将返回以“%”为后缀的百分比
  • 隐藏元素的宽度在 window.getComputedStyle 中为0。此函数默认为组件的 style.width,并回退到 window.getComputedStyle。有关更多信息,请参阅 此链接
  • 如果您想要组件的计算样式,请使用Component#currentWidth和{Component#currentHeight
参数
名称类型属性描述
宽度或高度字符串

8 'width' 或 'height'

数字数字 | 字符串<可选>

8 新维度

跳过监听器布尔值<可选>

跳过componentresize事件触发

返回

获取时的维度,如果未设置则为0

类型: 
数字 | 未定义

尺寸(宽度, 高度)

同时设置Component元素的宽度和高度。

参数
名称类型描述
宽度数字 | 字符串

要设置Component元素的宽度。

高度数字 | 字符串

要设置Component元素的高度。

销毁()

销毁组件。

元素() → {元素}

获取Component的DOM元素

覆盖
返回

Component的DOM元素。

类型: 
元素

(受保护) 触发轻触事件()

检测到触摸事件支持时发出“tap”事件。这用于通过轻触视频来支持切换控件。它们之所以启用,是因为否则每个子组件都会有额外的开销。

监听事件
  • 组件#事件:触摸开始
  • 组件#事件:触摸移动
  • 组件#事件:触摸离开
  • 组件#事件:触摸取消
  • 组件#事件:触摸结束

启用触摸活动()

此函数在触摸事件发生时报告用户活动。这可以被任何希望触摸事件以其他方式运行的子组件关闭。

当触摸事件发生时报告用户触摸活动。用户活动用于确定何时显示/隐藏控件。对于鼠标事件来说很简单,因为任何鼠标事件都应该显示控件。所以我们捕获冒泡到播放器的鼠标事件并在发生时报告活动。对于触摸事件,就没有那么容易了,因为 touchstarttouchend 切换播放器控件。因此,触摸事件也不能在播放器级别帮助我们。用户活动是异步检查的。因此可能发生的情况是,视频上的轻触事件关闭了控件。然后 touchend 事件冒泡到播放器。如果它报告了用户活动,就会立即重新打开控件。我们也不希望完全阻止触摸事件冒泡。此外,touchmove 事件以及除轻触之外的任何事件都不应重新打开控件。

用户活动是异步检查的。因此可能发生的情况是,视频上的轻触事件关闭了控件。然后 touchend 事件冒泡到播放器。如果它报告了用户活动,就会立即重新打开控件。我们也不希望完全阻止触摸事件冒泡。此外,touchmove 事件以及除轻触之外的任何事件都不应重新打开控件。

监听事件
  • 组件#事件:触摸开始
  • 组件#事件:触摸移动
  • 组件#事件:触摸结束
  • 组件#事件:触摸取消

聚焦()

将焦点设置到此组件

获取属性(属性) → {字符串|空}

获取Component元素上的属性值。

参数
名称类型描述
属性字符串

要获取其值的属性名称。

参见
返回
  • 请求的属性值。- 在某些浏览器中,如果属性不存在或没有值,则可能为空字符串 - 大多数浏览器在属性不存在或没有值时将返回null。
类型: 
字符串 |

获取子组件(名称) → {组件|未定义}

返回具有给定name的子Component

参数
名称类型描述
名称字符串

要获取的子Component的名称。

返回

具有给定name的子Component或undefined。

类型: 
组件 | 未定义

按ID获取子组件(id) → {组件|未定义}

返回具有给定id的子Component

参数
名称类型描述
ID字符串

要获取的子Component的ID。

返回

具有给定id的子Component或undefined。

类型: 
组件 | 未定义

获取后代(…名称) → {组件|未定义}

返回遵循给定后代名称的后代组件。例如,`['foo', 'bar', 'baz']` 将尝试在当前组件上获取 'foo',在 'foo' 组件上获取 'bar',在 'bar' 组件上获取 'baz',如果其中任何一个不存在则返回 undefined。

参数
名称类型属性描述
名称...数组.<字符串> | 字符串<可重复>

要获取的子Component的名称。

返回

遵循给定后代names的后代Component或undefined。

类型: 
组件 | 未定义

是否可聚焦(元素) → {布尔值}

确定此组件是否当前可见/启用/等...

参数
名称类型描述
元素HTMLElement

代表组件的HTML元素。

返回

如果组件当前可见且启用,则为true。否则,为false

类型: 
布尔值

是否可聚焦(元素) → {布尔值}

确定此组件是否可被视为可聚焦组件。

参数
名称类型描述
元素HTMLElement

代表组件的HTML元素。

返回

如果组件可以被聚焦,则为true。否则,为false

类型: 
布尔值

获取位置() → {对象}

检索组件元素的位置和大小信息。

返回

一个包含 boundingClientRectcenter 属性的对象。- boundingClientRect:一个包含 xywidthheighttoprightbottomleft 属性的对象,表示元素的边界矩形。- center:一个包含 xy 属性的对象,表示元素的中心点。widthheight 设置为 0。

类型: 
对象

处理按键按下(事件)

当此Component接收到一个它不处理的keydown事件时,它会将该事件传递给Player进行处理。

参数
名称类型描述
事件键盘事件

导致此函数被调用的keydown事件。

处理按键按压(事件)

许多组件过去都有一个 handleKeyPress 方法,但其命名不当,因为它监听的是 keydown 事件。此方法名现在委托给 handleKeyDown。这意味着任何调用 handleKeyPress 的人都不会看到他们的方法调用停止工作。

参数
名称类型描述
事件键盘事件

导致此函数被调用的事件。

(抽象) handleLanguagechange()

处理组件中播放器的语言变化。应由子组件覆盖。

拥有类(要检查的类) → {布尔值}

检查组件元素是否具有CSS类名。

参数
名称类型描述
要检查的类字符串

要检查的CSS类名。

返回
  • 如果Component具有该类,则为True。- 如果Component不具有该类,则为False。
类型: 
布尔值

高度(数字可选, 跳过监听器可选) → {数字|未定义}

根据CSS样式获取或设置组件的高度。有关更详细的信息,请参见Component#dimension

参数
名称类型属性描述
数字数字 | 字符串<可选>

您要设置的高度,后缀为“%”、“px”或无。

跳过监听器布尔值<可选>

跳过componentresize事件触发器

返回

获取时的高度,如果没有高度则为零

类型: 
数字 | 未定义

隐藏()

如果Component的元素当前正在显示,则通过向其添加“vjs-hidden”类名来隐藏它。

ID() → {字符串}

获取此Component的ID

覆盖
返回

Component的ID

类型: 
字符串

初始化子组件()

根据选项添加和初始化默认子Component

已销毁() → {布尔值}

确定此组件是否已销毁。

返回

如果组件已销毁,则为true。否则,为false

类型: 
布尔值

本地化(字符串, 令牌可选, 默认值可选) → {字符串}

给定英文字符串,将字符串本地化。

如果提供了令牌,它将尝试对提供的字符串进行简单的令牌替换。它查找的令牌看起来像{1},其中索引是令牌数组中的1-indexed。

如果提供了 defaultValue,当在提供的语言文件中找不到值时,将使用它而不是 string。这在您希望为令牌替换设置描述性键但拥有简洁的本地化字符串且不需要包含 en.json 时很有用。

目前,它用于进度条计时。

{
  "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
}

然后像这样使用

this.localize('progress bar timing: currentTime={1} duration{2}',
              [this.player_.currentTime(), this.player_.duration()],
              '{1} of {2}');

输出类似:01:23 of 24:56

参数
名称类型属性描述
字符串字符串

要本地化的字符串和在语言文件中查找的键。

令牌数组.<字符串><可选>

如果当前项有令牌替换,请在此处提供令牌。

默认值字符串<可选>

默认为string。如果查找键需要单独,则可以作为令牌替换的默认值。

返回

本地化字符串,或者如果不存在本地化,则为英文字符串。

类型: 
字符串

名称() → {字符串}

获取Component的名称。该名称用于引用Component并在注册期间设置。

返回

Component的名称。

类型: 
字符串

选项(对象) → {对象}

使用新选项深度合并选项对象。

注意:当objoptions都包含其值为对象的属性时。这两个属性将使用module:obj.merge合并

参数
名称类型描述
对象对象

包含新选项的对象。

返回

this.options_obj合并后的新对象。

类型: 
对象

播放器() → {播放器}

返回Component所附着的Player

返回

Component所附着的播放器。

类型: 
播放器

就绪(函数)

将监听器绑定到组件的就绪状态。与事件监听器不同,如果就绪事件已经发生,它将立即触发函数。

参数
名称类型描述
函数就绪回调

Component就绪时调用的函数。

移除属性(属性)

Component的元素中移除属性。

参数
名称类型描述
属性字符串

要移除的属性名称。

参见

移除子组件(组件)

从此Component的子项列表中移除子Component。同时从此Component的元素中移除子Component的元素。

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

要移除的子Component

移除类(…要移除的类)

Component的元素中移除CSS类名。

参数
名称类型属性描述
要移除的类字符串<可重复>

一个或多个要移除的CSS类名。

请求动画帧(函数) → {数字}

将回调排队传递给requestAnimationFrame (rAF),但有一些额外的优点

参数
名称类型描述
函数组件~通用回调

一个函数,它将绑定到此组件并在浏览器下一次重绘之前执行。

参见
返回

返回一个rAF ID,用于标识超时。它也可以在Component#cancelAnimationFrame中使用以取消动画帧回调。

类型: 
数字

请求命名动画帧(名称, 函数)

请求一个动画帧,但只排队一个命名动画帧。在前面的动画帧完成之前,永远不会添加另一个。

参数
名称类型描述
名称字符串

此requestAnimationFrame的名称

函数组件~通用回调

一个函数,它将绑定到此组件并在浏览器下一次重绘之前执行。

设置属性(属性, 值)

设置Component元素上的属性值

参数
名称类型描述
属性字符串

要设置的属性名称。

字符串

要将属性设置为的值。

参见

设置图标(图标名称, 元素可选) → {元素}

向另一个元素或组件添加SVG图标元素。

参数
名称类型属性默认描述
图标名称字符串

图标的名称。所有图标名称的列表可以在“sandbox/svg-icons.html”中找到

元素元素<可选>
this.el()

要设置标题的元素。默认为当前组件的元素。

返回

新创建的图标元素。

类型: 
元素

设置间隔(函数, 间隔) → {数字}

创建一个每x毫秒运行一次的函数。此函数是window.setInterval的包装。但仍有一些原因选择使用此函数。

  1. Component#dispose被调用时,它通过Component#clearInterval被清除。
  2. 函数回调将是Component~GenericCallback
参数
名称类型描述
函数组件~通用回调

x秒运行的函数。

间隔数字

x毫秒执行指定的函数。

参见
返回

返回一个可用于标识间隔的ID。它也可以在Component#clearInterval中使用以清除间隔。

类型: 
数字

设置超时(函数, 超时) → {数字}

创建一个在x毫秒超时后运行的函数。此函数是window.setTimeout的包装。但仍有一些原因选择使用此函数

  1. Component#dispose被调用时,它通过Component#clearTimeout被清除。
  2. 函数回调将被转换为Component~GenericCallback

注意:您不能对此函数返回的ID使用 window.clearTimeout。这会导致其销毁监听器无法被清理!请改用 Component#clearTimeoutComponent#dispose

参数
名称类型描述
函数组件~通用回调

将在timeout后运行的函数。

超时数字

在执行指定函数之前延迟的毫秒数。

参见
返回

返回一个超时ID,用于标识超时。它也可以在Component#clearTimeout中使用以清除已设置的超时。

类型: 
数字

显示()

如果Component的元素被隐藏,则通过从其移除“vjs-hidden”类名来显示它。

切换类(要切换的类, 断言可选)

向组件的元素添加或移除CSS类名。

参数
名称类型属性描述
要切换的类字符串

要添加或移除的类。传递给DOMTokenList的toggle()

谓词布尔值 | DOM.断言回调<可选>

一个布尔值或返回布尔值的函数。传递给DOMTokenList的toggle()。

触发就绪()

触发此Component的所有就绪监听器。

更新(选项可选)

使用新的标题和描述文本更新标题栏组件的内容。

如果标题和描述都缺失,标题栏将被隐藏。

如果标题或描述中任何一个存在,标题栏将可见。

注意:任何先前设置的值都将保留。要取消设置先前的值,您必须传入空字符串或 null。

例如

update({title: 'foo', description: 'bar'}) // title: 'foo', description: 'bar'
update({description: 'bar2'}) // title: 'foo', description: 'bar2'
update({title: ''}) // title: '', description: 'bar2'
update({title: 'foo', description: null}) // title: 'foo', description: null
参数
名称类型属性默认描述
选项对象<可选>
{}

一个选项对象。当为空时,标题栏将被隐藏。

属性
名称类型属性描述
标题字符串<可选>

要在标题栏中显示的标题。

描述字符串<可选>

要在标题栏中显示的描述。

更新DOM_()

根据组件的状态对象更新DOM。

宽度(数字可选, 跳过监听器可选) → {数字|未定义}

根据CSS样式获取或设置组件的宽度。有关更详细的信息,请参见Component#dimension

参数
名称类型属性描述
数字数字 | 字符串<可选>

您要设置的宽度,后缀为“%”、“px”或无。

跳过监听器布尔值<可选>

跳过componentresize事件触发器

返回

获取时的宽度,如果没有宽度则为零

类型: 
数字 | 未定义

事件

组件尺寸改变

当组件大小调整时触发。

类型

销毁

Component被销毁时触发。

类型
属性
名称类型属性默认描述
冒泡布尔值<可选>

设置为false,以便销毁事件不冒泡

准备就绪

Component就绪时触发。

类型

轻触

Component被轻触时触发。

类型
  • 鼠标事件