ngx-video-scrubber 是一个基于 Angular 框架的视频滑块组件，能够提供视频播放时的滑块进度条，支持鼠标和触控操作，能够轻松地实现视频快进、快退、暂停等常见功能。这个组件非常易于使用，能够为前端工程师提供极大的便利性和高效性。
本文将会为大家介绍 ngx-video-scrubber 包的安装和使用方式，以及基本的样式和 API 设置。
安装
由于 ngx-video-scrubber 是一个 npm 包，因此你可以通过 npm 命令行工具进行安装：
$ npm install ngx-video-scrubber --save
基本使用
使用 ngx-video-scrubber 的方式非常简单，只需要在应用模块中先导入模块并将其添加到模块的 imports 列表中，然后就可以在模板中使用组件标签来组件。
导入模块
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------------------- - ---- --------------------- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ------------------------ ---------- -------------- -- ------ ----- --------- --
使用组件
在模板中，只需要添加 ngx-video-scrubber 组件标签即可，然后定义一个属性来绑定视频的 URL，即可看到一个简单的视频播放器：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------------- --------------------------------------------------------------
-
--
------ ----- ------------ --样式配置
在大多数情况下，视频播放器的默认样式已经足够好，因此你只需要使用默认的样式配置即可。ngx-video-scrubber 针对每个组件都提供了多个 CSS 类用于定制显示效果。
CSS 类
video-scrubber：整体组件容器video-scrubber-video：视频元素video-scrubber-video-wrapper：视频容器video-scrubber-controls：控制栏video-scrubber-play-pause：播放/暂停按钮video-scrubber-mute：静音按钮video-scrubber-volume：音量条video-scrubber-current-time：当前时间video-scrubber-duration：视频总时长video-scrubber-seek-bar：滑块控件video-scrubber-buffer-bar：缓冲条video-scrubber-thumb：滑块拇指video-scrubber-progress：进度条
例如，以下 CSS 样式将会让视频元素自适应容器大小：
.video-scrubber-video {
display: block;
width: 100%;
height: 100%;
}API
ngx-video-scrubber 在组件级别向外暴露了一些 API，以便您可以根据需要自定义视频播放器的行为。
url
- 描述：将一个字符串绑定到组件。当输入视频的 URL 时，这个属性会被设置（如果设置）。如果 URL 在之前已经被设置，则输入值不会影响该属性。
paused
- 描述：获取或设置视频是否为暂停状态。
- 默认值：
true
currentTime
- 描述：检索或设置视频的当前播放时间（以秒为单位）。
- 默认值：
0
duration
- 描述：查询视频的总播放时间（以秒为单位）。
- 默认值：
0
示例代码
下面是一个完整的 ngx-video-scrubber 示例代码，它展示了如何使用 ngx-video-scrubber 来播放视频，并调整视频的音量和播放进度等。
-- -------------------- ---- ------- ------------------- ---------------- ---------------- ----------------- ----------------------------- ------------------------------------------- ------- ------------------------------------ - ---- - --------------- ------- ------------------------ - ------ - --------------- ---- ----------------------- ------ ------------------------------ ------ ----------------- ------------ -------------------- --------- ------------- -- ------ ---- --------------------- ------ ---------------------------- ------ --------------- ------------ --------------------- ---------------- ------------- -- ------
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------------- ---------------- ---------------- ----------------- ----------------------------- -------------------------------------------
------- ------------------------------------ - ---- - ---------------
------- ------------------------ - ------ - ---------------
---- -----------------------
------ ------------------------------
------ ----------------- ------------ -------------------- --------- ------------- --
------
---- ---------------------
------ ----------------------------
------ --------------- ------------ --------------------- ---------------- ------------- --
------
-
--
------ ----- ------------ -
--------- ------ - ---------------------
------- ------- - -----
------------ ------ - --
--------- ------ - --
------- ------ - ----
------ ------- - ------
-------- ------ - --
----------------- -
----------- - -------------
-
------ -
---------- - ------------
-
-总结
ngx-video-scrubber 是一个非常优秀的视频滑块组件，不仅功能强大，而且易于使用，能够大大地提高前端工程师的开发效率。本文介绍了 ngx-video-scrubber 的安装和使用方式，以及 CSS 类和 API 设置。希望本文能够对你以后的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005753c81e8991b448ea4a3