在前端开发中，视频播放器是一个常见的控件。video.js 是一个基于 HTML5 的开源视频播放器库，它提供了丰富的 API 和插件，使得开发视频播放器更加简单、灵活和可定制。
本文将介绍如何使用 video.js 对视频播放器的 UI 进行改变，并提供一些示例代码以供参考。
安装和基本用法
首先，我们需要通过 npm 或者直接下载来安装 video.js：
npm install video.js
然后，在 HTML 页面中引入 video.js：
-- -------------------- ---- -------
------
----- ---------------------------------------------- -----------------
------- ---------------------------------------------------
-------
------
------ ------------- --------------- ----------------- -------- -------------- ----------- -------------
------- ------------------ -----------------
--------
--------
--- ------ - --------------------
---------
-------这里，我们定义了一个 video 标签，并给它设置了一个 ID，之后通过 JavaScript 代码来初始化 video.js 播放器。
在这个基本的用法之上，我们可以修改视频播放器的各种属性，包括样式、控件、事件等等。
改变样式
video.js 提供了一个默认的皮肤，但是我们可以通过修改 CSS 样式表来自定义播放器的 UI。
例如，我们可以将进度条的颜色改成红色：
.vjs-default-skin .vjs-progress-holder .vjs-play-progress {
background-color: red;
}同样地，我们可以修改控件的位置和大小：
.vjs-control-bar {
height: 50px;
bottom: 20px;
}自定义控件
除了修改样式之外，我们还可以添加自己的控件，以满足特定的需求。video.js 提供了 Component 和 Button 两个类来方便地创建自定义控件。
例如，我们可以创建一个按钮控件，点击它可以暂停或者继续播放视频：
-- -------------------- ---- -------
--------------------------------------- ---------------------------------------------- -
------------ ---------- -
----------------------------------------- -----------
-------------------------
--
------------ ---------- -
-- ----------------------- -
--------------------
--------------------------
- ---- -
---------------------
-------------------------
-
-
----
--- ------ - ------------------- -
----------- -
--------- -
-------------
---------------------
--------------
------------------
------------------
--------------
------------------
-
-
---
---------------------------------------------------- --- ---这里，我们定义了一个 PlayToggle 类来继承 Button 类，并重写了 handleClick 方法。然后在初始化播放器的时候，将这个自定义控件添加到控制栏中。
总结
使用 video.js 改变视频播放器的 UI 是一件非常有趣和实用的事情。通过修改样式、添加控件等手段，我们可以让视频播放器更符合自己的需求和设计风格。同时，video.js 的 API 和插件系统也提供了很多灵活性和可扩展性，适合各种场景下的应用。
示例代码：https://codepen.io/hanzichi/pen/pvzXrm
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1425