Player

Class: Player | Video.js Documentation

Player(tag, optionsopt, readyopt)

当使用任何 Video.js setup 方法去初始化视频时，都将创建 Player 类的实例。

创建实例后，可以通过两种方式全局访问：

1. 通过调用 videojs('example_video_1');
2. 直接使用 videojs.players.example_video_1;

new Player(tag, optionsopt, readyopt)

创建此类的实例。

参数：

Extends 扩展

Component

Members 成员

全部播放器 - static players :Object

全局播放器列表。
key 是播放器的 ID，value 是 Player 实例，如果播放器已释放则是 null。

CORS 设置 - crossorigin

获取或设置 Player 的 crossorigin 选项。对于 HTML5 播放器，这将在 <video> 元素上设置 crossOrigin 属性以控制 CORS 行为。

• See：Video 元素属性

Methods 方法

获取 DOM 配置 - static getTagSettings(tag) → {Object}

获取 DOM 元素的配置。

参数：

返回：

Object - 包含这个 DOM 元素的所有配置（元素属性、视频配置等）的对象。

译者：

// -- 示例 --
// html
<div id="dom" width="100"></div>
<video id="example"></vidoe>
// js
var obj = videojs('example').constructor.getTagSettings(document.getElementById('dom'))
console.log(obj) // {id: 'dom', width: '100', sources: [], tracks: []}

匹配单个 DOM 元素 - $(selector, contextopt) → {Element|null}

查找与 selector 匹配的单个 DOM 元素。可以指定查询上下文为组件的 contentEl() 或其它自定义上下文。

参数：

返回：

Element | null - 找到的 DOM 元素或 null

• Overrides：[Component#)
• See：有关 CSS 选择器的信息

匹配多个 DOM 元素 - $$(selector, contextopt) → {NodeList}

查找所有与 selector 匹配的 DOM 元素。可以指定查询上下文为组件的 contentEl() 或其它自定义上下文。

参数：

返回：

NodeList - 找到的 DOM 元素列表

• Overrides：Component#$$
• See：有关 CSS 选择器的信息

添加单个子组件 - addChild(child, optionsopt, indexopt) → {Component}

在当前组件内添加一个子组件。

参数：

返回：

Component - 作为子级添加的组件。当使用字符串时，组件将通过这个过程创建。

• Overrides：Component#addChild

添加 className - addClass(classToAdd)

向组件元素添加一个 CSS className。

参数：

• Overrides：Component#addClass

添加远程文本轨道 - addRemoteTextTrack(options, manualCleanupopt) → {HtmlTrackElement}

创建远程 TextTrack 和 HTMLTrackElement。当 manualCleanup 设置为 false 时，轨道将在 source 变更时自动删除。

参数：

返回：

HtmlTrackElement - 已创建并添加到 HtmlTrackElementList 和远程 TextTrackList 的 HTMLTrackElement 。

• 弃用：在即将发布的 Video.js 版本中，”manualCleanup” 参数的默认值将默认为 “false”。

添加文本轨道 - addTextTrack(kindopt, labelopt, languageopt) → {TextTrack|undefined}

一个用于将 TextTrack(文本轨道) 添加到 TextTrackList 的辅助方法。

除了 W3C 设置外，我们还允许通过 options 选项添加额外信息。

参数：

返回：

TextTrack | undefined - 已添加的 TextTrack，如果没有 tech，则返回 undefined

• See：http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack

获取/设置播放器宽高比 - aspectRatio(ratioopt) → {string|undefined}

一个播放器宽高比的 getter/setter。

参数：

返回：

string | undefined - getter 返回获取的播放器的当前宽高比；setter 返回 undefined

获取全部音轨 - audioTracks() → {AudioTrackList}

获取 AudioTrackList（音轨列表）

返回：

AudioTrackList - 当前音频轨道列表

获取/设置 autoplay - autoplay(valueopt) → {boolean|string}

获取或设置 autoplay 选项。当设置一个 boolean 值时，将修改 tech 上的属性。当设置一个字符串时，tech 上的属性将被删除，并且 Player 将在 loadstart 上处理 autoplay。

参数：

返回：

boolean | string - 获取时返回 autoplay 的当前值

失去焦点 - blur()

失去组件焦点

• Overrides：Component#blur

获取/设置断点 - breakpoints(breakpointsopt) → {Object}

获取或设置播放器的断点。

使用对象或 true 调用这个方法将删除之前的所有自定义断点，并重新从默认值开始。

参数：

Object 属性

返回：

Object - 将断点名称映射到最大宽度指的对象

获取视频缓存 - buffered() → {TimeRange}

获取一个 TimeRange 对象，其中包含已下载视频的时间数组。如果您只需要视频下载的百分比，请使用 bufferedPercent。

返回：

TimeRange - 一个模拟的 TimeRange 对象（遵循 HTML 规范）

• See：Buffered Spec

获取缓存尾部时间 - bufferedEnd() → {number}

获取上一个缓存时间范围的结束时间。用于在进度条中封装时间范围。

返回：

number - 最后一个缓存时间范围的结束时间值

获取缓存百分比 - bufferedPercent() → {number}

获取视频下载的百分比（十进制）。此方法不是原生 HTML video API。

返回：

number - 介于 0 和 1 之间的小数，表示缓存的百分比，0 为 0%，1为 100%。

（内部使用）生成 className - abstract buildCSSClass() → {string}

生成默认的 DOM className。可被子组件覆盖。

译者：主要是 Video.js 内部用于为 DOM 元素拼接 className。

返回：

string - 调用者对象的 DOM className。

• Overrides：Component#buildCSSClass

用 id 清理动画帧 - cancelAnimationFrame(id) → {number}

清理通过 Component#requestAnimationFrame（rAF） 添加的回调。

如果通过 Component#requestAnimationFrame 向队列中添加的 rAF 回调，使用此方法代替 window.cancelAnimationFrame。如果不这样做，您的 dispose（销毁） 侦听器将不会被清理，直到 Component#dispose（组件销毁）！

参数：

返回：

number - 返回已清理的 rAF 的 ID

• Overrides：Component#cancelAnimationFrame
• See：Similar to

用 name 清理动画帧 - cancelNamedAnimationFrame(name)

清理一个当前命名过的动画帧（如果存在）。

参数：

• Overrides：Component#cancelNamedAnimationFrame

检查 MIMEType 是否支持 - canPlayType(type) → {string}

检查播放器是否可以播放给定的 MIME Type

参数：

返回：

string - ‘probably’, ‘maybe’, 或 ‘’ (空字符串)

• See：https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype

获取所有子组件 - children() → {Array}

获取所有子组件组成的数组。

返回：

Array - children

• Overrides：Component#children

封装的 clearInterval - clearInterval(intervalId) → {number}

清除通过 window.setInterval 或 Component#setInterval 创建的定时器（interval）。如果通过 Component#setInterval 设置的定时器，请使用此方法代替 window.clearInterval。如果不这样做，您的 dispose（销毁） 侦听器将不会被清理，直到 Component#dispose（组件销毁）！

参数：

返回：

number - 返回已清理的定时器的 id

• Overrides：Component#clearInterval
• See：Similar to

封装的 clearTimeout - clearTimeout(timeoutId) → {number}

清除通过 window.setTimeout 或 Component#setTimeout 创建的定时器（timeout）。如果通过 Component#setTimeout 设置的定时器，请使用此方法代替 window.clearTimout。如果不这样做，您的 dispose（销毁） 侦听器将不会被清理，直到 Component#dispose（组件销毁）！

参数：

返回：

number - 返回已清理的定时器的 id

• Overrides：Component#clearTimeout
• See：Similar to

获取组件的 DOM - contentEl() → {Element}

返回组件的 DOM 元素。这是插入 children 的地方。通常它与 Component#el 返回的元素相同。

返回：

Element - 此组件的元素

• Overrides：Component#contentEl

获取/设置 controls - controls(boolopt) → {boolean}

获取或设置控件（controls）是否显示。

参数：

热点：Player#event:controlsenabled

返回：

boolean - 获取时返回 controls 的当前值

创建 DOM - createEl() → {Element}

创建播放器的 DOM 元素

返回：

Element - 已创建的 DOM 元素

• Overrides：Component#createEl

创建 Modal - createModal(content, optionsopt) → {ModalDialog}

创建一个简单的模块对话框（ModalDialog 组件实例），该对话框立即用任意内容覆盖播放器，并在关闭时删除自身。

参数：

返回：

ModalDialog - 已创建的 ModalDialog

获取/设置 crossOrigin - crossOrigin(valueopt) → {string|undefined}

获取或设置播放器的 crossOrigin 选项。对于 HTML5 播放器，这将在 <video> 元素上设置 crossOrigin 属性以控制 CORS 行为。

参数：

返回：

string | undefined - 获取时返回播放器当前 crossOrigin 的值 - 设置时返回 undefined

• See：Video Element Attributes

获取当前断点名称 - currentBreakpoint() → {string}

获取当前断点名称（如果有）

返回：

string - 如果当前设置了断点，则返回与断点对象的匹配项的 key。否则返回一个空字符串。

获取当前断点 className - currentBreakpointClass() → {string}

获取当前断点的 className

返回：

string - 当前匹配的断点的 className（例如 "vjs-layout-tiny" 或 "vjs-layout-large"）。如果没有当前断点，则返回空字符串。

获取组件元素的实时宽或高 - currentDimension(widthOrHeight) → {number}

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

使用 window.getComputedStyle。

参数：

返回：

number - 请求的维度的值，如果没有为该维度设置任何内容，则返回 0。

• Overrides：Component#currentDimension

获取组件的实时宽和高 - currentDimensions() → {Component~DimensionObject}

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

使用 window.getComputedStyle。

返回：

Component~DimensionObject - 组件元素的计算尺寸

• Overrides：Component#currentDimensions

获取组件的实时高度 - currentHeight() → {number}

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

使用 window.getComputedStyle。

返回：

number - 组件元素的计算高度

• Overrides：
  Component#currentHeight

获取当前 source - currentSource() → {Tech~SourceObject}

返回当前 source 对象。

返回：

Tech~SourceObject - 当前 source 对象

获取所有 source - currentSources() → {Array.[Tech~SourceObject](https://docs.videojs.com/Tech.html#~SourceObject)}

返回当前所有 source 对象。

返回：

Array.[Tech~SourceObject](https://docs.videojs.com/Tech.html#~SourceObject) - 当前所有 source 对象

获取当前 source 的 src - currentSrc() → {string}

返回当前 source 的完整 URL，例如 http://mysite.com/video.mp4，用于和 currentType 结合使用，以帮助重新构建当前 source 对象。

返回：

string - 当前 source 的 src

获取当前播放时间 - currentTime(secondsopt) → {number}

获取或设置当前播放的时间（秒）

参数：

返回：

number - 获取时返回当前播放的时间（秒）

获取当前 source 的 type - currentType() → {string}

获取当前 source type，例如 video/mp4。这可以让您重新构建当前 source 对象，以便稍后加载相同的 source 和 tech。

返回：

string - 当前 source 的 MIME Type

获取组件的实时宽度 - currentWidth() → {number}

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

使用 window.getComputedStyle。

返回：

number - 组件元素的计算宽度

• Overrides：Component#currentWidth

启用/禁用调试模式 - debug(enabled)

启用/禁用 info 级别的调试模式。

参数：

获取当前初始静音设置 - defaultMuted(defaultMutedopt) → {boolean|Player}

获取当前的 defaultMuted 状态，或将 defaultMuted 设置为打开或关闭。defaultMuted 表示初始播放时 muted（静音）的状态。

  var myPlayer = videojs('some-player-id');
  myPlayer.src("http://www.example.com/path/to/video.mp4");
  // get, should be false
  console.log(myPlayer.defaultMuted());
  // set to true
  myPlayer.defaultMuted(true);
  // get should be true
  console.log(myPlayer.defaultMuted());

参数：

返回：

boolean | Player - 获取时返回 defaultMuted 的状态 true 或 false - 设置时返回当前播放器的引用。

获取/设置初始默认播放速率 - defaultPlaybackRate(rateopt) → {number|Player}

获取或设置当前默认播放速率。例如，默认播放速率 1.0 表示正常速度，0.5 表示半速播放。defaultPlaybackRate 仅表示视频的初始播放速率，而不是当前播放速率。

参数：

返回：

number | Player - 获取时，返回默认播放速率或 1.0 - 设置时返回播放器

• See：https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-defaultplaybackrate

获取/设置播放器宽或高 - dimension(dimension, valueopt) → {number}

一个播放器宽高的 getter/setter。

参数：

返回：

number - 获取时返回参数中指定维度的值（width/height）。

• Overrides：Component#dimension

设置播放器的宽高 - dimensions(width, height)

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

参数：

• Overrides：Component#dimensions

启用/禁用画中画 - disablePictureInPicture(value)

禁用 Picture-in-Picture （画中画）模式。

参数：

销毁 - dispose()

销毁视频播放器并执行任何必要的清理。

如果要在 DOM 中动态添加和删除视频，这尤其有用。

热点：Player#event:dispose

• Overrides：Component#dispose

（内部使用）全屏时触发的方法 - documentFullscreenChange_()

当 document 的 fullscreenchange 事件触发时调用该方法。

译者：Video.js 内部使用，用于同步更改内部管理的全屏状态。

获取/设置视频时长- duration(secondsopt) → {number}

通常，以秒为单位获取视频的时间长度；在除了最罕见的用例外的所有用例中，都不会向该方法传递参数。

注意：在获取到视频时间长度之前，视频必须已经开始加载。在视频开始播放之前，可能无法根据预加载的情况得知视频时间长度。

参数：

热点：Player#event:durationchange

返回：

number - 获取时返回视频的时间长度（秒）

获取组件的 DOM - el() → {Element}

获取组件的 DOM 元素

返回：

Element - 组件的 DOM 元素

• Overrides：Component#el

（内部使用）通知用户正在活动 - enableTouchActivity()

每当 touch 事件触发时，此功能都会报告用户活动状态。任何指定用其它方式处理 touch 事件的子组件都会关闭此功能。

touch 事件触发时报告用户的 touch 活动状态。用户活动状态用于控制 controls（控件）的何时显示/隐藏。鼠标事件很简单，因为任何鼠标事件都应该显示控件。因此，我们捕捉冒泡到播放器的鼠标事件，并在事件触发时报告活动状态。touch 事件不像 touchstart 和 touchend 切换播放器控件那样简单。所以 touch 事件无法在播放器层面帮助我们。

检查用户活动状态是异步的。因此，发生的也可能是一个关闭控件的 tap （点击）事件。然后 touchend 事件冒泡到播放器。如果它报告用户正在活动，它将重新打开控件。我们也不想完全阻止 touch 事件的冒泡。此外，touchmove 事件和除 tap （点击）以外的任何事件都不应重新打开控件。

译者：Video.js 当监测到用户正在活动是执行的方法，内部会创建几个侦听器和开启一个计时器，管理切换状态。

• Overrides：Component#enableTouchActivity

判断播放是否结束 - ended() → {Boolean}

返回播放器是否处于 ended 状态。

返回：

Boolean - 如果播放器处于结束状态返回 true，否则返回 false

（内部使用）进入全屏 - enterFullWindow()

如果浏览器不支持原生的全屏 API，可以使用该功能将视频容器拉伸以充满浏览器窗口。

译者：

Video.js 应使用 requestFullscreen() 进入全屏模式。

Video.js 匹配了主流浏览器对应的 Web API，全屏操作时优先调用浏览器的（requestFullscreen、webkitRequestFullscreen（WebKit）、mozRequestFullScreen（Mozilla）、msRequestFullscreen（Microsoft）），如果不支持则会调用 enterFullWindow() 通过 CSS 方式更改元素宽高以实现全屏效果。

注意：使用 enterFullWindow() 开启的全屏，只能用 exitFullWindow() 退出，Video.js 用户不建议直接使用这两个 API。

热点：Player#event:enterFullWindow

获取当前 MediaError - error(erropt) → {MediaError|null}

设置或获取当前 MediaError 错误。

参数：

热点：Player#event:error

返回：

MediaError | null - 获取时，返回当前 MediaError（或 null）

退出全屏 - exitFullscreen()

在全屏模式下，将视频恢复到正常大小。

热点：Player#event:fullscreenchange

（内部使用）退出全屏 - exitFullWindow()

退出 enterFullWindow() 方法进入的全屏。

热点：Player#event:exitFullWindow

退出画中画模式 - exitPictureInPicture() → {Promise}

退出 Picture-in-Picture （画中画）模式

热点：Player#event:leavepictureinpicture

返回：

Promise - 一个 Promise

• See：Spec

fill 铺满模式控制 - fill(boolopt) → {boolean|undefined}

获取/设置/切换播放器的 vjs-fill className。

开启此项将关闭 fluid （自适应）模式。

译者：
vjs-fill样式：{width: 100%; height: 100%}

参数：

返回：

boolean | undefined - 获取时返回当前值 - 设置时返回 undefined

（内部使用）检查 flexbox 兼容性 - flexNotSupported_() → {boolean}

确定是否支持 flexbox。

译者：内部用于检查是否支持 flexbox，如果不支持则添加 vjs-no-flex className。

返回：

boolean - 如果支持 flexbox 返回 true，否则返回 false

fluid 自适应模式控制 - fluid(boolopt) → {boolean|undefined}

获取/设置/切换播放器的 vjs-fluid className。

开启此项将关闭 fill（铺满）模式。

参数：

返回：

boolean | undefined - 获取时返回当前值 - 设置时返回 undefined

获取焦点 - focus()

获取组件焦点

• Overrides：Component#focus

（内部使用）ESC 按键处理函数 - fullWindowOnEscKey(event)

ESC 的 keydown 事件处理函数，执行退出全屏。

译者：Video.js 在进去/退出全屏，以及销毁实例的时候，为 document 绑定的 ESC keydown 事件处理函数，用于执行退出全屏，和解除事件绑定。

参数：

获取组件元素属性的值 - getAttribute(attribute) → {string|null}

获取组件元素上指定属性的值

参数：

返回：

string | null - 要获取的属性的值 - 如果属性不存在或没有值，大多数浏览器会返回 null，某些浏览器会返回空字符串。

• Overrides：Component#getAttribute
• See：DOM API## 获取缓存对象 - getCache() → {Object}

获取缓存对象

返回：

Object - 当前缓存对象

通过 name 获取 子组件 - getChild(name) → {Component|undefined}

返回指定 name 的子组件

参数：

返回：

Component | undefined - 指定 name 的子组件或 undefined

• Overrides：Component#getChild

通过 id 获取子组件 - getChildById(id) → {Component|undefined}

返回指定 id 的子组件

参数：

返回：

Component | undefined - 指定 id 的子组件或 undefined

• Overrides：Component#getChildById

通过 name 链获取后代组件 - getDescendant(…names) → {Component|undefined}

通过 names 链获取后代组件。以 names = ['foo', 'bar', 'baz'] 为例，将尝试在当前组件上获取 ‘foo’ 组件，在 ‘foo’ 组件上获取 ‘bar’ 组件，在 ‘bar’ 组件上获取 ‘bar’ 组件，如果其中任何一个不存在，则返回 undefined。

参数：

返回：

Component | undefined - 根据 names 链获取的最终组件 或 undefined

• Overrides：Component#getDescendant

获取当前 MediaObject - getMedia() → {Player~MediaObject}

获取播放器当前的 MediaObject 的克隆。

如果未使用 loadMedia 方法，将返回一个基于播放器的当前状态的 MediaObject。

返回：

Player~MediaObject

获取 VideoPlaybackQuality - getVideoPlaybackQuality() → {Object|undefined}

获取 W3C 的 Media Playback Quality API 返回的可用的媒体播放质量指标。

返回：

Object | undefined - 包含支持的媒体播放质量指标的对象，如果没有 tech 或 tech 不支持，则返回 undefined。

• See：Spec

（内部使用）快捷键 keydown 事件处理函数 - handleHotkeys(event)

当播放器接收到快捷键 keydown 事件时触发。播放器支持的快捷键：f - 切换全屏；m - 切换静音；k or Space - 切换播放/暂停

译者：Video.js 为 keydown 添加事件处理函数 handleKeyDown()，在该函数内调用 handleHotkeys()

参数：

keydown 事件处理函数 - handleKeyDown(event)

当播放器具有焦点并且按下按键或播放器的任意组件接收到它无法处理的按键时被调用。允许播放器定义的快捷键（定义如下，或者可定义为一个外部方法）

参数：

• Overrides：Component#handleKeyDown

（弃用）keypress 事件处理函数 - handleKeyPress(event)

很多组件过去都有一个 handleKeyPress 方法，该方法的命名很差，因为它侦听的是 keydown 事件。这个方法名称现在委托给了 handleKeyDown。这意味着调用 handleKeyPress 还能保证正常工作。

参数：

• Overrides：Component#handleKeyPress

语言更改事件处理函数 - abstract handleLanguagechange()

处理组件中的播放器语言更改事件。可被子组件覆盖。

• Overrides：Component#handleLanguagechange

（内部使用）获取/设置视频源 - handleSrc_(sourceopt, isRetry) → {string|undefined}

执行 source 的设置和获取逻辑。

译者：Video.js 对外向用户提供的 player.src(source) 方法实现相同的功能，内部只是简单的调用 player.handleSrc\_(source, false)

参数：

返回：

string | undefined - 如果未提供 source 参数，则返回当前 source URL。否则返回 nothing/undefined。

校验 className 是否存在 - hasClass(classToCheck) → {boolean}

检查组件元素是否包含指定的 className

参数：

返回：

boolean - 如果组件具有此 className 返回 true，否则返回 false。

• Overrides：Component#hasClass

校验插件是否存在 - hasPlugin(name) → {boolean}

报告播放器是否具有指定的可用插件。

这不会报告插件是否在此播放器上初始化过。关于这个请看 usingPlugin。

参数：

返回：

boolean - 此播放器是否具有指定的可用插件。

started 控制 - hasStarted(request) → {boolean}

添加/删除 vjs-has-started className，如果添加，则触发 firstplay 事件。

参数：

热点：Player#event:firstplay

返回：

boolean - hasStarted_ 的布尔值

获取/设置播放器高度 - height(valueopt) → {number}

播放器高度的 getter/setter。返回播放器配置的值。要获取当前高度，建议使用 currentheight()。

译者：该方法内部实际调用的 dimension('height', value)

参数：

返回：

number - 获取时返回播放器的当前高度。

• Overrides：Component#height

隐藏 - hide()

通过添加 vjs-hidden className 隐藏当前显示的组件元素。

• Overrides：Component#hide

获取组件 id - id() → {string}

获取组件的 ID

返回：

string - 组件 id

• Overrides：Component#id

初始化子组件 - initChildren()

添加和初始化选项中的全部子组件。

• Overrides：Component#initChildren

获取或设置音频标记 - isAudio(bool) → {boolean}

获取或设置音频标记，音频标记表示当前是否是一个音频播放器

参数：

返回：

boolean - 获取是返回当前 isAudio 的值

是否已销毁 - isDisposed() → {boolean}

确定是否组件是否已销毁。

返回：

boolean - 如果组件已销毁则返回 true，否则返回 false。

• Overrides：Component#isDisposed

获取/设置当前全屏状态 - isFullscreen(isFSopt) → {boolean}

检查播放器是否处于全屏模式，或者告诉播放器是否处于全屏模式。

注意：截至最新的 HTML5 规范，isFullscreen 不再是官方属性，而是使用 document.fullscreenElement。但是 isFullscreen 对于内部播放器的工作来说仍然是一个有价值的属性。

译者：请注意，该方法只用于获取/设置 Video.js 管理的全屏状态（isFullscreen_）的值，并不直接影响播放器的全屏交互操作。

参数：

返回：

boolean - 如果当前全屏是打开的返回 true，如果全屏是关闭的返回 false

获取/设置当前画中画状态 - isInPictureInPicture(isPiPopt) → {boolean}

检查播放器是否处于画中画模式，或者告诉播放器是否处于画中画模式。

译者：请注意，该方法只用于获取/设置 Video.js 管理的画中画状态（isInPictureInPicture_）的值，并不直接影响播放器的画中画交互操作。

参数：

返回：

boolean - 如果当前画中画是打开的返回 true，如果画中画是关闭的返回 false

获取/设置语言代码 - language(codeopt) → {string}

播放器的语言代码：

更改语言将触发用于更新控制文本的组件的 languagechange 事件。默认情况下，ClickableComponent 将在 languagechange 触发时更新其控件文本。

译者：ClickableComponent 是可点击或键盘操作的的非原生 HTML 按钮组件。

参数：

热点：Player#event:languagechange

返回：

string - 获取时返回当前的语言代码

获取所有支持的语言 - languages() → {Array}

每次都获取播放器合并后的语言字典，因为新添加的插件可以随时调用 videojs.addLanguage() 直接在播放器的选项中添加具有优先权的语言。

返回：

Array - 受支持的语言数组

加载 - load()

开始加载 src 数据。

加载 Media - loadMedia(media, ready)

使用 MediaObject 填充播放器。

参数：

本地化 - localize(string, tokensopt, defaultValueopt) → {string}

将指定的字符串本地化为英语。

如果提供了 tokens，将尝试在提供的字符串上运行一个简单的 token replacement （使用 replace 方法的 replacement 参数替换本地化字符串的子字符串）。tokens 寻找的标记看起来像 {1}，索引是1 对应 tokens 数组中的相同索引。

如果提供了 defaultValue，如果在提供的语言文件中找不到对应的值，将使用这个字符串。如果您希望用一个带有描述性的 key 的 token replacement，本地化一个简洁的字符串，并不需要使用 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 - 返回本地化的字符串，如果不存在本地化则返回英文字符串。

• Overrides：Component#localize

获取/设置循环播放 - loop(valueopt) → {boolean}

获取或设置 video 元素的 loop（循环播放）属性

参数：

返回：

boolean - 获取时返回当前视频的 loop 值

（内部使用）处理 autoplay 值 - manualAutoplay_()

用于处理 autoplay 字符串值，而不是 tech 处理的典型布尔值。请注意，这不是任何规范的一部分。可以在本文档的 Player#autoplay() 的 autoplay getter 部分查看有效的值及其作用。

获取/开启/关闭静音 - muted(mutedopt) → {boolean}

获取当前静音状态，或开启/关闭静音。

参数：

返回：

boolean - 获取时如果开启了静音则返回 true，如果关闭了则返回 false。

获取组件 name - name() → {string}

获取组件的 name。name 用于引用组件，并在注册期间进行对其设置。

返回：

string - 组件的 name

• Overrides：Component#name

获取 networkState - networkState() → {number}

从下面列表中的代码返回媒体元素的 networkState（当前网络状态）。

返回：

number - 当前网络活动状态

• See：https://html.spec.whatwg.org/multipage/embedded-content.html#network-states

添加新的选项内容 - options(obj) → {Object}

将传入的对象与选项对象深度合并。

注意：当 obj 和 options 都包含值为对象的属性时。将使用 module:mergeOptions 合并这两个属性。

参数：

返回：

Object - 一个 this.options_ 和 obj 合并在一起后的新对象

• Overrides：Component#options

暂停 - pause() → {Player}

暂停视频播放

返回：

Player - 调用此函数的播放器对象的引用

检查暂停或未播放 - paused() → {boolean}

检查播放器是否已暂停或未播放

返回：

boolean - 如果当前正在播放，返回 false，如果当前未在播放，返回 true。

播放 - play() → {Promise|undefined}

执行首次视频播放。

返回：

Promise | undefined - 如果浏览器支持 Promise（或作为一个选项被传入），则返回一个 Promise，否则返回 undefined。这个 Promise 将在 play 返回的结果中决议。如果返回 undefined，则完成（fulfill）整个 Promise 链，否则就由 play 返回的 Promise 完成时，完成整个 Promise 链。

获取/设置播放速度 - playbackRate(rateopt) → {number}

获取或设置当前播放速度。例如，1 表示正常速度，0.5 表示半速播放。

参数：

返回：

number - 获取时返回当前播放速度或 1

• See：https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate

获取/设置播放速度选项列表 - playbackRates(newRates) → {Array.}

设置或获取当前播放速度选项列表。使用一个新的播放速度选项数组更新“播放速度”菜单。如果传递一个空数组则隐藏菜单。忽略数组以外的值。

参数：

热点：Player#event:playbackrateschange

返回：

Array. - 获取时，返回当前播放速度选项列表

获取已播放的时间范围对象 - played() → {TimeRange}

获取表示用户已播放的当前时间范围的 TimeRage 对象。

返回：

TimeRange - 表示已播放的时间范围对象

获取当前组件所属的播放器 - player() → {Player}

返回组件所在的 Player

返回：

Player - 返回组件所在的播放器

• Overrides：Component#player

获取/设置 playsinlin 属性 - playsinline(valueopt) → {string|Player}

获取或设置 video 元素的 playsinline 属性。playsinline 告诉浏览器首选非全屏播放。

译者：有些浏览器播放视频会默认使用全屏播放，playsinline 属性用于限制视频在元素所在区域播放。最常见的例如应用在微信浏览器下的页面。注意，playsinline 在不同浏览器上的兼容性不同。

参数：

返回：

string | Player - 获取时返回当前 playsinline 的值 - 设置时返回当前播放器。

• See：Spec

获取/设置 poster URL 地址 - poster(srcopt) → {string}

获取或设置海报图像的 url。

参数：

热点：Player#event:posterchange

返回：

string - 获取时返回当前海报的值

获取/设置 preload 属性 - preload(valueopt) → {string}

获取或设置 preload 属性

参数：

返回：

string - 获取时返回 preload 属性的值

添加准备就绪立即执行任务 - ready(fn, sync=false) → {undefined}

绑定一个侦听器（函数）到组件的 ready 状态。与事件侦听器不同的是，如果 ready 事件已经发生，它将立即触发函数执行。

译者：Video.js 维护一个 任务队列（readyQueue）。当使用 ready(fn, sync) 添加任务（处理函数）时，会先判断播放器的 ready 状态（isReady_）。如果为 false，就将任务添加到 readyQueue，当播放器准备就绪时再处理执行这个队列中的内容。如果为 true，则会立即执行这个任务。可以根据第二个 Boolean 参数 sync，决定同步执行或异步执行（setTimeout(fn, 1)）。

文档错误：
原文档内容是 ready() → {Component}，该方法可被链式调用。
但从代码中看，应该是 ready(fn, sync=false) → {undefined}，并不能链式调用。
本翻译已更改为正确内容。

返回：

undefined

• Overrides：Component#ready

获取 readyState - readyState() → {number}

从下面列表中的代码返回媒体元素的 readyState（准备就绪状态），它表示元素当前播放位置的当前状态。

返回：

number - 当前播放渲染状态

• See：https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate

获取视频剩余时间 - remainingTime() → {number}

计算视频剩余事件。这不是原生的 video API。

返回：

number - 以秒为单位的剩余时间

获取显示给用户的剩余时间 - remainingTimeDisplay() → {number}

获取用于向用户直接显示的剩余时间。

译者：相比 remainingTime() 只是进行了四舍五入计算。

返回：

number - 四舍五入后的剩余时间（秒）

获取远程文本轨道的元素列表 - remoteTextTrackEls() → {HtmlTrackElementList}

获取远程文本轨道的元素列表

返回：

HtmlTrackElementList - 当前远程文本轨道的元素列表

获取远程文本轨道列表 - remoteTextTracks() → {TextTrackList}

获取远程文本轨道列表

返回：

TextTrackList - 当前远程文本轨道列表

删除组件元素属性 - removeAttribute(attribute)

删除一个组件元素的的属性

参数：

• Overrides：Component#removeAttribute
• See：DOM API

删除子组件 - removeChild(component)

从组件的 children 列表中删除一个子组件。并且从组件的 DOM 元素下删除这个子组件的 DOM 元素。

参数：

• Overrides：Component#removeChild

删除 className - removeClass(classToRemove)

删除一个组件元素的 className

参数：

• Overrides：Component#removeClass

删除远程文本轨道 - removeRemoteTextTrack(track) → {undefined}

从响应的 TextTrackList 和 HtmlTrackElementList 删除一个远程 TextTrack。

参数：

返回：

undefined - 不返回任何东西

（内部使用）报告用户处于活动状态 - reportUserActivity(event)

报告用户处于活动状态。

参数：

译者：该方法仅用于更改 Video.js 内部管理的用户活动状态 userActivity_为 true。内部在判断用户活动时调用该方法。

PS：event 参数并未使用。源码：reportUserActivity(event) { this.userActivity_ = true; }

封装的 requestAnimationFrame - requestAnimationFrame(fn) → {number}

向 requestAnimationFrame (rAF) 队列传入一个回调，并带有一些额外好处：

• 对于不支持 rAF 的浏览器，调用封装的 Component#setTimeout。
• 回调函数将转换为 Component~GenericCallback (即 this 绑定到组件的上下文)。
• 如果组件在 rAF 回调函数调用前被销毁，将自动取消这个回调函数。

参数：

侦听的事件：

• Component#event:dispose

返回：

number - 返回用于标记 timeout 的 rAF ID。它可以用于在 Component#cancelAnimationFrame 取消动画帧回调。

• Overrides：Component#requestAnimationFrame
• See：Similar to

全屏显示 - requestFullscreen(fullscreenOptionsopt)

在某些浏览器中，将视频尺寸扩展到全屏。如果不支持原生全屏方法，将进入 “full window mode（全窗口模式）”，视频将拉伸以充满浏览器窗口。在支持原生全屏方法的浏览器和设备中，有时会显示浏览器的默认控件，而不是 Video.js 自定义的皮肤。这包括大多数移动设备（iOS，Android）和较早版本的 Safari。

参数：

热点：Player#event:fullscreenchange

添加命名的动画帧 - requestNamedAnimationFrame(name, fn)

调用内部封装的 requestAnimationFrame(fn) 添加一个命名的动画帧。相同名称的动画帧在队列中只能存在一个，在前一个完成之前，永远不会添加另一个。

参数：

• Overrides：Component#requestNamedAnimationFrame

开启画中画模式 - requestPictureInPicture() → {Promise}

创建一个始终位于其它窗口之上的浮动视频窗口，以便用户在与设备上的其它内容或应用程序交互时可以继续使用媒体。

热点：Player#event:enterpictureinpicture

返回：

Promise - 一个画中画窗口的 promise

• See：Spec

重置播放器 - reset()

重置播放器。加载 techOrder 中的第一个 tech，删除现有 tech 中的所有文本轨道，并调用 tech 上的 reset。

重置控制栏 UI - resetControlBarUI_()

通过调用所有组件上的重置控制栏组件的方法，重置控制栏 UI。

重置播放速度 - resetPlaybackRate_()

重置播放速度。

重置进度条 - resetProgressBar_()

重置 tech 的进度，以重置进度条 UI。

重置音量条 - resetVolumeBar_()

重置音量条。

获取/设置 responsive - responsive(value) → {boolean}

获取或设置 responsive 选项。更多参阅 breakpoints 选项。

参数：

返回：

boolean - 如果播放器根据尺寸调整 UI 则返回 true，否则返回 false

（内部使用）执行播放回调队列 - runPlayCallbacks_(val)

当配置了 play 的回调函数时，我们必须在 tech 实际调用 play 时运行这些回调函数。该方法用于调用这些回调函数，并传入 tech 返回的值。

参数：

（内部使用）执行终止播放回调队列 - runPlayTerminatedQueue_()

如果播放终止，则执行此队列。如果运行了 runPlayCallbacks_ ，则不会执行此队列。这使我们能够区分终止播放和实际播放的调用。

译者：Video.js 内部根据 tech 调用 play 的返回值判断应该调用 runPlayCallbacks_ 还是 runPlayTerminatedQueue_，它们分别执行各自管理的回调队列。

（内部使用）获取/设置 scrubbing - scrubbing(isScrubbingopt) → {boolean}

获取或设置用户是否正在 “scrubbing”。Scrubbing 指用户单击进度条控制柄并沿进度条拖动它。

参数：

返回：

boolean - 获取时返回 scrubbing 状态的值。

获取可用的进度条时间范围- seekable() → {TimeRanges}

返回媒体当前可用于进度条定位的时间范围。

返回：

TimeRanges - 媒体时间线的可定位范围

获取当前是否正在定位 - seeking() → {Boolean}

返回播放器是否处于 “seeking”（定位）状态。

译者：当点击进度条时，播放器进入 seeking 状态，该状态下播放器要加载当前位置的数据，加载完成后退出 seeking 状态。

返回：

Boolean - 如果播放器处于 seeking 状态，返回 true，否则返回 false

选取匹配的资源 - selectSource(sources) → {Object|boolean}

基于 techOrder 从给定的 source 列表中选择 source，如果设置了 options.sourceOrder 则基于 sourceOrder 选择 source。否则默认使用 techOrder。

参数：

返回：

Object | boolean - 包含第一个匹配的 source 对象和 tech 名称的对象，或者返回 false

设置属性值 - setAttribute(attribute, value)

设置组件元素属性的值

参数：

• Overrides：Component#setAttribute
• See：DOM API

封装的 setInterval - setInterval(fn, interval) → {number}

创建每 x 毫秒运行一次的函数（一个 interval）。此函数是 window.setInterval 的封装。用这个代替原生 DOM API 的几个理由：

1. 当 Component#dispose （组件销毁）时，它会通过 Component#clearInterval 被清除。
2. 该回调函数将绑定（this 指向）到组件（Component~GenericCallback）

参数：

侦听的事件：

• Component#event:dispose

返回：

number - 返回可用于标识 interval 的 id。它可以传递给 Component#clearInterval 来清理 interval。

• Overrides：Component#setInterval
• See：Similar to

封装的 setTimeout - setTimeout(fn, timeout) → {number}

创建一个在 x 毫秒后运行的函数（一个 timeout）。此函数是 window.setTimeout 的封装。用这个代替原生 DOM API 的几个理由：

1. 当 Component#dispose （组件销毁）时，它会通过 Component#clearTimeout 被清除。
2. 该回调函数将绑定（this 指向）到组件（Component~GenericCallback）

注意：不能用此函数返回的 id 调用 window.clearTimeout。这将导致它的 dispose 侦听器无法进行清理。请改用 Component#clearTimeout 或 Component#dispose 代替。

译者：上述注意同样适应于上面的 setInterval。

参数：

侦听的事件：

• Component#event:dispose

返回：

number - 返回可用于标识 timeout 的 id。它可以传递给 Component#clearTimeout 来清理 timeout。

• Overrides：Component#setTimeout
• See：Similar to

显示 - show()

通过删除 vjs-hidden className 来显示组件元素（如果它是隐藏的）

• Overrides：Component#show

获取/设置视频源 - src(sourceopt) → {string|undefined}

获取或设置视频源。

译者：内部只是调用了 this.handleSrc_(source, false)

参数：

返回：

string | undefined - 如果未提供 source 参数，则返回当前 source URL。否则返回 nothing/undefined。

是否支持原生全屏 - supportsFullScreen() → {boolean}

检查当前 tech 是否支持原生全屏（例如，使用内置控件的 iOS）。

返回：

boolean - 是否支持原生全屏

获取当前 tech - tech(safetyopt) → {Tech}

返回当前 Tech 的引用。默认情况下，它将打印一条关于直接使用 tech 的危险警告，但传入任意参数都可以屏蔽该警告。

参数：

返回：

Tech - tech 引用

获取文本轨道列表 - textTracks() → {TextTrackList}

获取当前 TextTrackList

返回：

TextTrackList - 当前文本轨道列表

添加/删除 className - toggleClass(classToToggle, predicateopt)

添加或删除组件元素上的 className

• 当 Component#hasClass 返回 false 时添加 classToToggle
• 当 Component#hasClass 返回 true 时删除 classToToggle

参数：

• Overrides：Component#toggleClass

获取当前轨道信息 - toJSON() → {Object}

返回表示当前轨道信息的 JavaScript 对象。不会返回 JSON。

returns a JavaScript object reperesenting the current track information. DOES not return it as JSON

返回：

Object - 表示当前轨道信息的对象。

触发 ready 事件 - triggerReady()

触发此组件的所有 ready 侦听器。

热点：

• Component#event:ready
• Overrides：Component#triggerReady

（内部使用）缓存传入的 source - updateSourceCaches_(srcObj)

更新内部 source 缓存，以便我们从 src()、currentSource() 和 currentSources 中返回正确的 source。

注意： 如果传入的 source 存在于当前 currentSources 缓存中，则不会更新 currentSources。

参数：

获取/设置用户活动状态 - userActive(boolopt) → {boolean}

获取/设置用户是否处于活动状态

参数：

热点：

• Player#event:useractive
• Player#event:userinactive

返回：

boolean - 获取时返回当前的用户活动状态

打开/关闭原生控件 - usingNativeControls(boolopt) → {boolean}

打开/关闭原生控件。原生控件是内置在设备中的控件（例如，默认的 iPhone 控件）或其它 techs（例如 Vimeo 控件）。这只能由当前 tech 设置，因为只有 tech 知道是否可以支持原生控件。

参数：

热点：

• Player#event:usingnativecontrols
• Player#event:usingcustomcontrols

返回：

boolean - 获取时返回原生控件的当前值

判断是否在使用指定插件 - usingPlugin(name) → {boolean}

返回播放器是否在使用指定名称的插件。

对于基础插件，它只会返回插件是否已经在播放器上完成初始化。

参数：

返回：

boolean - 播放器是否正在使用指定的插件

获取视频高度 - videoHeight() → {number}

获取视频高度。

译者：注意该方法获取视频的真实高度，而不是播放器的高度。获取时应确保视频已加载。

返回：

number - 当前视频的高度

获取视频轨道列表 - videoTracks() → {VideoTrackList}

获取视频轨道列表（VideoTrackList）

返回：

VideoTrackList - 当前视频轨道列表

获取视频宽度 - videoWidth() → {number}

获取视频宽度。

返回：

number - 当前视频的宽度

获取/设置音量百分比 - volume(percentAsDecimalopt) → {number}

获取或设置媒体的当前音量

参数：

返回：

number - 获取时返回当前音量的百分比

获取/设置播放器宽度 - width(valueopt) → {number}

当前播放器宽度的 getter/setter。返回播放器的配置值。要获取当前宽度请使用 currentWidth()。

参数：

返回：

number - 获取时返回播放器的当前宽度

• Overrides：Component#width

Type Definitions 类型定义

媒体对象 - MediaObject

描述单个媒体的对象。

不属于此类型描述的属性将被保留；因此，这也可以看作是一种通用的元数据存储机制。

属性：

• See：https://wicg.github.io/mediasession/#the-mediametadata-interface

Events 事件

插件安装前（指定插件名） - beforepluginsetup:$name

表示插件即将被安装到播放器上。name 是插件的名称。

译者：Video.js 内部为插件触发 setup 相关事件定义了统一的方法 triggerSetupEvent，其中根据判断拼接事件名称，例如是否在 pluginsetup 前拼接 before，以及触发后面拼接了 :<name> 的事件。

const triggerSetupEvent = (player, hash, before) => {
  const eventName = (before ? 'before' : '') + 'pluginsetup';
  player.trigger(eventName, hash);
  player.trigger(eventName + ':' + hash.name, hash);
};

类型：

• Plugin~PluginEventHash

中止 - abort

当音频/视频中止加载时触发。

类型：

• EventTarget~Event

插件安装前 - beforepluginsetup

表示插件即将被安装到播放器上。请参考上面的 beforepluginsetup:$name

类型：

• Plugin~PluginEventHash

可播放 - canplay

媒体的 readyState 为 HAVE_FUTURE_DATA 或更高。

译者：HAVE_FUTURE_DATA 代表已加载至少可播放下一帧的数据。关于 readyState 请参考上面的 Classes - readyState()。

类型：

• EventTarget~Event

可完成播放 - canplaythrough

媒体的 readyState 为 HAVE_ENOUGH_DATA 或更高。这意味着当前已经可以在不需要缓存更多数据的情况下播放整个媒体文件。

译者：HAVE_ENOUGH_DATA 代表已加载预估的足够多的数据，如果网速有保障，可维持持续播放到底。关于 readyState 请参考上面的 Classes - readyState()。

类型：

• EventTarget~Event

组件尺寸变更 - componentresize

组件尺寸变更时触发

类型：

• EventTarget~Event
• Overrides：Component#event:componentresize

禁用控件 - controlsdisabled

类型：

• EventTarget~Event

启用控件 - controlsenabled

类型：

• EventTarget~Event

销毁 - dispose

当播放器已销毁时触发。

类型：

• EventTarget~Event

侦听的事件：

• Plugin
• Overrides：Component#event:dispose

视频时长变更 - durationchange

类型：

• EventTarget~Event

侦听的事件：

• DurationDisplay#updateContent
• LiveDisplay#updateShowing
• RemainingTimeDisplay#updateContent

播放列表为空 - emptied

当播放列表为空时触发。

类型：

• EventTarget~Event

播放结束 - ended

当播放结束时触发（currentTime === duration）

类型：

• EventTarget~Event

侦听的事件：

• PlayToggle#handleEnded

进入窗口全屏模式 - enterFullWindow

译者：调用 enterFullWindow() 进入全屏时触发，参考上面的 Classes - nterFullWindow()。

类型：

• EventTarget~Event

进入画中画模式 - enterpictureinpicture

当播放器进入画中画模式时触发。

类型：

• EventTarget~Event

侦听的事件：

• PictureInPictureToggle
• PictureInPictureToggle#handlePictureInPictureChange

错误 - error

译者： error 可以捕获 beforeerror 钩子函数返回的错误对象，beforeerror 可以捕获在视频播放成功前的任意错误，一旦视频播放成功，之后的错误就无法捕获了。

示例：

player.on('error', event => {
  // 可以通过 event 获取 player 实例
  const currentPlayer = event.target.player
  // console.log(currentPlayer === player) // true
  // 可以通过 error() 方法获取当前抛出的错误信息(可通过beforeerror钩子自定义返回的错误对象)
  console.log(player.error())
})

例如丢失源发出的告警 VIDEOJS: WARN: Problem encountered with playlist 0-https://xxx.m3u8. Trying again since it is the only playlist.，Video.js 会一直重试之前的地址。

可以通过监听 tech 的 retryplaylist 事件捕获： player.tech().on(‘retryplaylist’, callback) 。当 Video.js 进行重试时会主动触发这个事件。

可惜的是官方并没有介绍相关解决方案。

类型：

• EventTarget~Event

退出窗口全屏模式 - exitFullWindow

译者：调用 exitFullWindow() 退出全屏模式时触发，参考上面的 Classes - exitFullWindow()

类型：

• EventTarget~Event

（弃用）首次播放 - firstplay

第一次播放视频时触发。不是 HLS 规范的一部分，而且这可能不是最好的实现，所以请谨慎使用。如果您没有理由阻止播放，请使用 myPlayer.one('play'); 代替。

类型：

• EventTarget~Event

不推荐：

• 从 6.0 开始，不推荐使用 firstPlay 事件

全屏模式变更 - fullscreenchange

类型：

• EventTarget~Event

侦听的事件：

• FullscreenToggle#handleFullscreenChange
• TextTrackDisplay#updateDisplay

语言变更 - languagechange

当播放器语言更改时触发

类型：

• EventTarget~Event

退出画中画模式 - leavepictureinpicture

当播放器退出画中画模式时触发此事件

类型：

• EventTarget~Event

侦听的事件：

• PictureInPictureToggle
• PictureInPictureToggle#handlePictureInPictureChange

当前数据加载完成 - loadeddata

当浏览器加载完音频/视频的当前帧时触发。或者说当播放器加载完当前播放位置的数据时触发。

类型：

• EventTarget~Event

元数据加载完成 - loadedmetadata

当浏览器已加载音频/视频的元数据时触发。或者说当播放器具有初始的播放时长和尺寸信息时触发。

类型：

• EventTarget~Event

侦听的事件：

• DurationDisplay#updateContent

开始加载 - loadstart

当浏览器开始查找媒体数据时触发。

类型：

• EventTarget~Event

侦听的事件：

• MuteToggle#update
• PlaybackRateMenuButton#updateVisibility
• TextTrackDisplay#preselectTrack
• TextTrackDisplay#toggleDisplay

暂停 - pause

当媒体暂停时触发。

类型：

• EventTarget~Event

侦听的事件：

• PlayToggle#handlePause

播放 - play

每当一个 Tech#play 事件发生时触发。表示播放器已开始或恢复播放。

类型：

• EventTarget~Event

侦听的事件：

• PlayToggle#handlePlay

播放速度列表变更 - playbackrateschange

当播放器的播放速度列表变更时触发。

类型：

• EventTarget~Event

侦听的事件：

• PlaybackRateMenuButton#handlePlaybackRateschange

播放器尺寸变更 - playerresize

当播放器尺寸变更时触发

类型：

• EventTarget~Event

已开始播放 - playing

当媒体不再阻止播放，并已经开始播放时触发。

类型：

• EventTarget~Event

插件已安装 - pluginsetup

表示刚刚在播放器上安装了插件。

类型：

• Plugin~PluginEventHash

海报变更 - posterchange

当播放器上的海报图像变更时触发此事件。

类型：

• EventTarget~Event

侦听的事件：

• PosterImage#update

加载数据 - progress

当浏览器下载媒体数据时触发。

译者：

与 loadstart、loadeddata、loadedmetadata 加载事件不同，这三个事件的触发时机主要基于媒体初始数据的加载导致的 readyState 状态变化。而 progress 在加载数据时就会触发，

正常情况下的触发顺序一般是：

1. Video 元素渲染后开始加载视频数据触发 loadstart 事件
2. 加载数据时触发了若干个 progress 事件
3. 元数据加载完成后触发 loadedmetadata 事件
4. 当前帧的数据加载完成后触发 loadeddata 事件
5. 如果视频开始播放就会持续加载当前位置后面的内容，于是持续触发 progress 事件

类型：

• EventTarget~Event

侦听的事件：

• LoadProgressBar#update

播放速度变更 - ratechange

当音频/视频的播放速度变更时触发

类型：

• event

侦听的事件：

• PlaybackRateMenuButton#updateLabel
• PlaybackRateMenuItem#update

准备就绪 - ready

当组件准备就绪时触发。

类型：

• EventTarget~Event
• Overrides：Component#event:ready

视频尺寸变更 - resize

当视频的固有尺寸变更时触发

类型：

• event

定位完成 - seeked

当播放器完成跳转到新的播放位置时触发

类型：

• EventTarget~Event

侦听的事件：

• PlayToggle#handleSeeked

定位 - seeking

每当播放器正在跳转到一个新的播放位置时触发。

译者：导航定位的事件触发顺序：seeking -> seeked

类型：

• EventTarget~Event

source 变更 - sourceset

试验阶段

当在 Tech 上设置或更改 source 导致媒体元素重新加载时触发。

初始 source 和每个后续的 source 都可以触发。此事件是 Video.js 中的自定义事件，由 Tech 触发。

该事件的 event 对象包含一个 src 属性，该属性将包含事件触发时当前可用的 souce。通常，只有在 source 更改导致 Video.js 切换 Tech 时才需要它。

在播放器（或媒体元素）上调用 load 时，它也会触发，因为 load 的规范 声明需要中止并重启资源选择算法。在这种情况下，src 属性很可能被设置为空字符串 ""，以表示我们不知道正在更改的 source 是什么。

该事件目前仍处于试验阶段，可能会在小版本中更新。要使用此事件，请将 _enableSourceset_ 选项传递给播放器。

类型：

• EventTarget~Event

属性：

媒体数据不可用 - stalled

当浏览器试图获取媒体数据但数据不可用或无法提供时触发。

类型：

• EventTarget~Event

中止加载媒体数据 - suspend

当浏览器故意不获取媒体数据时触发

类型：

• EventTarget~Event

点击 - tap

点击组件时触发

类型：

• EventTarget~Event
• Overrides：Component#event:tap

tech textdata 事件处理函数 - textdata

当我们从 tech 捕获到 textdata 事件时触发。

类型：

• EventTarget~Event

文本轨道变更 - texttrackchange

当文本轨道变更时触发

类型：

• event

侦听的事件：

• TextTrackDisplay#updateDisplay

播放位置变更 - timeupdate

当前播放位置变更时触发。在播放过程中，根据使用的 tech，每 15-250 毫秒触发一次。

译者：导航定位触发的事件顺序：seeking(1次) -> timeupdate(n) -> seeked

类型：

• EventTarget~Event

侦听的事件：

• CurrentTimeDisplay#updateContent
• DurationDisplay#updateContent
• RemainingTimeDisplay#updateContent
• SeekBar#update
• TimeDisplay#updateContent

用户进入活动状态 - useractive

类型：

• EventTarget~Event

用户进入非活动状态 - userinactive

类型：

• EventTarget~Event

使用自定义控件 - usingcustomcontrols

播放器正在使用自定义的 HTML 控件时触发。

译者：在切换为使用自定义控件时触发，初始化时如果使用的自定义控件也会触发。

类型：

• EventTarget~Event

使用原生控件 - usingnativecontrols

播放器正在使用原生控件。

译者：在切换为使用原生控件时触发，初始化时如果使用的原生控件也会触发。

类型：

• EventTarget~Event

音量变更 - volumechange

当音量变更时触发

类型：

• EventTarget~Event

侦听的事件：

• MuteToggle#update
• VolumeBar#updateARIAAttributes

readyState 导致的停止播放 - waiting

DOM 元素上的 readyState 变更导致播放停止时触发

类型：

• EventTarget~Event

插件已安装（指定插件名） - pluginsetup:$name

表示插件已被安装到播放器上。name 是插件的名称。

类型：

• Plugin~PluginEventHash