videojs文档翻译Guides-components

components

Components

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

目录

• 组件是什么?
• 创建一个组件
• 子组件
  • 基本例子
  • 使用选项
• 时间监听
  • Using on
  • Using off
  • Using one
  • Using trigger
• 默认组件树
• 特定组件详细信息
  • 音量面板
  • 文本轨道设置

组件是什么?

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

• 相关联的DOM元素.
• 与Player对象的结合.
• 能够管理任意数量的子组件.
• 监听和触发事件的能力.
• 初始化和处置的生命周期.

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

创建组件

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

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

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

• videojs.getComponent(String name):从Video.js检索组件构造函数。
• videojs.registerComponent(String name, Function Comp): 使用Video.js注册组件构造函数。
• videojs.extend(Function component, Object properties):提供原型继承。 可用于扩展组件的构造函数，返回具有给定属性的新构造函数。

创建:

// 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

文本轨道设置组件仅在使用模拟文本轨道时可用。