数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 Video.js 播放器中创建视频循环？
Video.js 是一个知名的在线视频播放器 JavaScript 工具包，用于为各种视频格式创建 Web 浏览器视频播放器。Video.js 是一个非常灵活且可定制的库，用于创建现代 Web 视频播放器。它支持各种软件包、插件和选项。使用 video.js，可以根据自己的喜好配置 HTML 视频播放器的任何部分。
在本教程中，我们将创建一个 Video.js 播放器中的视频循环，即重复播放视频。通常，循环视频是在视频完成后从开头重新播放。让我们继续本教程的下一部分，了解如何使用 video.js 实现相同的功能。
在 Video.js 播放器中创建视频循环
为了在 Video.js 播放器中创建视频循环，我们需要使用 Video.js 默认提供的循环方法引用。只需设置布尔值 true 或 false，即可切换此选项引用。如果传递布尔值 true/false，循环方法将重复循环播放我们的视频。
循环方法引用可以以下列方式与我们的视频一起使用：
在 <video> 元素上使用循环属性
在 <video> 标签中使用 'data-setup' 内部的循环
使用 JS 动态设置循环
让我们快速浏览一下上述所有方法。
在 <video> 元素上使用循环属性
先决条件 - 假设您知道如何使用 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://tutorialspoint.com/videos/sample.png" data-setup='{}' > <source src="https://tutorialspoint.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://tutorialspoint.com/videos/sample.png" data-setup='{}' > <source src="https://tutorialspoint.com/videos/sample720.mp4" type="video/mp4" > </video> <script> // Video Player Initialization const player = videojs('my-video-player'); </script> </body> </html>
在此示例中，实现了以下内容：
首先，我们使用了免费的 CDN URL 将 Video.js 的所需 CSS 和 JS 文件导入到 HTML 代码的 <head> 部分。
接下来，我们在 <body> 部分内为我们的视频播放器创建了一个 <video> 元素，其中包含各种类，例如 'video.js vjs-default-skin vjs-big-play-centered' 和 'my-video-player' 作为视频 'id'。
此 id 已用于在下面的 <script> 标签中引用视频播放器。我们还为 <video> 元素使用了一些标准的 HTML 视频选项，如 controls、muted、autoplay 和 poster。fluid 属性也用于使视频播放器响应式。
在 <video> 元素上使用了 'Loop' 属性来创建视频循环。
如果我们执行上述代码，它将在浏览器中创建一个视频播放器，该播放器将持续不断地循环播放。视频结束后，它将从开头重新开始播放。
现在我们已经学习了一种创建视频循环的方法，让我们继续本教程的下一部分，了解下一种方法。
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
在 <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://tutorialspoint.com/videos/sample.png" data-setup='{"loop": true}' > <source src="https://tutorialspoint.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://tutorialspoint.com/videos/sample.png" data-setup='{"loop": true}' > <source src="https://tutorialspoint.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 动态设置循环方法。首先，我们需要创建一个包含布尔值为 true 的循环属性的“js”对象，然后将其传递给 Video.js 播放器初始化。
请考虑以下代码片段，以使用 JavaScript 在 Video.js 播放器中动态创建无限视频循环。
<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>
在此代码片段中，我们在视频选项 JSON 对象中添加了 'loop' 选项，并将其值设置为 true。稍后，我们将其传递给视频播放器引用的初始化，该引用具有 'my-video-player' 作为 id。
示例 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://tutorialspoint.com/videos/sample.png" data-setup='{}' > <source src=" https://tutorialspoint.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' 选项引用。最后，在最后一种方法中，我们将相同的选项引用设置为视频引用的选项。
1K+ 次观看
