介绍
vid-player-zjl-hhh 是一个基于 Vue 开发的视频播放器组件。它支持多种格式的视频文件，并且提供了丰富的控制、交互和样式配置选项，可以满足不同场景下的需求。此外，vid-player-zjl-hhh 还提供了播放器状态监控和事件监听方法，并且封装了一系列便捷的 API 方法，方便开发者快速实现各种交互功能。
特性
- 支持 MP4、FLV、HLS、M3U8、WebM、Ogg 等多种视频格式，可自由扩展；
- 支持 RTMP 直播、HTTP-FLV 直播、HLS 直播等多种流媒体协议；
- 支持自定义样式、控制栏、提示框等多种 UI 组件，并可通过插槽自由定制；
- 支持全屏、倍速播放、画中画等常见功能；
- 支持视频缩略图预览功能，并可自定义缩略图数量和尺寸；
- 支持视频片段切换、广告插入等高级功能；
- 支持播放器状态监控和事件监听方法，提供多种 API 方法方便调用。
安装
vid-player-zjl-hhh 可以通过 npm 安装，你可以使用如下命令安装：
npm install vid-player-zjl-hhh --save
使用方法
在 Vue 项目中使用 vid-player-zjl-hhh 组件非常简单，只需在视图中添加以下代码：
-- -------------------- ---- -------
----------
------------------- --
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----------- -
---------------
-
-
---------这样，就可以在页面中显示一个默认的视频播放器。此时，你可以在浏览器控制台中看到一些默认的配置信息和处理日志，同时也可以通过播放器控制栏调整视频播放和交互效果。
配置选项
如果你需要自定义配置 vid-player-zjl-hhh 实例的行为，可以在 <vid-player-zjl-hhh> 标签中添加相应的属性值。以下是常用的属性值和配置项：
| 属性名称 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
src |
String | 是 | - | 视频资源路径 |
scale |
String | 否 | 16:9 |
视频宽高比 |
poster |
String | 否 | - | 视频封面图路径 |
preload |
String | 否 | auto |
视频预加载模式 |
autoplay |
Boolean | 否 | false |
是否自动播放 |
loop |
Boolean | 否 | false |
是否循环播放 |
muted |
Boolean | 否 | false |
是否静音播放 |
controls |
Boolean | 否 | true |
是否显示控制栏 |
controlBar |
Object | 否 | {} |
控制栏自定义配置 |
toast |
Object | 否 | {} |
提示框自定义配置 |
thumbnails |
Object | 否 | {} |
缩略图预览自定义配置 |
fragmentSwitcher |
Object | 否 | {} |
视频片段切换自定义配置 |
adInsertion |
Object | 否 | {} |
广告插入自定义配置 |
pip |
Boolean | 否 | false |
是否开启画中画功能 |
showLog |
Boolean | 否 | false |
是否显示调试日志 |
volume |
Number | 否 | 0.8 |
视频播放音量 |
playbackRate |
Number | 否 | 1.0 |
视频播放速率 |
mediaElementAttributes |
Object | 否 | {} |
原生控件自定义属性 |
下面是一个完整的 vid-player-zjl-hhh 配置例子：
-- -------------------- ---- -------
----------
-------------------
---------------
-----------
-----------------
------------------------------
------------------------------
------------------------------------------
--------------------------------
-----------
---------------
-------------
-------------------
--
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----------- -
---------------
--
------ -
------ -
--------- ----------------------------
----------------- -
----------- -----
------------- -----
------- ----
--
----------------- -
------ ---
------ ----
------- ---
------ ------ ------ -- ---------------------------------------
--
----------------------- -
------ -
-
------ --
---- ----
----- ----
--
-
------ ----
---- -----
----- ----- --
--
-
------ -----
---- -----
----- ----- --
--
-
------ -----
---- -----
----- ----
-
-
--
------------------ -
------ -
-
------ -----
---- -----
---- -----------------------
----- ------
------ - ----- ------- ------- ------- -
--
-
------ -----
---- -----
---- -----------------------
----- -----
------ - ------ ------- ------- ------ -
-
-
-
-
-
-
---------API 方法
除了以上配置选项之外，vid-player-zjl-hhh 还提供了一些便捷的 API 方法，方便开发者对播放器进行控制和监听。以下是常用的 API 方法：
| 方法名称 | 参数 | 返回值 | 描述 |
|---|---|---|---|
play |
- | - | 播放当前视频 |
pause |
- | - | 暂停当前视频 |
seek |
time |
- | 跳转到指定时间点进行播放 |
toggleFullscreen |
- | - | 切换全屏/非全屏状态 |
setVolume |
volume |
- | 设置播放器音量 |
getVolume |
- | Volume |
获取当前播放器音量 |
setPlaybackRate |
rate |
- | 设置播放器播放速率 |
getPlaybackRate |
- | Rate |
获取当前播放器播放速率 |
getCurrentTime |
- | time |
获取当前视频播放时间 |
getDuration |
- | time |
获取当前视频总时长 |
getStatus |
- | status |
获取当前播放器状态 |
on |
eventName, listener |
- | 添加事件监听器 |
off |
eventName, listener |
- | 移除事件监听器 |
以下是一个 vid-player-zjl-hhh 的示例代码，展示了如何使用 API 方法对播放器进行控制和状态监听：
-- -------------------- ---- -------
----------
------------------- ------------ --
-----
------- -------------------------
------- --------------------------
------- ---------------------------------------
------- ----------------------------- ------------
------- ------------------------------------ ---- ----------
------
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----------- -
---------------
--
-------- -
------ -
------------------------
--
------- -
-------------------------
--
------------------ -
------------------------------------
--
----------------- -
-----------------------------------
--
--------------------- -
---------------------------------------
-
--
--------- -
----- ------ - -----------------
-------------------- -- -- -------------------------
------------------- -- -- -----------------------
-------------------- -- -- -------------------------
------------------- -- -- ----------------------
------------------ -- -- -----------------------
-
-
---------结束语
vid-player-zjl-hhh 是一个功能齐全、配置简便的视频播放器组件，可以帮助你快速实现各种交互、控制和样式效果。当然，它同样适用于移动端和 PC 端开发，并且可以与其他 Vue 组件很好地配合使用。如果你在使用过程中遇到问题或者想要了解更多详细细节，请参考官方文档或者提出 Issue。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f75238a385564ab6892