video.js 播放器的回调函数
在本教程中，我们将学习各种事件监听器，以及如何将它们与 video.js 播放器的回调函数结合使用。video.js 是一个流行的开源库，用于在浏览器中创建视频播放器。使用 video.js，您可以轻松调整视频播放器的每个部分。除此之外，video.js 还提供了大量默认事件，例如播放、暂停、正在播放、loadedmetadata、timeupdate、canplaythrough、loadeddata 等。
因此，在本教程中，我们将学习 video.js 中各种事件监听器的回调函数。回调函数非常重要，因为它们会在特定事件发生时触发。因此，我们可以借助各种回调函数执行不同的操作。现在让我们进入文章的下一部分，了解各种事件及其回调函数。
video.js 播放器的回调函数
回调函数是作为输入参数传递给另一个函数的函数。然而，回调函数被广泛用于在异步操作(例如事件)之后继续执行代码。事件监听器是在触发特定事件时调用的函数或方法。例如，事件可以是播放视频或暂停视频等。通过利用事件监听器和回调函数，我们可以实现所需的功能。
基本上，事件监听器会持续等待某些用户交互的发生，例如播放视频、暂停视频，然后在事件触发时执行相应的回调函数。
如果我们具体讨论 video.js，你会发现有大量的事件监听器可用于更改视频播放器的状态。例如播放、暂停、继续播放等。
本文将逐一介绍以下事件及其回调函数 -
LoadedData 事件
LoadedMetaData 事件
时间更新事件
结束事件事件
让我们快速浏览一下这些事件。
LoadedData 事件
"loadeddata"事件的回调函数在视频当前帧加载时触发。当前帧通常是视频的第一帧。因此，当当前帧已加载但下一帧尚未加载时，loadeddata 事件的回调函数会被触发。
前提条件 − 假设您知道如何使用 video.js 库创建基本的视频播放器，让我们学习如何使用 video.js 捕获"loadeddata"事件
您可以使用 player.on() 方法，将"loadeddata"作为 video.js 播放器引用的输入来捕获"loadeddata"事件。该方法将事件和回调函数绑定在一起。它通常接受两个参数作为输入，第一个参数是事件名称(在本例中为 loadeddata)，第二个参数是回调函数，该函数将在定义的事件触发后立即调用。因此，每当视频播放器的当前帧(第一帧)加载完毕时，就会执行传递给"loadeddata"事件监听器的回调函数。
您可以使用以下代码捕获"loadeddata"事件并触发回调函数，以在浏览器窗口中弹出文本提示 -
<script>
// 初始化视频播放器
const player = videojs('my-video-player');
// loadedData 事件监听器
player.on('loadeddata', function () {
window.alert('Video Player Data Loaded');
});
</script>
在前面的代码片段中，我们在视频播放器引用中使用了"loadeddata"事件监听器，并使用"player.on()"方法在视频播放器当前帧加载完成后提醒"视频播放器数据已加载"。
示例 1
这里我们展示了使用 loadeddata 事件监听器的完整示例，如下所示:-
<!DOCTYPE html>
<html>
<head>
<title>Video.JS CallBack Functions for Video Player</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-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
fluid="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
data-setup='{}'
>
<source
src="https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 初始化视频播放器
const player = videojs('my-video-player');
// loadedData 事件监听器
player.on('loadeddata', function () {
window.alert('Video Player Data Loaded');
});
</script>
</body>
</html>
我们尝试在上述代码中实现以下功能
首先，我们使用 video.js 的免费 CDN URL，在代码的 <head> 部分导入 video.js 所需的 CSS 和 JS 文件。
此外，我们在代码的 <body> 部分创建了一个 <video> 元素。该 <video> 元素已使用 video.js、video-default-skin 和 vjs-big-play-centered 等类进行了初始化。
视频元素的"id"，即"my-video-player"，稍后将在 <script> 中使用。代码部分，为该 ID 创建视频播放器。
我们还为 <video> 元素使用了一些标准 HTML 视频选项，例如控件、静音和海报。
在 <script>标签底部，"loadeddata"事件监听器用于在视频当前帧加载完成后，使用浏览器窗口上的回调函数显示"视频播放器数据已加载"消息。
执行上述代码将在浏览器中创建一个视频播放器，当视频当前帧或第一帧加载完成后，它将在窗口上显示一条警告消息。
现在我们知道了如何将回调函数与"loadeddata"事件监听器结合使用，让我们进入本文的下一部分，了解"loadedmetadata"监听器。
LoadedMetaData 事件
当浏览器加载完视频的元数据(例如时长、尺寸、文本轨道等)时，将调用"Loadedmetadata"事件监听器的回调函数。当我们从 URL 或第三方 API 加载视频时，此监听器非常有用。在这些情况下，我们需要等待视频加载完毕后才能对播放器进行任何更改。
要使用此监听器，我们需要使用"player.on()"方法将"loadedmetadata"作为视频播放器引用的输入。
您可以使用以下代码，在视频元数据加载完成后，使用带有回调函数的"loadedmetadata"事件显示一条消息 -
<script>
// 初始化视频播放器
let player = videojs('my-video-player');
// 加载元数据事件监听器
player.on('loadedmetadata', function () {
window.alert('Video Player Meta Data Loaded');
});
</script>
在上面的代码片段中，我们使用了"loadedmetadata"事件监听器来等待视频元数据加载完毕后再弹出提示框。由于视频需要先加载才能播放，因此该事件的回调函数会在"play"事件监听器之前调用。
现在，让我们继续学习下一个事件监听器的回调函数。
时间更新事件
"Timeupdate"事件监听器的回调函数是最重要的监听器之一，因为它会在视频当前播放时间每次发生变化时触发。因此，在视频播放过程中，该事件每 15 250 毫秒触发一次。此事件的回调函数可与"timeupdate"一起使用，作为 player.on 方法的输入。
请考虑以下代码片段，当我们的视频超过 15 秒时，使用带有回调函数的"timeupdate"事件监听器显示一条消息 -
<script>
// 初始化视频播放器
let player = videojs('my-video-player');
// 时间更新事件监听器
let alertShown = false;
player.on('timeupdate', function () {
if (player.currentTime() > 15 && !alertShown) {
window.alert('Video has Played for 15 seconds!');
alertShown = true;
}
});
</script>
在上面的代码片段中，我们利用"timeupdate"事件，在视频播放 15 秒后，通过回调函数提示文本。请注意，currentTime() 方法是如何获取视频播放器当前时间的。
现在，我们来看一下结束事件监听器的回调函数。
结束监听器
"结束"事件监听器的回调函数在视频结束时被调用。它可以用于显示重播按钮或在当前视频结束时播放下一个视频。要使用此监听器，我们需要使用"player.on()"方法将"ended"作为视频播放器引用的输入。
让我们使用带有回调函数的"结束"监听器，在视频结束时提示消息 -
<script>
// 使用视频选项初始化视频播放器
let player = videojs('my-video-player');
// 结束事件监听器
player.on('ended', function () {
window.alert('Video Player Ended!');
});
</script>
在上面的代码片段中，我们使用了"结束"监听器，当当前视频播放完毕时，在窗口上显示一段文本。
示例 2
将上述所有事件监听器添加到完整的示例中，如下所示 -
<!DOCTYPE html>
<html>
<head>
<title>Video.JS CallBack Functions for Video Player</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-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
muted="true"
autoplay="true"
fluid="true"
poster="assets/sample.png"
data-setup='{ }'
>
<source
src="https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 使用视频选项初始化视频播放器
let player = videojs('my-video-player');
// loadedData 事件监听器
player.on('loadeddata', function () {
window.alert('Video Player Data Loaded');
});
// 时间更新事件监听器
let alertShown = false;
player.on('timeupdate', function () {
if (player.currentTime() > 15 && !alertShown) {
window.alert('Video has Played for 15 seconds!');
alertShown = true;
}
});
// 加载元数据事件监听器
player.on('loadedmetadata', function () {
window.alert('Video Player MetaData Loaded');
});
// 结束事件监听器
player.on('ended', function () {
window.alert('Video Player Ended!');
});
</script>
</body>
</html>
执行上述代码后，将创建一个视频播放器，该播放器会在视频元数据加载完成、视频数据加载完成以及视频播放结束时显示文本消息。
总结
在本教程中，我们了解了可在 video.js 播放器中使用的各种事件监听器的回调函数，例如 loadeddata、laodedmetadata、timeupdate 和ended。我们还通过完整的示例了解了如何将这些监听器与回调函数结合使用。
