构造函数
new PlaybackRateMenuButton(player, optionsopt)
创建此类的实例。
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
播放器 | Player | 此类应附着到的 | |
选项 | Object | <可选> | 播放器选项的键/值存储。 |
继承
成员
(受保护) controlText_ :string
应显示在PlaybackRateMenuButton控件上的文本。
为本地化而添加。
- 字符串
(受保护) hideThreshold_ :Number
如果项目数量小于或等于此阈值，则隐藏菜单。此值默认为 0，每当我们向菜单添加可隐藏项目时，都会增加此值。我们在此处列出它，因为每次运行 createMenu 时都需要重置该值。
- 数字
方法
$(selector, contextopt) → {Element|null}
查找匹配selector的单个DOM元素。这可以在Component的contentEl()中或另一个自定义上下文中进行。
| 名称 | 类型 | 属性 | 默认 | 描述 |
|---|---|---|---|---|
选择器 | 字符串 | 一个有效的CSS选择器，将传递给 | ||
上下文 | Element | | <可选> | this.contentEl() | 要查询的 DOM 元素。也可以是选择器字符串，在这种情况下，将使用第一个匹配的元素作为上下文。如果缺少，则使用 |
- 参见
找到的DOM元素，或null
- 类型：
- Element |
null
$$(selector, contextopt) → {NodeList}
查找匹配selector的所有DOM元素。这可以在Component的contentEl()中或另一个自定义上下文中进行。
| 名称 | 类型 | 属性 | 默认 | 描述 |
|---|---|---|---|---|
选择器 | 字符串 | 一个有效的CSS选择器，将传递给 | ||
上下文 | Element | | <可选> | this.contentEl() | 要查询的 DOM 元素。也可以是选择器字符串，在这种情况下，将使用第一个匹配的元素作为上下文。如果缺少，则使用 |
- 参见
找到的DOM元素列表
- 类型：
- NodeList
addChild(child, optionsopt, indexopt) → {Component}
在当前Component中添加一个子Component。
| 名称 | 类型 | 属性 | 默认 | 描述 |
|---|---|---|---|---|
子项 | 字符串 | | 要添加的子项的名称或实例。 | ||
选项 | Object | <可选> | {} | 将传递给子项的子项的选项的键/值存储。 |
索引 | 数字 | <可选> | this.children_.length | 尝试添加子项的索引。 |
作为子项添加的Component。使用字符串时，Component将由该过程创建。
- 类型：
- Component
addClass(…classesToAdd)
向Component的元素添加CSS类名。
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
要添加的类 | 字符串 | <可重复> | 一个或多个要添加的CSS类名。 |
blur()
从实际按钮而不是此元素中移除焦点。
buildCSSClass() → {string}
构建默认的DOM className。
此对象的DOM className。
- 类型：
- 字符串
buildWrapperCSSClass() → {string}
允许子组件为包装元素堆叠 CSS 类名。
构建的包装器 DOM className
- 类型：
- 字符串
cancelAnimationFrame(id) → {number}
取消传递给Component#requestAnimationFrame (rAF) 的排队回调。
如果您通过 Component#requestAnimationFrame 将 rAF 回调排入队列，请使用此函数而不是 window.cancelAnimationFrame。如果您不这样做，您的销毁监听器将直到 Component#dispose 才会清理！
| 名称 | 类型 | 描述 |
|---|---|---|
ID | 数字 | 要清除的rAF ID。Component#requestAnimationFrame的返回值。 |
- 参见
返回已清除的rAF ID。
- 类型：
- 数字
cancelNamedAnimationFrame(name)
如果存在，取消当前的命名动画帧。
| 名称 | 类型 | 描述 |
|---|---|---|
名称 | 字符串 | 要取消的requestAnimationFrame的名称。 |
children() → {Array}
获取所有子组件的数组
子项
- 类型：
- 数组
clearInterval(intervalId) → {number}
清除通过 window.setInterval 或 Component#setInterval 创建的间隔。如果您通过 Component#setInterval 设置间隔，请使用此函数而不是 window.clearInterval。如果您不这样做，您的销毁监听器将直到 Component#dispose 才会清理！
| 名称 | 类型 | 描述 |
|---|---|---|
intervalId | 数字 | 要清除的间隔ID。Component#setInterval或 |
- 参见
返回已清除的间隔ID。
- 类型：
- 数字
clearTimeout(timeoutId) → {number}
清除通过 window.setTimeout 或 Component#setTimeout 创建的超时。如果您通过 Component#setTimeout 设置超时，请使用此函数而不是 window.clearTimeout。如果您不这样做，您的销毁监听器将直到 Component#dispose 才会清理！
| 名称 | 类型 | 描述 |
|---|---|---|
timeoutId | 数字 | 要清除的超时ID。Component#setTimeout或 |
- 参见
返回已清除的超时ID。
- 类型：
- 数字
contentEl() → {Element}
返回Component的DOM元素。子项将插入到此处。这通常与Component#el中返回的元素相同。
此Component的内容元素。
- 类型：
- 元素
controlText(textopt, elopt) → {string}
获取或设置将用于辅助功能的本地化控制文本。
注意：这将来自内部
menuButton_元素。
| 名称 | 类型 | 属性 | 默认 | 描述 |
|---|---|---|---|---|
文本 | 字符串 | <可选> | 元素的控制文本。 | |
元素 | 元素 | <可选> | this.menuButton_.el() | 要设置标题的元素。 |
- 获取时的控制文本
- 类型：
- 字符串
createEl() → {Element}
创建Component的DOM元素
创建的元素。
- 类型：
- 元素
createItems()
创建菜单项列表。特定于每个子类。
createMenu() → {Menu}
创建菜单并向其中添加所有项目。
已构建的菜单
- 类型：
- Menu
currentDimension(widthOrHeight) → {number}
获取组件元素的计算宽度或高度。
使用window.getComputedStyle。
| 名称 | 类型 | 描述 |
|---|---|---|
宽度或高度 | 字符串 | 包含“width”或“height”的字符串。您想获取的任何一个。 |
请求的维度，如果该维度未设置，则为0。
- 类型：
- 数字
currentDimensions() → {Component~DimensionObject}
获取一个包含组件元素计算宽度和高度值的对象。
使用window.getComputedStyle。
组件元素的计算维度。
currentHeight() → {number}
获取组件元素的计算高度。
使用window.getComputedStyle。
组件元素的计算高度。
- 类型：
- 数字
currentWidth() → {number}
获取组件元素的计算宽度。
使用window.getComputedStyle。
组件元素的计算宽度。
- 类型：
- 数字
dimension(widthOrHeight, numopt, skipListenersopt) → {number|undefined}
获取或设置Component元素的宽度或高度。这是Component#width和Component#height的共享代码。
需要了解的事项
- 如果宽度或高度是数字，这将返回以“px”为后缀的数字。
- 如果宽度/高度是百分比，这将返回以“%”为后缀的百分比
- 隐藏元素的宽度为 0，带
window.getComputedStyle。此函数默认使用Component的style.width，如果失败则回退到window.getComputedStyle。有关更多信息，请参阅 此文。 - 如果您想要组件的计算样式，请使用Component#currentWidth和{Component#currentHeight
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
宽度或高度 | 字符串 | 8 'width' 或 'height' | |
数字 | 数字 | | <可选> | 8 新维度 |
跳过监听器 | 布尔值 | <可选> | 跳过componentresize事件触发 |
获取时的维度，如果未设置则为0
- 类型：
- 数字 |
undefined
dimensions(width, height)
同时设置Component元素的宽度和高度。
| 名称 | 类型 | 描述 |
|---|---|---|
宽度 | 数字 | | 要设置 |
高度 | 数字 | | 要设置 |
disable()
禁用 MenuButton。不允许点击。
dispose()
销毁 menu-button 和所有子组件。
el() → {Element}
获取Component的DOM元素
此Component的DOM元素。
- 类型：
- 元素
(protected) emitTapEvents()
检测到触摸事件支持时发出“tap”事件。这用于通过轻触视频来支持切换控件。它们之所以启用，是因为否则每个子组件都会有额外的开销。
- Component#event:touchstart
- Component#event:touchmove
- Component#event:touchleave
- Component#event:touchcancel
- Component#event:touchend
enable()
启用 MenuButton。允许点击。
enableTouchActivity()
此函数在触摸事件发生时报告用户活动。这可以被任何希望触摸事件以其他方式运行的子组件关闭。
当触摸事件发生时报告用户触摸活动。用户活动用于确定何时显示/隐藏控件。当涉及鼠标事件时，这很简单，因为任何鼠标事件都应该显示控件。所以我们捕获冒泡到播放器的鼠标事件，并在发生时报告活动。对于触摸事件，这不像 touchstart 和 touchend 切换播放器控件那么容易。因此触摸事件也无法在播放器级别帮助我们。
用户活动是异步检查的。因此可能发生的情况是，视频上的点击事件关闭了控件。然后 touchend 事件冒泡到播放器。如果它报告了用户活动，它会立即重新打开控件。我们也不希望完全阻止触摸事件冒泡。此外，touchmove 事件和除点击之外的任何事件都不应重新打开控件。
- Component#event:touchstart
- Component#event:touchmove
- Component#event:touchend
- Component#event:touchcancel
focus()
将焦点设置到实际按钮，而不是此元素。
getAttribute(attribute) → {string|null}
获取Component元素上的属性值。
| 名称 | 类型 | 描述 |
|---|---|---|
属性 | 字符串 | 要获取其值的属性名称。 |
- 参见
- 请求的属性值。- 在某些浏览器中，如果属性不存在或没有值，则可能为空字符串 - 大多数浏览器在属性不存在或没有值时将返回null。
- 类型：
- 字符串 |
null
getChild(name) → {Component|undefined}
返回具有给定name的子Component。
| 名称 | 类型 | 描述 |
|---|---|---|
名称 | 字符串 | 要获取的子 |
具有给定name的子Component或undefined。
- 类型：
- Component |
undefined
getChildById(id) → {Component|undefined}
返回具有给定id的子Component。
| 名称 | 类型 | 描述 |
|---|---|---|
ID | 字符串 | 要获取的子 |
具有给定id的子Component或undefined。
- 类型：
- Component |
undefined
getDescendant(…names) → {Component|undefined}
返回遵循给定后代 names 的后代 Component。例如，['foo', 'bar', 'baz'] 将尝试获取当前组件上的 'foo'，'foo' 组件上的 'bar'，以及 'bar' 组件上的 'baz'，如果其中任何一个不存在则返回 undefined。
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
名称 | ...数组.<字符串> | | <可重复> | 要获取的子 |
遵循给定后代names的后代Component或undefined。
- 类型：
- Component |
undefined
getIsAvailableToBeFocused(el) → {boolean}
确定此组件是否当前可见/启用/等...
| 名称 | 类型 | 描述 |
|---|---|---|
元素 | HTMLElement | 代表组件的HTML元素。 |
如果组件当前可见且启用，则为true。否则，为false。
- 类型：
- 布尔值
getIsFocusable(el) → {boolean}
确定此组件是否可被视为可聚焦组件。
| 名称 | 类型 | 描述 |
|---|---|---|
元素 | HTMLElement | 代表组件的HTML元素。 |
如果组件可以被聚焦，则为true。否则，为false。
- 类型：
- 布尔值
getPositions() → {Object}
检索组件元素的位置和大小信息。
一个包含 boundingClientRect 和 center 属性的对象。- boundingClientRect：一个包含 x、y、width、height、top、right、bottom 和 left 属性的对象，表示元素的边界矩形。- center：一个包含 x 和 y 属性的对象，表示元素的中心点。width 和 height 设置为 0。
- 类型：
- Object
handleClick(event)
处理 MenuButton 上的点击。有关调用此函数的情况，请参阅 ClickableComponent#handleClick。
| 名称 | 类型 | 描述 |
|---|---|---|
event | Event | 导致此函数被调用的 |
- event:tap
- event:click
handleKeyDown(event)
处理 MenuButton 的 Tab、Escape、向下箭头和向上箭头键。有关调用此函数的情况，请参阅 ClickableComponent#handleKeyDown。
| 名称 | 类型 | 描述 |
|---|---|---|
event | Event | 导致此函数被调用的 |
- event:keydown
handleKeyPress(event)
许多组件曾有一个 handleKeyPress 方法，但其命名不当，因为它监听的是 keydown 事件。此方法名现在委托给 handleKeyDown。这意味着任何调用 handleKeyPress 的人都不会发现他们的方法调用停止工作。
| 名称 | 类型 | 描述 |
|---|---|---|
event | KeyboardEvent | 导致此函数被调用的事件。 |
(抽象) handleLanguagechange()
处理组件中播放器的语言变化。应由子组件覆盖。
handleMenuKeyUp(event)
处理 MenuButton 上的 keyup 事件。此监听器在构造函数中添加。
| 名称 | 类型 | 描述 |
|---|---|---|
event | Event | 按键事件 |
- event:keyup
handleMouseLeave(event)
处理 MenuButton 的 mouseleave 事件。
| 名称 | 类型 | 描述 |
|---|---|---|
event | Event | 导致此函数被调用的 |
- event:mouseleave
handlePlaybackRateschange()
在播放速率变化时，更新菜单以适应新项目。
handleSubmenuKeyDown(event)
处理子菜单上的 keydown 事件。此监听器在构造函数中添加。
| 名称 | 类型 | 描述 |
|---|---|---|
event | Event | 按键事件 |
- event:keydown
handleSubmenuKeyPress(event)
此方法名现在委托给 handleSubmenuKeyDown。这意味着任何调用 handleSubmenuKeyPress 的人都不会看到他们的方法调用停止工作。
| 名称 | 类型 | 描述 |
|---|---|---|
event | Event | 导致此函数被调用的事件。 |
hasClass(classToCheck) → {boolean}
检查组件元素是否具有CSS类名。
| 名称 | 类型 | 描述 |
|---|---|---|
classToCheck | 字符串 | 要检查的CSS类名。 |
- 如果
Component具有该类，则为True。- 如果Component不具有该类，则为False。
- 类型：
- 布尔值
height(numopt, skipListenersopt) → {number|undefined}
根据CSS样式获取或设置组件的高度。有关更详细的信息，请参见Component#dimension。
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
数字 | 数字 | | <可选> | 您要设置的高度，后缀为“%”、“px”或无。 |
跳过监听器 | 布尔值 | <可选> | 跳过componentresize事件触发器 |
获取时的高度，如果没有高度则为零
- 类型：
- 数字 |
undefined
hide()
如果Component的元素当前正在显示，则通过向其添加“vjs-hidden”类名来隐藏它。
id() → {string}
获取此Component的ID
此Component的ID
- 类型：
- 字符串
initChildren()
根据选项添加和初始化默认子Component。
isDisposed() → {boolean}
确定此组件是否已销毁。
如果组件已销毁，则为true。否则，为false。
- 类型：
- 布尔值
localize(string, tokensopt, defaultValueopt) → {string}
给定英文字符串，将字符串本地化。
如果提供了令牌，它将尝试对提供的字符串进行简单的令牌替换。它查找的令牌看起来像{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。
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
字符串 | 字符串 | 要本地化的字符串和在语言文件中查找的键。 | |
令牌 | 数组.<字符串> | <可选> | 如果当前项有令牌替换，请在此处提供令牌。 |
默认值 | 字符串 | <可选> | 默认为 |
本地化字符串，或者如果不存在本地化，则为英文字符串。
- 类型：
- 字符串
name() → {string}
获取Component的名称。该名称用于引用Component并在注册期间设置。
此Component的名称。
- 类型：
- 字符串
options(obj) → {Object}
使用新选项深度合并选项对象。
注意：当
obj和options都包含其值为对象的属性时。这两个属性将使用module:obj.merge合并
| 名称 | 类型 | 描述 |
|---|---|---|
对象 | Object | 包含新选项的对象。 |
this.options_和obj合并后的新对象。
- 类型：
- Object
playbackRateSupported() → {boolean}
获取技术是否支持播放速率，以及播放速率数组是否存在
是否支持更改播放速率
- 类型：
- 布尔值
playbackRates() → {Array}
获取可能的播放速率
所有可能的播放速率
- 类型：
- 数组
player() → {Player}
返回Component所附着的Player。
此Component所附着的播放器。
- 类型：
- Player
pressButton()
将当前 MenuButton 置于按下状态。
ready(fn)
将监听器绑定到组件的就绪状态。与事件监听器不同，如果就绪事件已经发生，它将立即触发函数。
| 名称 | 类型 | 描述 |
|---|---|---|
函数 | ReadyCallback | 当 |
removeAttribute(attribute)
从Component的元素中移除属性。
| 名称 | 类型 | 描述 |
|---|---|---|
属性 | 字符串 | 要移除的属性名称。 |
- 参见
removeChild(component)
从此Component的子项列表中移除子Component。同时从此Component的元素中移除子Component的元素。
| 名称 | 类型 | 描述 |
|---|---|---|
组件 | Component | 要移除的子 |
removeClass(…classesToRemove)
从Component的元素中移除CSS类名。
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
要移除的类 | 字符串 | <可重复> | 一个或多个要移除的CSS类名。 |
requestAnimationFrame(fn) → {number}
将回调排队传递给requestAnimationFrame (rAF)，但有一些额外的优点
通过回退到Component#setTimeout来支持不支持rAF的浏览器。
回调被转换为Component~GenericCallback（即绑定到组件）。
如果组件在调用之前被销毁，则会自动取消rAF回调。
| 名称 | 类型 | 描述 |
|---|---|---|
函数 | Component~GenericCallback | 一个函数，它将绑定到此组件并在浏览器下一次重绘之前执行。 |
- 参见
返回一个rAF ID，用于标识超时。它也可以在Component#cancelAnimationFrame中使用以取消动画帧回调。
- 类型：
- 数字
requestNamedAnimationFrame(name, fn)
请求一个动画帧，但只排队一个命名动画帧。在前面的动画帧完成之前，永远不会添加另一个。
| 名称 | 类型 | 描述 |
|---|---|---|
名称 | 字符串 | 此requestAnimationFrame的名称 |
函数 | Component~GenericCallback | 一个函数，它将绑定到此组件并在浏览器下一次重绘之前执行。 |
setAttribute(attribute, value)
设置Component元素上的属性值
| 名称 | 类型 | 描述 |
|---|---|---|
属性 | 字符串 | 要设置的属性名称。 |
值 | 字符串 | 要将属性设置为的值。 |
- 参见
setIcon(name)
覆盖 Component 中的 setIcon 方法。在这种情况下，我们希望图标附加到 menuButton。
| 名称 | 类型 | 描述 |
|---|---|---|
名称 | 字符串 | 要添加的图标名称。 |
setInterval(fn, interval) → {number}
创建一个每x毫秒运行一次的函数。此函数是window.setInterval的包装。但仍有一些原因选择使用此函数。
- 当Component#dispose被调用时，它通过Component#clearInterval被清除。
- 函数回调将是Component~GenericCallback
| 名称 | 类型 | 描述 |
|---|---|---|
函数 | Component~GenericCallback | 每 |
间隔 | 数字 | 每 |
- 参见
返回一个可用于标识间隔的ID。它也可以在Component#clearInterval中使用以清除间隔。
- 类型：
- 数字
setTimeout(fn, timeout) → {number}
创建一个在x毫秒超时后运行的函数。此函数是window.setTimeout的包装。但仍有一些原因选择使用此函数
- 当Component#dispose被调用时，它通过Component#clearTimeout被清除。
- 函数回调将被转换为Component~GenericCallback
注意：您不能对此函数返回的 ID 使用
window.clearTimeout。这将导致其销毁监听器无法清理！请改用 Component#clearTimeout 或 Component#dispose。
| 名称 | 类型 | 描述 |
|---|---|---|
函数 | Component~GenericCallback | 将在 |
超时 | 数字 | 在执行指定函数之前延迟的毫秒数。 |
- 参见
返回一个超时ID，用于标识超时。它也可以在Component#clearTimeout中使用以清除已设置的超时。
- 类型：
- 数字
show()
如果Component的元素被隐藏，则通过从其移除“vjs-hidden”类名来显示它。
toggleClass(classToToggle, predicateopt)
向组件的元素添加或移除CSS类名。
- 当Component#hasClass返回false时，添加
classToToggle。 - 当Component#hasClass返回true时，移除
classToToggle。
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
classToToggle | 字符串 | 要添加或移除的类。传递给DOMTokenList的toggle() | |
谓词 | 布尔 | | <可选> | 一个布尔值或返回布尔值的函数。传递给DOMTokenList的toggle()。 |
triggerReady()
触发此Component的所有就绪监听器。
unpressButton()
使当前 MenuButton 脱离按下状态。
update()
根据菜单项的当前状态更新菜单。
updateLabel(eventopt)
当速率改变时更新按钮标签
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
event | Event | <可选> | 导致此函数运行的事件。 |
updateVisibility(eventopt)
当没有播放速率选项可供选择时，隐藏播放速率控件
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
event | Event | <可选> | 导致此函数运行的事件。 |
width(numopt, skipListenersopt) → {number|undefined}
根据CSS样式获取或设置组件的宽度。有关更详细的信息，请参见Component#dimension。
| 名称 | 类型 | 属性 | 描述 |
|---|---|---|---|
数字 | 数字 | | <可选> | 您要设置的宽度，后缀为“%”、“px”或无。 |
跳过监听器 | 布尔值 | <可选> | 跳过componentresize事件触发器 |
获取时的宽度，如果没有宽度则为零
- 类型：
- 数字 |
undefined
事件
componentresize
当组件大小调整时触发。
dispose
当Component被销毁时触发。
| 名称 | 类型 | 属性 | 默认 | 描述 |
|---|---|---|---|---|
冒泡 | 布尔值 | <可选> | 假 | 设置为false，以便销毁事件不冒泡 |
ready
当Component就绪时触发。
tap
当Component被轻触时触发。
- MouseEvent