SeekBar

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

构造函数

new SeekBar(player, optionsopt)

创造此类的实例

Parameters:
Name Type Attributes Description
player Player  

The Player that this class should be attached to.

options Object <optional>

The key/value store of player options.

延伸

  • Slider

成员

playerEvent :string

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

方法

calculateDistance(event) → {number}

计算滑块距离

参数:
Name Type Description
event EventTarget~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或空格时会调用

参数:
名称 类型 描述
event EventTarget~Event

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

handleBlur(event)

处理此滑块上的blur 事件。

参数:
名称 类型 描述
event EventTarget~Event

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

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

handleClick(event)

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

参数:
名称 类型 描述
event Object

导致此对象运行的事件

继承自:
  • Slider#handleClick

handleFocus(event)

处理此滑块上的focus事件。

参数:
名称 类型 描述
event EventTarget~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:
Name Type Description
event EventTarget~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:
Name Type Description
event EventTarget~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:
Name Type Description
event EventTarget~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:
Name Type Description
event EventTarget~Event

The mouseup event that caused this to run.

Listens to Events:
  • event:mouseup
Overrides:
  • Slider#handleMouseUp

stepBack()

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

stepForward()

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

update(eventopt)

更新搜索栏UI。

Parameters:
Name Type Attributes Description
event EventTarget~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:
Name Type Attributes Description
bool boolean <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

videojs文档翻译-SeekBar的更多相关文章

  1. videojs文档翻译-api

    直播流地址 rtmp://live.hkstv.hk.lxdns.com/live/hks API 接口 (一)   Modules  模块 1)         browser :浏览器 2)    ...

  2. videojs文档翻译Guides-components

    components Components Video.js播放器的架构围绕组件. Player类和所有表示播放器控件和其他UI元素的类都继承自Component类. 这种架构使得可以轻松地以反映DO ...

  3. videojs文档翻译-Player(v6.0.0-RC.2)

    Player 当使用任何Video.js设置方法初始化视频时,将创建Player类的实例. 创建实例后,可以通过两种方式在全局访问: 调用videojs('example_video_1');直接通过 ...

  4. videojs文档翻译Guides-Plugins

    Video.js Plugins Video.js的一大优势在于其插件生态系统,允许来自世界各地的作者分享他们的视频播放器定制.这包括从最简单的UI调整到新的播放技术和资源处理程序的一切! 因为我们将 ...

  5. videojs文档翻译-EventTarget

    EventTarget new EventTarget()   EventTarget是一个可以与DOM EventTarget具有相同API的类. 它增加了包含冗长功能的缩写功能. 例如:on函数是 ...

  6. 一款开源免费跨浏览器的视频播放器--videojs使用介绍

    最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免 ...

  7. 【转】一款开源免费跨浏览器的视频播放器--videojs使用介绍

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  8. 我是如何进行Spring MVC文档翻译项目的环境搭建、项目管理及自动化构建工作的

    感兴趣的同学可以关注这个翻译项目 . 我的博客原文 和 我的Github 前段时间翻译的Spring MVC官方文档完成了第一稿,相关的文章和仓库可以点击以下链接.这篇文章,主要是总结一下这个翻译项目 ...

  9. Hibernate 3.3.2 文档翻译 Day01

    Hibernate 3.3.2 文档翻译 翻译人:微冷的雨 第一次书写:2015年11月29日 本人呕心沥血之作,请细心阅读领悟! Day01-1.1 项目描述 微冷的雨翻译:例如,我们将要建立一个可 ...

随机推荐

  1. .NET Core/.NET5/.NET6 开源项目汇总5:权限管理系统项目

    系列目录     [已更新最新开发文章,点击查看详细] 企业管理系统一般包含后台管理UI.组织机构管理.权限管理.日志.数据访问.表单.工作流等常用必备功能.下面收集的几款优秀开源的管理系统,值得大家 ...

  2. VBS脚本编程(3)——常用函数

    数据类型转换函数 1.Hex 函数 返回表示十六进制数字值的字符串. Hex(number) number 参数是任意有效的表达式. 说明 如果 number 参数不是整数,则在进行运算前将其四舍五入 ...

  3. ES6、ES7的一些新特性

    1.常见的就是let 和 const 命令 let 只在命令所在的代码块内有效 const声明一个只读的常量 2.变量的赋值 let [a, b, c] = [1, 2, 3]; 这样输出的话a=1, ...

  4. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  5. 40、Nginx 配置支持 WAF

    40.1 waf说明 1 WAF(Web Application Firewall),中文名叫做"Web应用防火墙". 2 WAF的定义是这样的:Web应用防火墙是通过执行一系列针 ...

  6. 图的存储与遍历C++实现

    1.图的存储 设点数为n,边数为m 1.1.二维数组 方法:使用一个二维数组 adj 来存边,其中 adj[u][v] 为 1 表示存在 u到 v的边,为 0 表示不存在.如果是带边权的图,可以在 a ...

  7. 『无为则无心』Python序列 — 23、Python序列的公共API

    目录 1.运算符 @1.+加号 @2.*乘号 @3.in或not in 2.公共方法 @1.len()方法 @2.del和del() @3.max()方法 @4.min()方法 @5.range() ...

  8. redis学习笔记(三)——redis的命令大全总结

    总结了一些redis五种存储类型的常用命令以及一些通用操作命令,不是很全,是在学习的时候将学到的做了个汇总,使用的时候可以查一下. 笔记写在表格里面了,不好粘贴.......后面的直接截图了..... ...

  9. buu SCTF Who is he

    1. 下载好附件,发现是unity的题目,找到assembly.dll,用dnspy直接打开干,在引用下面就是实际的代码 2.找到了核心代码,发现逻辑也挺简单的, 输入的text,要和一串字符串进行b ...

  10. 官宣.NET 6 预览版4

    我们很高兴发布 .NET 6 Preview 4.我们现在大约完成了 .NET 6 发布的一半.现在是一个很好的时机,可以再次查看.NET6的完整范围.许多功能都接近最终形式,而其他功能将很快推出,因 ...