videojs文档翻译-SeekBar

本文详细介绍了SeekBar类的功能和使用方法,包括其构造函数、成员属性及多种事件处理方法等。SeekBar主要用于实现拖动条和进度条的功能,是播放器中常用的一个组件。

SeekBar

拖动条和进度条的容器。 使用PlayProgressBar作为其栏。

构造函数

new SeekBar(player, optionsopt)

创造此类的实例

Parameters:
NameTypeAttributesDescription
playerPlayer 

The Player that this class should be attached to.

optionsObject<optional>

The key/value store of player options.

延伸

  • Slider

成员

playerEvent :string

当播放器发生此事件时,调用此滑块的更新事件。

方法

calculateDistance(event) → {number}

计算滑块距离

参数:
NameTypeDescription
eventEventTarget~Event

导致此函数运行的事件。

返回:
number - 

滑块的当前位置。

    - postition.x for vertical `Slider`s 用于垂直滑块 - postition.y for horizontal `Slider`s 用于水平滑块
继承自:
  • Slider#calculateDistance
createEl() → {Element}

创建此组件的DOM元素

Returns:
Element - 

创建的元素。

Overrides:
  • Slider#createEl
getPercent() → {number}

获取到目前为止已播放媒体的百分比。

返回:
number - 

到目前为止播放的媒体的百分比(0到1)。

handleAction(event)

切换播放器的播放状态,当在seekbar上使用enter或空格时会调用

参数:
名称类型描述
eventEventTarget~Event

导致此函数被调用的按键事件

handleBlur(event)

处理此滑块上的blur 事件。

参数:
名称类型描述
eventEventTarget~Event

导致此函数运行的blur事件。

监听下列事件:
  • event:blur
继承自:
  • Slider#handleBlur
handleClick(event)

滑块上的点击事件的侦听器,用于防止点击冒泡到像按钮菜单这样的父元素。

参数:
名称类型描述
eventObject

导致此对象运行的事件

继承自:
  • Slider#handleClick
handleFocus(event)

处理此滑块上的focus事件。

参数:
名称类型描述
eventEventTarget~Event

导致此函数运行的焦点事件。

监听下列事件:
  • event:focus
继承自:
  • Slider#handleFocus
handleKeyPress(event)

Called when this SeekBar has focus and a key gets pressed down. By default it will call this.handleAction when the key is space or enter.

Parameters:
NameTypeDescription
eventEventTarget~Event

The keydown event that caused this function to be called.

Listens to Events:
  • event:keydown
Overrides:
  • Slider#handleKeyPress
handleMouseDown(event)
 

Handle mouse down on seek bar

Parameters:
NameTypeDescription
eventEventTarget~Event

The mousedown event that caused this to run.

Listens to Events:
  • event:mousedown
Overrides:
  • Slider#handleMouseDown
handleMouseMove(event)

Handle mouse move on seek bar

Parameters:
NameTypeDescription
eventEventTarget~Event

The mousemove event that caused this to run.

Listens to Events:
  • event:mousemove
Overrides:
  • Slider#handleMouseMove
handleMouseUp(event)

Handle mouse up on seek bar

Parameters:
NameTypeDescription
eventEventTarget~Event

The mouseup event that caused this to run.

Listens to Events:
  • event:mouseup
Overrides:
  • Slider#handleMouseUp
stepBack()

仅限键盘用户可以更快地后退

stepForward()

快速向前移动只适用于键盘用户

update(eventopt)

更新搜索栏UI。

Parameters:
NameTypeAttributesDescription
eventEventTarget~Event<optional>

The timeupdate or ended event that caused this to run.

Listens to Events:
  • Player#event:timeupdate
  • Player#event:ended
Overrides:
  • Slider#update
vertical(boolopt) → {boolean}

如果滑块对于垂直方向是水平的,则获取/设置

Parameters:
NameTypeAttributesDescription
boolboolean<optional>
  • true if slider is vertical,
     - false is horizontal
Returns:
boolean -
  • true if slider is vertical, and getting
      - false if the slider is horizontal, and getting
Inherited From:
  • Slider#vertical

Events

slideractive
 

当滑块处于活动状态时触发

Type:
  • EventTarget~Event
Inherited From:
  • Slider#event:slideractive
sliderinactive
 

当滑块不再处于活动状态时触发。

Type:
  • EventTarget~Event
Inherited From:
  • Slider#event:sliderinactive

转载于:https://www.cnblogs.com/nightstarsky/p/6594903.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值