数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究Video.js – 在视频缓冲 50% 时回调函数
在本教程中，我们将展示如何在 video.js 中获取视频的缓冲百分比，并在视频缓冲超过 50% 时使用回调函数。Video.js 是一款知名的在线视频播放器 JavaScript 工具包，用于为各种视频格式创建网页浏览器视频播放器。Video.js 是一个非常灵活且可自定义的库，用于创建现代网页视频播放器。它支持各种包、插件和选项。使用 video.js，可以根据您的喜好配置 HTML 视频播放器的任何部分。
在本教程中，我们将讨论如何在 video.js 中视频缓冲 50% 时调用回调函数。首先，我们将学习如何使用 video.js 获取视频的缓冲百分比，然后我们将添加一个回调函数，在视频缓冲 50% 时触发。让我们继续本教程的下一部分，了解如何使用 video.js 实现相同的功能。
在视频缓冲 50% 时回调函数
视频缓冲是指预加载视频片段以进行流式传输。许多流行的视频流媒体网站都使用此技术来流式传输视频。视频的某些部分或片段会预加载，然后播放视频，这样最终用户就不必等待下载完整的视频。
先决条件 - 假设您知道如何使用 video.js 库创建基本的视频播放器。
视频缓冲百分比是指视频缓冲量占视频总长度的百分比。我们可以使用 video.js 获取视频的缓冲百分比，方法是在视频播放器引用上使用bufferPercentage()方法。此方法返回以十进制格式表示的视频在该特定时间之前缓冲的百分比。
但是，缓冲百分比的值会随着视频的进度而变化，即它会从 0% 缓冲到 100% 缓冲，具体取决于视频播放了多少，用户的带宽速度等。因此，为了跟踪视频的进度，我们需要监听 'progress' 事件
进度事件监听器
每当加载资源时，例如，每当从 URL 或第三方来源加载视频或音频时，进度事件就会在 Web 浏览器中发生，此事件就会触发。因此，进度事件可用于在视频加载进度发生变化时跟踪视频的缓冲百分比。
您可以使用player.on()方法在视频播放器引用上使用 'play' 方法来使用此事件监听器。传递给此事件监听器（作为参数）的回调函数将在视频开始加载后立即执行。
您需要以下代码才能使用进度事件获取 video.js 播放器的缓冲百分比：
<script>
// Initializing the video player
const player = videojs('my-video-player');
// Buffer Percentage of the video with progress event listener
player.on('progress', function () {
const buffPercentage = player.bufferedPercent();
console.log("Buffer Percentage: ", buffPercentage);
});
</script>
在上面的代码片段中，我们使用videojs()方法在 ID 为 'my-video-player' 的<video>元素上创建了一个视频播放器实例。
然后，我们使用进度事件捕获视频加载状态的变化，并在该事件的回调函数中，我们使用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>
// Initializing the video player
const player = videojs('my-video-player');
// Buffer Percentage of the video with progress event listener
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>
// Initializing the video player
const player = videojs('my-video-player');
// Buffer Percentage of the video with progress event listener
player.on('progress', () => {
const buffPercentage = player.bufferedPercent();
console.log("Buffer Percentage", buffPercentage);
// Check if 50% of the video has been buffered
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 视频选项，如 controls、muted 和 poster，并且使用了 fluid 属性来使视频播放器具有响应性。
对于源，我们使用了一个 mp4 视频，我们在源标记中将其 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%，我们会在浏览器窗口中显示警报。我们还查看了一个完全可用的示例。
949 次查看
