Video.js – 当视频缓冲达到 50% 时回调函数
在本教程中，我们将展示如何在 video.js 中获取视频的缓冲百分比，并在视频缓冲超过 50% 时使用回调函数。Video.js 是一个著名的在线视频播放器 JavaScript 工具包，用于创建支持各种视频格式的 Web 浏览器视频播放器。Video.js 是一个非常灵活且可定制的库，可用于创建现代 Web 视频播放器。它支持各种软件包、插件和选项。使用 video.js，您可以根据自己的喜好配置 HTML 视频播放器的任何部分。
在本教程中，我们将在 video.js 中当视频缓冲达到 50% 时调用回调函数。首先，我们将学习如何使用 video.js 获取视频的缓冲百分比，然后我们将添加一个在视频缓冲达到 50% 时触发的回调函数。让我们继续本教程的下一部分，了解如何使用 video.js 实现相同的功能。
当视频缓冲达到 50% 时回调函数
视频缓冲是指预加载视频片段以进行流式传输。许多流行的视频流网站都已使用此技术进行流式传输。视频的某些部分或片段会预加载并播放，这样最终用户就无需等待下载完整个视频。
先决条件 - 假设您知道如何使用 video.js 库创建一个基本的视频播放器。
视频缓冲百分比是指缓冲的视频占视频总长度的比例。我们可以通过使用 video.js 引用中的 bufferPercentage() 方法获取视频的缓冲百分比。此方法以十进制格式返回截至特定时间的视频缓冲百分比。
但是，缓冲百分比的值会随着视频的进度而变化，即它会从 0% 缓冲到 100% 缓冲，具体取决于视频的播放量、用户的带宽速度等。因此，为了跟踪缓冲百分比随视频进度的变化，我们需要监听"progress"事件。
Progress 事件监听器
每当资源加载时，即从 URL 或第三方来源加载视频或音频时，都会触发此事件。因此，只要视频的加载进度发生变化，就可以使用 progress 事件来跟踪视频的缓冲百分比。
您可以通过在 video.js 播放器的引用上使用"play"方法，并使用 player.on() 方法来使用此事件监听器。传递给此事件监听器的回调函数(作为参数)将在视频开始加载时立即执行。
您需要以下代码来使用 progress 事件获取 video.js 播放器上的缓冲区百分比 -
<script>
// 初始化视频播放器
const player = videojs('my-video-player');
// 使用 progress 事件监听器获取视频的缓冲区百分比
player.on('progress', function () {
const buffPercentage = player.bufferedPercent();
console.log("Buffer Percentage: ", buffPercentage);
});
</script>
在上面的代码片段中，我们使用 videojs() 方法在 id 为"my-video-player"的 <video> 元素上创建了一个视频播放器实例。
然后，我们使用 progress 事件来捕获视频加载状态的变化，并在该事件的回调函数中使用 bufferPercent() 方法获取视频缓冲的最新百分比。
执行上述代码后，视频预加载完成后，视频缓冲百分比将记录在浏览器控制台中。您将看到多个类似这样的日志 -
Buffer Percentage: 0 Buffer Percentage: 0.010983981771910626 Buffer Percentage: 0.02974826966353168 Buffer Percentage: 0.05308923092884176 Buffer Percentage: 0.0733713463484793 Buffer Percentage: 0.09037201866684796 Buffer Percentage: 0.1020040768163907
这些是视频预加载时的多个缓冲百分比。由于这些值是小数，因此缓冲百分比 0.1 表示视频已缓冲 10%。
现在，我们已经了解了如何获取视频的缓冲百分比，现在可以检查视频百分比是否高于 50%(或 0.5 个小数)，并调用函数或基于此执行某些任务。
请考虑以下代码片段，当视频缓冲百分比超过 50% 时，会在浏览器窗口中显示文本提醒:
<script>
// 初始化视频播放器
const player = videojs('my-video-player');
// 使用 progress 事件监听器获取视频的缓冲百分比
player.on('progress', () => {
const buffPercentage = player.bufferedPercent();
console.log("Buffer Percentage", buffPercentage);
if (buffPercentage > 0.5) {
window.alert('50% of the video has been buffered.');
}
});
</script>
如上代码所示，我们使用 bufferedPercent 方法获取视频的缓冲百分比。然后，我们检查缓冲百分比是否大于 0.5，即视频缓冲的百分比是否超过 50%。如果是，我们会在缓冲窗口中弹出"视频已缓冲 50%"的提醒。
除了弹出提醒之外，您还可以使用回调函数执行特定任务。
示例 1
将上述代码片段与完整示例结合使用，如果视频缓冲的百分比超过 50%，则会在浏览器窗口中弹出文本提醒，如下所示 -
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Buffer Percentage Example</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://vjs.zencdn.net/v/oceans.mp4"
type="video/mp4"
>
</video>
<script>
// 初始化视频播放器
const player = videojs('my-video-player');
// 带有进度事件监听器的视频缓冲百分比
player.on('progress', () => {
const buffPercentage = player.bufferedPercent();
console.log("Buffer Percentage", buffPercentage);
// 检查视频是否已缓冲 50%
if (buffPercentage > 0.5) {
window.alert('50% of the video has been buffered.');
}
});
</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 视频选项，例如控件、静音和海报，并使用了 fluid 属性使视频播放器具有响应式功能。
对于源，我们使用了 mp4 视频，并在 source 标签中将其 MIME 类型指定为 video/mp4。
在 <script> 标签中，已为 ID 为"my-video-player"的 <video> 元素初始化了视频播放器。
初始化视频播放器后，我们使用 player.on 方法调用事件监听器。使用的事件是"progress"，它负责在视频缓冲或预加载时调用回调函数。
然后，我们在视频播放器实例上使用 bufferedPercent() 方法获取当前视频缓冲的百分比，如果视频缓冲超过 50%，浏览器窗口中会显示一个文本。
在 Web 浏览器中执行上述代码时，如果视频缓冲超过 50%，则会显示"视频已缓冲 50%。"。因此，我们成功地学会了如何在 video.js 中处理视频缓冲 50% 时的事件。
总结
在本教程中，我们了解了如何在 video.js 中捕获视频缓冲 50% 时的事件。我们使用 video.js 公开的 bufferedPercent() 方法来获取视频的当前缓冲百分比。除此之外，我们还使用了"progress"事件监听器来捕捉视频缓冲状态的变化。最后，如果视频缓冲百分比超过 50%，我们会在浏览器窗口中显示一个警告。我们还查看了一个完整的示例。
