数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学添加自定义 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 代码：
// 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>';
在上面的代码片段中，我们使用 id 为 'my-video' 初始化了我们的 Video.js 播放器到 'player' 变量中。接下来，我们使用 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://tutorialspoint.com/videos/sample.png"
width="560"
height="340"
data-setup="{}"
>
<source src="https://tutorialspoint.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"，id 为 'my-video'。此 id 稍后将在 <script> 标签中用于引用播放器。
我们还添加了一些标准的 HTML 视频选项，例如 controls、muted、autoplay、width、height 等。
在 <source> 标签内，包含了 mp4 视频的路径。请确保将视频路径正确更新为您的视频文件。
在 <script> 标签中，我们首先引用了 Video.js 来为 id 为 'my-video' 的视频创建播放器，然后使用 controlBar 方法创建一个按钮并将其添加到视频播放器的 HTML 中。
执行上述代码后，视频将在我们的 Web 浏览器中播放，并且您会在控件栏中注意到我们会在第一个位置有一个取消或叉号按钮。因此，我们已成功将按钮添加到我们的控件栏。
现在，如果您单击该按钮，您会注意到视频播放器实际上没有任何反应。原因是我们尚未向自定义按钮添加任何功能。让我们通过在本文的下一节中添加一些属性来使我们的按钮更具交互性。
向按钮添加选项
我们可以配置和更改添加到控件栏的按钮的每一个方面，例如更改控制文本、关闭视频播放器、提高视频速度、更改按钮的位置等。
在本篇文章中，我们将向按钮添加控制文本和单击方法。
控制文本是在您将鼠标悬停在按钮上时看到的文本。它通常是按钮的名称，用于向最终用户传达此按钮的作用。例如，如果您将鼠标悬停在视频播放器的全屏按钮上，它会显示一个小文本“全屏”，这意味着如果您单击该按钮，视频将切换到全屏模式。
单击方法是一个函数，用于处理用户单击我们的按钮时将发生的事情。在本文中，我们将显示一个带有我们取消按钮点击的警报消息。
让我们从向按钮添加控制文本开始。为了添加控制文本，我们将使用按钮组件上的 'controlText' 选项。请考虑以下代码片段：
var myButton = player.controlBar.addChild('button', {}, 0);
// Setting control text for the button hover effect
myButton.controlText("My Cancel Button");
将此代码片段添加到示例 1 后，您会观察到当您将鼠标悬停在控件栏中的取消按钮上时，它现在会显示一个小文本“我的取消按钮”。
现在，让我们继续为新创建的按钮添加单击功能。为此，我们将使用按钮 DOM 元素上的 'onClick' 方法。相应的代码片段如下所示：
var myButtonDom = myButton.el();
// Setting the control button click function
myButtonDom.onclick = function () { alert('Cancel Button Clicked!')};
在上面的示例中添加上述代码片段将在我们的视频播放器中添加单击函数。您会观察到，现在当您单击取消按钮时，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://tutorialspoint.com/videos/sample.png"
width="560"
height="340"
data-setup="{}"
>
<source
src="https://tutorialspoint.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>';
// Setting control text for the button hover effect
myButton.controlText("My Cancel Button");
// Setting the control button click function
myButtonDom.onclick = function () { alert('Cancel Button Clicked!')};
</script>
</body>
</html>
如果您执行上述示例，您会观察到视频播放器将在控件栏的开头显示一个取消按钮。当您将鼠标悬停在按钮上时，将显示我们的控制文本，即“我的取消按钮”，并且单击时会显示一个警报。
结论
在本教程中，我们学习了如何创建一个新的自定义按钮并使用 Video.js 将其添加到视频播放器的控件栏中。我们使用 controlBar 的 addChild 方法创建按钮组件，然后使用“.el()”方法将按钮添加到 HTML DOM。添加按钮后，我们还使用 onClick 方法自定义了控制文本并增强了按钮的功能。
6000+ 次浏览
