components

Components

Video.js播放器的架构围绕组件。 Player类和所有表示播放器控件和其他UI元素的类都继承自Component类。 这种架构使得可以轻松地以反映DOM的树状结构构建Video.js播放器的用户界面。

组件是什么?

组件是具有以下功能的JavaScript对象:

有关组件编程接口的更多详细信息，请参阅组件API文档。

Video.js组件可以继承并注册到Video.js以向播放器添加新功能和UI。

对于一个工作示例，我们有一个JSBin演示创建一个组件，用于在播放器顶部显示标题。

此外，有几种方法值得认可：

// adding a button to the player
var player = videojs('some-video-id');
var Component = videojs.getComponent('Component');
var button = new Component(player);
console.log(button.el());

上面的代码将输出

<div class="video-js">
  <div class="vjs-button">Button</div>
</div>

将新按钮添加到播放器

// adding a button to the player
var player = videojs('some-video-id');
var button = player.addChild('button');
console.log(button.el());
// 将具有与上一个示例相同的HTML结果

Component Children

再次，请参阅组件API文档，以获得用于管理组件结构的方法的完整细节。

当子组件添加到父组件时，Video.js将子元素插入到父元素的元素中。 例如，添加如下组件：

// Add a "BigPlayButton" component to the player. Its element will be appended to the player's element.
player.addChild('BigPlayButton');

结果在DOM中看起来像这样：

<!-- Player Element -->
<div class="video-js">
  <!-- BigPlayButton Element -->
  <div class="vjs-big-play-button"></div>
</div>

相反，删除子组件将从DOM中删除子组件的元素：

player.removeChild('BigPlayButton');

结果在DOM中看起来像这样：

<!-- Player Element -->
<div class="video-js">
</div>

Using Options

为子构造函数传递选项和为此子组件的子组件传递选项。

var player = videojs('some-vid-id');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);
var myButton = myComponent.addChild('MyButton', {
  text: 'Press Me',
  buttonChildExample: {
    buttonChildOption: true
初始化组件时，也可以通过选项添加子项。
注意：包含一个“名称”键，如果两个相同类型的子组件需要不同的选项，则将使用它。
// MyComponent来自上面的例子
var myComp = new MyComponent(player, {
  children: ['button', {
    name: 'button',
    someOtherOption: true
    name: 'button',
    someOtherOption: false
Event Listening
Using on
var player = videojs('some-player-id');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);
var myFunc = function() {
  var myComponent = this;
  console.log('myFunc called');
myComponent.on('eventType', myFunc);
myComponent.trigger('eventType');
// logs 'myFunc called'
myFunc的上下文将是myComponent，除非它被绑定。 您可以将侦听器添加到另一个元素或组件。
var otherComponent = new Component(player);
// myComponent/myFunc is from the above example
myComponent.on(otherComponent.el(), 'eventName', myFunc);
myComponent.on(otherComponent, 'eventName', myFunc);
otherComponent.trigger('eventName');
// logs 'myFunc called' twice
Using off
var player = videojs('some-player-id');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);
var myFunc = function() {
  var myComponent = this;
  console.log('myFunc called');
myComponent.on('eventType', myFunc);
myComponent.trigger('eventType');
// logs 'myFunc called'
myComponent.off('eventType', myFunc);
myComponent.trigger('eventType');
// does nothing
如果myFunc被排除，则事件类型的所有侦听器都将被删除。 如果eventType被排除，则所有侦听器都将从组件中删除。 您可以使用以删除添加到其他元素或组件的侦听器：
myComponent.on(otherComponent...
在这种情况下，事件类型和侦听器函数都是必需的
var otherComponent = new Component(player);
// myComponent/myFunc is from the above example
myComponent.on(otherComponent.el(), 'eventName', myFunc);
myComponent.on(otherComponent, 'eventName', myFunc);
otherComponent.trigger('eventName');
// logs 'myFunc called' twice
myComponent.off(ootherComponent.el(), 'eventName', myFunc);
myComponent.off(otherComponent, 'eventName', myFunc);
otherComponent.trigger('eventName');
// does nothing
Using one
var player = videojs('some-player-id');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);
var myFunc = function() {
  var myComponent = this;
  console.log('myFunc called');
myComponent.one('eventName', myFunc);
myComponent.trigger('eventName');
// logs 'myFunc called'
myComponent.trigger('eventName');
// does nothing
您还可以将监听器添加到仅被触发一次的另一个元素或组件。
var otherComponent = new Component(player);
// myComponent/myFunc is from the above example
myComponent.one(otherComponent.el(), 'eventName', myFunc);
myComponent.one(otherComponent, 'eventName', myFunc);
otherComponent.trigger('eventName');
// logs 'myFunc called' twice
otherComponent.trigger('eventName');
// does nothing
Using trigger
var player = videojs('some-player-id');
var Component = videojs.getComponent('Component');
var myComponent = new Component(player);
var myFunc = function(data) {
  var myComponent = this;
  console.log('myFunc called');
  console.log(data);
myComponent.one('eventName', myFunc);
myComponent.trigger('eventName');
// logs 'myFunc called' and 'undefined'
myComponent.trigger({'type':'eventName'});
// logs 'myFunc called' and 'undefined'
myComponent.trigger('eventName', {data: 'some data'});
// logs 'myFunc called' and "{data: 'some data'}"
myComponent.trigger({'type':'eventName'}, {data: 'some data'});
// logs 'myFunc called' and "{data: 'some data'}"
默认组件树
Video.js播放器的默认组件结构如下所示：
Player  播放器
├── MediaLoader (has no UI)  媒体加载
├── PosterImage  海报图片
├── TextTrackDisplay  文本轨道显示
├── LoadingSpinner 加载旋转器
├── BigPlayButton  大播放按钮
├─┬ ControlBar  控制条
│ ├── PlayToggle  播放切换
│ ├── VolumeMenuButton  声音菜单按钮
│ ├── CurrentTimeDisplay (hidden by default)  当前播放时间
│ ├── TimeDivider (hidden by default)  时间分割器
│ ├── DurationDisplay (hidden by default)  持续播放时间
│ ├─┬ ProgressControl (hidden during live playback)  进度条控制
│ │ └─┬ SeekBar  拖动条
│ │   ├── LoadProgressBar  加载进度条
│ │   ├── MouseTimeDisplay  鼠标时间显示
│ │   └── PlayProgressBar  播放进度条
│ ├── LiveDisplay (hidden during VOD playback) 直播显示
│ ├── RemainingTimeDisplay  剩余时间
│ ├── CustomControlSpacer (has no UI) 自定义控制间隔
│ ├── PlaybackRateMenuButton (hidden, unless playback tech supports rate changes)  播放速率菜单按钮（隐藏，除非回放技术支持速率变化）
│ ├── ChaptersButton (hidden, unless there are relevant tracks)  章节按钮（隐藏，除非有相关轨道）
│ ├── DescriptionsButton (hidden, unless there are relevant tracks)  说明按钮（隐藏，除非有相关轨道）
│ ├── SubtitlesButton (hidden, unless there are relevant tracks)  字幕按钮
│ ├── CaptionsButton (hidden, unless there are relevant tracks)  标题按钮
│ ├── AudioTrackButton (hidden, unless there are relevant tracks)  音频轨道按钮
│ └── FullscreenToggle  全屏切换
├── ErrorDisplay (hidden, until there is an error) 错误（隐藏，直到发生错误）
└── TextTrackSettings 文本轨道设置
特定组件详情
Volume Panel
VolumePanel包括MuteToggle和VolumeControl组件，如果不支持音量更改，它将被隐藏。 VolumePanel有一个重要选项，可以使您的VolumeControl垂直显示在MuteToggle上。 这可以通过传递VolumePanel {inline：false}来设置，因为默认行为是具有{inline：true}的水平VolumeControl。
垂直 VolumeControl的示例
let player = videojs('myplayer', {
  controlBar: {
    volumePanel: {
      inline: false
Text Track Settings
文本轨道设置组件仅在使用模拟文本轨道时可用。