数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学video.js播放器的回调函数
在本教程中，我们将学习各种事件监听器以及如何将它们与video.js播放器的回调函数一起使用。Video.js是一个流行的开源库，用于在浏览器中创建视频播放器。使用video.js，您可以轻松调整视频播放器的每一个细节。除此之外，video.js还提供了许多默认事件，例如play、pause、playing、loadedmetadata、timeupdate、canplaythrough、loadeddata等。
因此，在本教程中，我们将学习video.js中各种事件监听器的回调函数。回调函数非常重要，因为它们在发生特定事件时会被触发。因此，我们可以借助各种回调函数执行不同的操作。现在让我们进入文章的下一部分，了解各种事件及其回调函数。
video.js播放器的回调函数
回调函数是指作为输入参数传递给另一个函数的函数。但是，回调函数广泛用于在异步操作（如事件）之后继续执行代码。事件监听器是在触发特定事件时调用的函数或方法。例如，事件可以是播放视频或暂停视频等。通过使用事件监听器和回调函数，我们可以实现我们想要的功能。
基本上，事件监听器会持续等待一些用户交互发生，例如播放视频、暂停视频，然后在事件触发时执行相应的回调函数。
如果我们具体谈论video.js，您可以获得许多事件监听器，可用于更改视频播放器的状态。例如，play、pause、resume等。
在本篇文章中，我们将逐一介绍以下事件及其回调函数：
LoadedData事件
LoadedMetaData事件
Time Update事件
Ended事件
让我们快速浏览一下每一个事件。
LoadedData事件
当加载视频的当前帧时，将触发“loadeddata”事件的回调函数。当前帧通常是视频的第一帧。因此，当加载当前帧但未加载下一帧时，将触发loadeddata事件的回调函数。
先决条件 - 假设您知道如何使用video.js库创建一个基本的视频播放器，让我们学习如何使用video.js捕获“loadeddata”事件。
您可以使用“loadeddata”作为video.js播放器引用的输入，使用player.on()方法来捕获“loadeddata”事件。它将事件和回调函数绑定在一起。它通常接受两个参数作为输入，第一个是事件名称（在本例中为loadeddata），第二个参数是回调函数，只要定义的事件被触发，该函数就会被调用。因此，传递给“loadeddata”事件监听器的回调函数将在视频播放器的当前帧（第一帧）加载完毕时执行。
您可以使用以下代码来捕获“loadeddata”事件并触发回调函数以在浏览器窗口中发出警报：
<script>
// Initializing the video player
const player = videojs('my-video-player');
// loadedData event listener
player.on('loadeddata', function () {
window.alert('Video Player Data Loaded');
});
</script>
在前面的代码片段中，我们使用“player.on()”方法在我们的视频播放器引用上使用了“loadeddata”事件监听器，以便在视频播放器的当前帧加载完毕时发出“Video Player Data Loaded”警报。
示例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://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
const player = videojs('my-video-player');
// loadedData event listener
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等类。
video元素的“id”（即“my-video-player”）稍后在代码的<script>部分中用于为此id创建一个视频播放器。
我们还使用了<video>元素的一些标准HTML视频选项，例如controls、muted和poster。
在底部的<script>标签中，使用“loadeddata”事件监听器来显示“Video Player Data Loaded”消息，使用回调函数在浏览器窗口中显示，只要加载视频的当前帧。
执行上述代码将在浏览器中创建一个视频播放器，当加载视频的当前帧或第一帧时，它将在窗口上显示一条警报消息。
现在我们知道了如何在“loadeddata”事件监听器中使用回调函数，让我们进入本文的下一部分，了解“loadedmetadata”监听器。
LoadedMetaData事件
当浏览器加载视频的元数据（例如持续时间、尺寸、文本轨道等）时，将调用“Loadedmetadata”事件监听器的回调函数。当我们从URL或第三方API加载视频时，此监听器非常有用。在这些情况下，我们需要等待视频加载完毕，然后再对播放器进行任何更改。
要使用此监听器，我们需要使用“loadedmetadata”作为video.js播放器引用的输入，使用“player.on()”方法。
您可以使用以下代码来显示一条消息，只要使用带有回调函数的“loadedmetadata”事件加载视频的元数据：
<script>
// Initializing the video player
let player = videojs('my-video-player');
// Loaded Meta Data Event listener
player.on('loadedmetadata', function () {
window.alert('Video Player Meta Data Loaded');
});
</script>
在上面的代码片段中，使用了“loadedmetadata”事件监听器来等待视频元数据加载完毕，然后再发出文本警报。即使在“play”事件监听器之前，也会调用此事件的回调函数，因为视频需要先加载才能播放。
现在，让我们继续学习下一个事件监听器的回调函数。
Time Update事件
“Timeupdate”事件监听器的回调函数是最重要的监听器之一，因为它每次更改视频的当前播放时间时都会被触发。因此，当视频正在播放时，此事件每15-250毫秒触发一次。此事件的回调函数可以与“timeupdate”一起用作player.on方法的输入。
考虑以下代码片段，使用带有回调函数的“timeupdate”事件监听器在视频超过15秒标记时显示消息：
<script>
// Initializing the video player
let player = videojs('my-video-player');
// Time Update event listener
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()方法获取视频播放器的当前时间。
现在，让我们继续学习ended事件监听器的回调函数。
Ended监听器
当我们的视频结束时，将调用“Ended”事件监听器的回调函数。当当前视频结束时，它可以用于显示重播按钮或播放下一个视频。要使用此监听器，我们需要使用“ended”作为video.js播放器引用的输入，使用“player.on()”方法。
让我们在视频结束时发出消息，使用带有回调函数的“ended”监听器：
<script>
// Initializing the video player with video options
let player = videojs('my-video-player');
// Ended Event listener
player.on('ended', function () {
window.alert('Video Player Ended!');
});
</script>
在上面的代码片段中，我们使用了“ended”监听器，当当前视频播放完毕时，在窗口上显示文本。
示例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://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
let player = videojs('my-video-player');
// loadedData event listener
player.on('loadeddata', function () {
window.alert('Video Player Data Loaded');
});
// Time Update event listener
let alertShown = false;
player.on('timeupdate', function () {
if (player.currentTime() > 15 && !alertShown) {
window.alert('Video has Played for 15 seconds!');
alertShown = true;
}
});
// Loaded Meta Data Event listener
player.on('loadedmetadata', function () {
window.alert('Video Player MetaData Loaded');
});
// Ended Event listener
player.on('ended', function () {
window.alert('Video Player Ended!');
});
</script>
</body>
</html>
执行上述代码后，将创建一个视频播放器，该播放器将在视频元数据加载时、视频数据加载时以及视频结束时显示文本消息。
结论
在本教程中，我们了解了video.js播放器中可使用的各种事件监听器的回调函数，例如loadeddata、loadedmetadata、timeupdate和ended。我们还通过完全可运行的示例了解了如何使用这些监听器及其回调函数。
2K+浏览量
