添加自定义 Video.js 控制栏按钮
Video.js 是一个著名的在线视频播放器 JavaScript 库，用于在 Web 浏览器中创建支持各种视频格式的视频播放器。它支持所有现代视频格式，例如 YouTube、Vimeo、Flash 等，以及所有常见的视频播放格式，例如 mp4、WebM、Flv 等。除了支持多种格式外，video.js 还提供了许多功能和灵活性，可根据需要自定义视频播放器。
在本教程中，我们将学习如何使用 video.js 自定义视频播放器，方法是在视频的控制栏中创建和添加新按钮。在视频播放器中添加自定义按钮可以让您更好地控制播放器，并提升用户体验。例如，添加一个按钮来让视频快进或快退 30 秒，对用户来说非常方便。因此，自定义按钮可能有多种用途。现在，在本教程的下一部分中，我们将开始开发自己的按钮并将其添加到视频播放器中。
添加自定义 Video.js 控制栏按钮
在本文的这一部分，我们将执行以下操作 -
向视频播放器控制栏添加按钮
向按钮添加各种选项 - 使其更具交互性。
让我们继续向视频播放器添加按钮。
向视频播放器控制栏添加按钮
先决条件 - 假设您知道如何使用 video.js 库创建一个基本的视频播放器。
为了向视频播放器控制栏添加按钮，我们将使用 video.js 公开的各种选项引用，例如 fluid、audioOnlyMode、 controlBar。本文将专门使用 controlBar 的选项。"controlBar"提供了 getChild 或 addChild 等多种方法，可用于创建和添加各种元素到播放器中。
我们将使用 controlBar 类的 addChild 方法添加按钮。然后，我们将按钮添加到 HTML Dom 中，并将其 innerHTML 设置为 video-js 提供的图标。
考虑以下 JavaScript 示例，用于将按钮添加到控制栏
// 初始化视频播放器
var player = videojs('my-video');
// 将按钮添加到控制栏
var myButton = player.controlBar.addChild('button', {}, 0);
// 创建按钮的 DOM 组件
var myButtonDom = myButton.el();
myButtonDom.innerHTML = '<span class="vjs-icon-cancel"></span>';
在上面的代码中，我们初始化了 video.js 播放器，并在"player"变量中将 id 设置为"my-video"。接下来，我们使用 controlBar 选项引用提供的 addChild 方法将按钮添加到控制栏。addChild 方法接受 3 个参数，其中第一个参数是需要添加的子项，第二个参数是要添加的子项的选项，最后一个参数是子项在控制栏上的索引。由于我们将索引设置为 0，因此按钮将添加到控制栏的起始位置。addChild 方法返回作为子项添加的组件。
之后，我们使用了"myButton.el()"，它负责实际创建按钮的 DOM 组件。".el()"是另一个 controlBar 方法，它将使用 addChild() 创建的组件推送到 HTML DOM。如果没有这个，我们将无法在控制栏中看到按钮。
最后，我们将按钮的 innerHTML 设置为图标。我们使用的图标是 vjs-icon-cancel，它会显示一个十字图标作为按钮。此图标由 video.js 官方提供，您可以在以下网址找到所有其他图标:https://videojs.github.io/font/
示例 1
创建按钮并将其添加到控制栏的完整示例如下:
<!DOCTYPE html>
<html>
<head>
<title>Adding Custom Video.js Control Bar buttons</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.2.0/video.min.js"></script>
</script>
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
muted="true"
preload="auto"
poster="https://www.cainiaomax.com/videos/sample.png"
width="560"
height="340"
data-setup="{}"
>
<source src="https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4">
</video>
<script>
// Initializing the video player
var player = videojs('my-video');
// Adding button to the control bar
var myButton = player.controlBar.addChild('button', {}, 0);
// Create our button's DOM Component
var myButtonDom = myButton.el();
myButtonDom.innerHTML = '<span class="vjs-icon-cancel"></span>';
</script>
</body>
</html>
在上面的代码片段中，我们完成了以下操作:
首先，在 <body> 标签中，我们创建了一个 <video> 元素，其 class="video.js vjsdefault-skin vjs-big-play-centered" 属性值为 'my-video'。此 id 稍后将在 <script> 标签中用于引用播放器。
我们还添加了一些标准的 HTML 视频选项，例如控件、静音、自动播放、宽度、高度等。
在 <source> 标签中，包含了 mp4 视频的路径。请确保正确更新视频文件的路径。
在 <script>标签中，我们首先引用了 video.js 来为视频创建一个播放器，其 id 为"my-video"，然后使用 controlBar 方法创建一个按钮并将其添加到视频播放器的 HTML 代码中。
执行上述代码后，视频将在网页浏览器中播放，在控制栏中，您会注意到在第一个位置有一个取消或叉号按钮。因此，我们已成功在控制栏中添加了一个按钮。
现在，如果您点击该按钮，您会注意到视频播放器上没有任何反应。这是因为我们尚未为自定义按钮添加任何功能。在本文的下一部分中，我们将通过添加一些属性来增强按钮的交互性。
向按钮添加选项
我们可以配置和更改添加到控制栏的按钮的各个方面，例如更改控制文本、关闭视频播放器、提高视频播放速度、更改按钮位置等。
在本文中，我们将为按钮添加控制文本和 click 方法。
控制文本是鼠标悬停在按钮上时显示的文本。它通常是按钮的名称，用于向最终用户传达此按钮的功能。例如，如果您将鼠标悬停在视频播放器的全屏按钮上，它会显示一个小的文本，提示"全屏"，这意味着如果您点击该按钮，视频将切换到全屏模式。
click 方法是一个函数，用于处理用户点击按钮时将发生的情况。在本文中，我们将在点击"取消"按钮时显示一条警告消息。
首先，我们来为按钮添加控制文本。要添加控制文本，我们将使用按钮组件上的"controlText"选项。请参阅以下代码片段。
var myButton = player.controlBar.addChild('button', {}, 0);
// 设置按钮悬停效果的控制文本
myButton.controlText("我的取消按钮");
将此代码片段添加到示例 1 后，您会发现，当您将鼠标悬停在控制栏中的"取消"按钮上时，它会显示一个小文本"我的取消按钮"。
现在，让我们继续为新创建的按钮添加点击功能。为此，我们将在按钮的 DOM 元素上使用"onClick"方法。相同的代码片段如下所示 -
var myButtonDom = myButton.el();
// 设置控制按钮的点击功能
myButtonDom.onclick = function () { alert('取消按钮已点击!')};
在上述示例中添加上述代码片段将为我们的视频播放器添加点击功能。您会发现，现在当您点击"取消"按钮时，Web 浏览器中会显示一条警告消息，提示"已点击取消按钮!"。您可以在此函数中添加任何类型的功能，这些功能将在用户点击按钮时执行。
示例 2
将以上两个代码片段添加到我们的代码示例中，如下所示
<!DOCTYPE html>
<html>
<head>
<title>Adding Custom Video.js Control Bar buttons</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
muted="true"
preload="auto"
poster="https://www.cainiaomax.com/videos/sample.png"
width="560"
height="340"
data-setup="{}"
>
<source
src="https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 初始化视频播放器
var player = videojs('my-video');
// 将按钮添加到控制栏
var myButton = player.controlBar.addChild('button', {}, 0);
// 创建按钮的 DOM 组件
var myButtonDom = myButton.el();
myButtonDom.innerHTML = '<span class="vjs-icon-cancel"></span>';
// 设置按钮悬停效果的控制文本
myButton.controlText("我的取消按钮");
// 设置控制按钮的点击函数
myButtonDom.onclick = function () { alert('Cancel Button Clicked!')};
</script>
</body>
</html>
执行上述示例，您会发现视频播放器的控制栏顶部会有一个"取消"按钮。当您将鼠标悬停在该按钮上时，会显示我们的控制文本"我的取消按钮"，点击按钮时会显示一个警告框。
总结
在本教程中，我们学习了如何使用 video.js 创建一个自定义按钮并将其添加到视频播放器的控制栏中。我们使用 controlBar 的 addChild 方法创建了按钮组件，然后使用".el()"方法将按钮添加到 HTML DOM 中。添加按钮后，我们还自定义了控制文本，并使用 onClick 方法增强了按钮的功能。
