如何在 Video.js 播放器中创建视频循环?
Video.js 是一个著名的在线视频播放器 JavaScript 工具包，可用于创建支持多种视频格式的网页浏览器视频播放器。Video.js 是一个非常灵活且可自定义的库，可用于创建现代网页视频播放器。它支持各种软件包、插件和选项。使用 video.js，您可以根据自己的喜好配置 HTML 视频播放器的任何部分。
在本教程中，我们将在 video.js 播放器中创建视频循环，即重复循环播放视频。通常，视频循环播放是指在播放完成后立即从头开始播放。让我们继续本教程的下一部分，了解如何使用 video.js 实现相同的功能。
在 Video.js 播放器中创建视频循环
要在 video.js 播放器中创建视频循环，我们需要使用 video.js 默认提供的 loop 方法引用。只需设置布尔值 true 或 false 即可打开或关闭此选项引用。如果传递了 true/false 布尔值，loop 方法将循环播放视频。
循环方法引用可以通过以下方式与我们的视频一起使用 -
<video> 元素上的 Loop 属性
在"data-setup"中使用 Loop 和 <video>标签
使用 JS 动态设置循环
让我们快速浏览一下上述所有方法。
<video> 元素的 loop 属性
前提条件 - 假设您知道如何使用 video.js 库创建一个基本的视频播放器。
为了实现视频的无缝循环，我们需要将 <video> 元素的 'loop' 属性设置为 true。参考以下代码片段来实现相同的效果。
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
controls="true"
muted="true"
loop="true"
autoplay="true"
poster=" https://www.cainiaomax.com/videos/sample.png"
data-setup='{}'
>
<source
src="https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
在此代码片段中，我们在 <video> 元素上添加了 loop 属性，并将其值设置为 true，以启用无缝视频循环播放。此属性将确保视频在播放结束后立即再次开始播放。
示例 1
完整的带视频循环播放的视频播放器示例如下所示 -
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Loop Video 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"
fluid="true"
controls="true"
muted="true"
loop="true"
autoplay="true"
poster="https://www.cainiaomax.com/videos/sample.png"
data-setup='{}'
>
<source
src="https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
const player = videojs('my-video-player');
</script>
</body>
</html>
在此示例中，实现了以下内容:
首先，我们使用免费的 CDN URL 在 HTML 代码的 <head> 部分中导入 video.js 所需的 CSS 和 JS 文件。
接下来，我们在 <body> 部分中为视频播放器创建了一个 <video> 元素，并在其中添加了各种类，例如"video.js vjs-default-skin vjs-big-play-centered"和"my-video-player"作为视频"id"。
此 id 用于在下面的 <script> 标签中引用视频播放器。我们还为 <video> 元素使用了一些标准的 HTML 视频选项，例如控件、静音、自动播放和海报。 fluid 属性也用于使视频播放器具有响应式功能。
在 <video> 元素上使用了"Loop"属性来创建视频循环。
如果我们执行上述代码，它将在浏览器中创建一个视频播放器，该播放器将持续循环播放。视频播放结束后，它将从头开始播放。
现在我们已经学习了一种创建视频循环的方法，让我们继续本教程的下一部分，了解下一个方法。
在 <video> 标签的"Data-setup"中使用循环
在本小节中，我们将使用 video.js 的"data-setup"属性中的循环选项引用。将 <video> 元素上"data-setup"属性中的循环选项引用的值设置为 true。元素将创建一个无限循环的视频。
请考虑以下代码片段，使用"data-setup"属性在 video.js 播放器中创建视频循环 -
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="true"
fluid="true"
controls="true"
muted="true"
autoplay="true"
poster="https://www.cainiaomax.com/videos/sample.png"
data-setup='{"loop": true}'
>
<source
src="https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
正如您在上面的代码片段中看到的，我们在 <video> 元素的 'data-setup' 属性中添加了一个循环选项。
由于 data-setup 属性接受 JSON 对象，请确保在 data-setup 属性中传递的是有效的 JSON。
示例 2
在完整示例中使用上面的代码片段创建无缝视频循环的效果如下:-
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Loop Video 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"
fluid="true"
controls="true"
muted="true"
autoplay="true"
poster="https://www.cainiaomax.com/videos/sample.png"
data-setup='{"loop": true}'
>
<source
src="https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
const player = videojs('my-video-player');
</script>
</body>
</html>
正如您在上例中注意到的，我们从 <video> 元素中移除了 loop 属性，并将其用作 'data-setup' 属性中的选项引用。
执行上述代码后，将创建一个视频播放器，该播放器将再次无限循环播放视频。
现在让我们继续讨论最后一个方法，我们将使用 JavaScript 动态创建视频循环。
使用 JS 动态设置循环
在本教程的这一部分，我们将学习如何使用 JavaScript 动态设置 loop 方法。首先，我们需要创建一个包含 loop 属性的"js"对象，该属性的布尔值为 true，然后将其传递给 video.js 播放器初始化。
请考虑以下代码片段，该代码片段用于使用 JavaScript 在 video.js 播放器中动态创建无限视频循环。
<script>
// setting loop option to true
let videoOptions = {
loop: true
}
// 使用视频选项初始化视频播放器
var player = videojs('my-video-player', videoOptions);
</script>
在此代码片段中，我们在视频选项 JSON 对象中添加了"loop"选项，并将其值设置为 true。之后，我们将其传递给视频播放器引用的初始化，该引用的 ID 为"my-video-player"。
示例 3
将上述代码片段添加到完整示例中，代码将如下所示 -
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Loop Video 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"
fluid="true"
controls="true"
muted="true"
autoplay="true"
poster=" https://www.cainiaomax.com/videos/sample.png"
data-setup='{}'
>
<source
src=" https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// setting loop option to true
let videoOptions = {
loop: true
}
// Initializing the video player with video options
var player = videojs('my-video-player', videoOptions);
</script>
</body>
</html>
如果您仔细观察上面的示例，就会发现我们从 <video> 标签中的 'data-setup' 属性中删除了循环方法引用。相反，我们在 <script> 标签中动态地将该方法添加到视频播放器中。
但是，当您在 Web 浏览器中执行上述代码时，将创建与上例相同的视频播放器。并且就像上例一样，我们的视频将无缝循环播放。因此，我们已成功在 video.js 播放器中创建视频循环。
结论
在本教程中，我们了解了如何在 video.js 播放器中创建无限视频循环。我们使用 3 种方法实现了相同的效果。首先，我们在 <video> 元素上使用 'loop' 属性。在第二种方法中，我们在 'data-setup' 属性中传递了 'loop' 选项引用。最后，在最后一种方法中，我们将相同的选项参考设置为视频参考的选项。
