数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在 Video.js 播放器中加快/减慢视频速度？
在本教程中，我们将学习如何使用 video.js 加快或减慢视频速度。Video.js 是一个广泛使用的开源 HTML5 视频播放器框架。它允许在各种平台（例如台式电脑和移动设备）的不同屏幕尺寸上播放视频。该项目始于 2010 年中期，目前已有数百名贡献者，并在超过 450,000 个网站上使用。除此之外，Video.js 还提供了多种选项，可根据您的喜好更改和自定义视频播放器。
在本教程中，我们将通过 video.js 加快和减慢视频速度来自定义我们的视频播放器。加快和减慢速度是一个非常重要的功能，在许多情况下都非常有用，用户需要更改视频速度。在我们的视频播放器中提供增加或减少视频速度的选项将真正增强用户体验。因此，请在下一节中学习如何在 video.js 中更改视频速度。
如何在 Video.js 播放器中加快/减慢视频速度？
在本教程的这一部分中，我们将了解如何在 video.js 中添加一个按钮来更改视频的播放速度。每当最终用户选择一个速度时，我们的视频也会以该速度播放。
先决条件 - 假设您知道如何使用 video.js 库创建基本的视频播放器。
为了更改视频的速度，我们将使用一个名为“playbackRates”的方法，这是 video.js 独有的默认方法。我们需要将速度倍数传递给此方法，其余所有内容都将由 video.js 自行处理。
例如，如果我们传递值 1.5，则当从视频播放器中选择此速度时，我们的视频将以 1.5 倍的速度播放；同样，如果选择的值为 0.5，则我们的视频将以半速 (50%) 播放。
现在，我们已经了解了 playbackRates，要在本地代码中使用此方法，我们有两个选项。我们可以将其用于“data-setup”属性内，也可以将其作为视频选项传递给我们的视频播放器引用。让我们借助示例了解这两种方法。
在 HTML 中使用“data-setup”中的 playbackRates
我们需要将 playbackRates 数组传递到我们<video>元素的 data-setup 属性中。请考虑以下代码片段，用于向我们的视频添加播放速度控制器。
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
preload="auto"
width="1280"
height="720"
data-setup='{"playbackRates": [0.25, 0.5, 1, 1.5, 2]}'
>
如您所见，我们在“data-setup”属性中添加了包含 5 个值（即 0.25、0.5、1、1.5、2）的 playbackRates 数组。选择任何值都会加快或减慢视频的速度。如果选择的值是 0.25x，则视频速度将降至 25%；如果选择的值是 2x，则视频速度将加快至 200%。
您可以向 playbackRates 数组传递任意多个值，但请确保所有值都严格大于 0，即值必须始终为正。
要加快视频速度，请向数组传递大于 1 的值，例如 1.5、2、2.5 等。同样，要减慢视频速度，请传递 0 和 1 之间的值，例如 0.25、0.5、0.75 等。
示例 1
在我们的视频播放器中添加视频速度控制器后，完整的代码示例将如下所示。
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Speed Up/Down Video Tutorial</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"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
preload="auto"
width="560"
height="340"
data-setup='{"playbackRates": [0.25, 0.5, 1, 1.5, 2]}'
>
<source
src="https://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
var player = videojs('my-video');
</script>
</body>
</html>
在上面的代码中，我们执行了以下操作：
首先，我们使用 CDN URL 在<head>标签中导入了 video.js CSS 和 js 文件。
然后，在<body>标签内，我们创建了一个<video>元素，其类为“video.js vjs-default-skin vjs-big-play-centered”，ID 为“my-video”。我们在下面的<script>标签中使用了此 ID 来引用播放器。我们还添加了一些标准的 HTML 视频选项，例如 controls、muted、autoplay、width、height 等。
在<video>标签的“data-setup”属性中，我们传递了 playbackRates 数组，该数组负责在我们的视频中添加视频速度控制器。
执行上述代码后，将在我们的 Web 浏览器中创建一个视频播放器，其控制栏中将有一个按钮，其中包含 2x、1.5x、1x、0.5 和 0.25x 等选项。选择大于 1 的值 (1.5x 或 2x) 将加快视频速度，而点击 0 和 1 之间的值 (0.5x 和 0.25x) 将减慢视频速度。
现在，让我们学习如何在教程的后续部分中使用 JavaScript 中的 video 选项方法来实现相同的功能。
在 JavaScript 中使用 video 选项中的 playbackRates
为了使用 JavaScript 在我们的视频播放器中实现相同的视频播放速度控制器，我们需要创建一个包含 playbackRates 数组的 JS 对象，然后将其传递给 video.js 播放器引用。
请考虑以下代码片段，该片段演示如何使用 JavaScript 动态地向我们的视频播放器添加速度控制器。
<script>
// Adding playbackRates to options
let videoOptions = {
"playbackRates": [0.25, 0.5, 1, 1.5, 2]
}
// Initializing the video player with video options
var player = videojs('my-video', videoOptions);
</script>
在上面的代码片段中，我们在 videoOptions 对象中添加了包含 5 个不同速度值的 playbackRates 数组，并将其传递给 ID 为“my-video”的视频播放器的初始化。
示例 2
将代码片段添加到上面的示例中将使代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Speed Up/Down Video Tutorial</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">
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
muted="true"
autoplay="true"
poster="assets/sample.png"
preload="auto"
width="560"
height="340"
data-setup='{}'
>
<source
src="https://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Adding playbackRates to options
let videoOptions = {
"playbackRates": [0.25, 0.5, 1, 1.5, 2]
}
// Initializing the video player with video options
var player = videojs('my-video', videoOptions);
</script>
</body>
</html>
如果您仔细查看上面的示例，我们会发现我们已从<video>标签的“data-setup”属性中删除了 playbackRates。相反，我们在<script>标签中动态地将 playbackRates 添加为 video 选项。
但是，当您在 Web 浏览器中执行上述代码时，将创建与上述示例相同的视频播放器。它将具有相同的 5 个速度倍数，即 0.25x、0.5、1x、1.5x 和 2x。选择任何倍数都会相应地加快或减慢视频速度。理想情况下，这两种方法都提供相同的功能，但调用函数是唯一的区别。“datasetup”在代码的 HTML 部分完成，而“videoOptions”在 js 部分完成。因此，使用上述任何一种方法，您都可以加快或减慢 video.js 播放器中的视频速度。
结论
在本教程中，我们学习了如何使用 video.js 加快或减慢视频速度。我们使用了 video.js 原生提供的 playbackRates 方法来实现相同的功能。稍后，我们通过每个方法的示例展示了两种使用 playbackRates 方法的方法。
1000+ 次浏览
