正文

videojs文档翻译Guides-components

IP云
IP云V管理员/11 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

相关阅读

目录[+]