简介
chimee-plugin-controlbar 是一个基于 Chimee 播放器的控制条插件。它可以方便地为播放器添加类似于视频控制条的控制功能，如播放、暂停、快进、快退等等。
本文将介绍如何使用 chimee-plugin-controlbar 插件，包括安装、引入、属性、方法等内容，并附有相应示例代码。
安装
首先，确保已经安装了 Chimee 播放器，并创建了 video 标签和配置对象。
然后，打开终端，使用以下命令安装 chimee-plugin-controlbar：
npm install chimee-plugin-controlbar --save
引入
在创建 Chimee 播放器时，使用 use 方法引入 chimee-plugin-controlbar 插件，如下所示：
-- -------------------- ---- -------
------ ------ ---- ---------
------ ---------- ---- ---------------------------
----- ------ - -
-- ---
--
----- ------ - --- --------
-- ---
---
-----------------------属性
chimee-plugin-controlbar 插件提供了以下属性：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| playButton | boolean |
true |
是否显示播放按钮 |
| pauseButton | boolean |
true |
是否显示暂停按钮 |
| currentTime | boolean |
true |
是否显示当前时间 |
| duration | boolean |
true |
是否显示总时长 |
| progress | boolean |
true |
是否显示播放进度条 |
| fullscreen | boolean |
true |
是否显示全屏按钮 |
| volume | boolean |
true |
是否显示音量条 |
| volumeValue | Number |
0.5 |
初始音量值，范围为 0 到 1 |
| muted | boolean |
false |
是否静音 |
| errorTips | string |
'出错了' |
加载失败时的提示文本 |
| tipsBgColor | string |
'#000' |
提示文本的背景颜色 |
| tipsColor | string |
'#fff' |
提示文本的文字颜色 |
| tipsTimeout | Number |
3000 |
提示文本的显示时长，单位为毫秒 |
| link | Array<any> |
[] |
自定义按钮，每个按钮需要提供一个 action 方法 |
这些属性可以在创建 Chimee 播放器时通过配置对象进行设置，如下所示：
-- -------------------- ---- -------
----- ------ - -
-------- ------------------
------- --
----- -------------
----------- -----
------------ -----
------------ -----
--------- -----
--------- -----
----------- -----
------- -----
------------ ----
------ ------
---------- ------
------------ -------
---------- -------
------------ -----
----- -
-
----- -------
------- ---------- -
-- ---
--
--
-
----- -------
------- ---------- -
-- ---
--
--
--
---
--
----- ------ - --- ---------------方法
除了上述属性外，chimee-plugin-controlbar 插件还提供了一些方法，用于控制播放器行为。这些方法可以通过 player.controlbar 对象来调用，如下所示：
| 方法 | 描述 |
|---|---|
play() |
播放 |
pause() |
暂停 |
seek(time: number) |
跳转到指定时间（秒） |
setVolume(vol: number) |
设置音量（0 到 1） |
toggleMuted() |
切换静音状态 |
enterFullScreen() |
进入全屏模式 |
exitFullScreen() |
退出全屏模式 |
例如，要在点击预览图时进行播放，可以在预览图的点击事件中调用 play() 方法：
document.querySelector('#preview').addEventListener('click', function() {
player.controlbar.play();
});示例代码
下面是一个完整的示例代码，使用 chimee-plugin-controlbar 插件为 Chimee 播放器添加控制条。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- --------------
-------
--------------- -
------ ------
------- ------
------- - -----
--------- -------
-
------- -
------ -----
------- -----
-
-------- -
------ ------
------- ------
------- --------
-
--------
-------
------
---- --------------------
------ --------------------
---- ----------------- ------------- -------------
------
------- ----------------------------------------------------------
------- ----------------------------------------------------------------------------
--------
----- ------ - -
-------- ------------------
---- ------------
------- --
----- -------------
---
--
----- ------ - --- --------
------- -------------------
-------- ---------------
--------- -----
--------- ------
-------- -------
---- -----------
---- ---------
-------- -------
---
------------------------------------------------------------ ---------- -
-------------------------
---
---------
-------
-------在实际应用中，我们可以通过修改 config.plugin 数组中的属性来控制控制条的显示和行为。同时，通过调用 player.controlbar 对象的方法，可以实现各种复杂的播放器交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcbefb5cbfe1ea06126c0