如何在 Video.js 播放器中加速/减速视频?
在本教程中，我们将学习如何使用 video.js 加速或减速视频。Video.js 是一个广泛使用的开源 HTML5 视频播放器框架。它支持在各种屏幕尺寸的平台上播放视频，例如台式电脑和移动设备。该项目始于 2010 年中期，目前已有数百名贡献者，并在超过 45 万个网站上使用。除此之外，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
我们需要将数据设置中的播放速率数组传递给我们的 <video> 元素。请考虑下面的代码片段，为我们的视频添加播放速度控制器。
<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 个值的 playingRates 数组，分别为 0.25、0.5、1、1.5、2。选择任意值都会增加或减少视频播放速度。如果选择的值为 0.25 倍，则视频速度将降至 25%，而选择 2 倍则视频速度将升至 200%。
您可以向播放速率数组传递任意多个值，但请确保所有值都严格大于 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://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
var player = videojs('my-video');
</script>
</body>
</html>
在上面的代码中，我们完成了以下操作:
首先，我们在 <head> 标签中使用 CDN URL 导入了 video.js CSS 和 js 文件。
之后，在 <body> 标签内，我们创建了一个 <video> 元素，其 class="video.js vjs-default-skin vjs-big-play-centered"，id 为 'my-video'。我们在下面的 <script> 标签中使用了这个 id 来引用播放器。我们还添加了一些标准的 HTML 视频选项，例如控件、静音、自动播放、宽度、高度等。
在 <video> 元素的 'data-setup' 属性中标签中，我们传递了播放速率数组，该数组负责在视频中添加视频速度控制器。
执行上述代码后，将在网页浏览器中创建一个视频播放器，其控制栏中会有一个按钮，其中包含 2 倍、1.5 倍、1 倍、0.5 倍和 0.25 倍等选项。选择大于 1 的值(1.5 倍或 2 倍)将增加视频速度，而点击 0 到 1 之间的值(0.5 倍到 0.25 倍)将降低视频速度。
现在，在本教程的后续部分中，我们将学习如何使用 JavaScript 中的视频选项方法实现相同的效果。
在 JavaScript 的视频选项中使用播放速率
为了使用 JavaScript 在视频播放器中实现相同的视频播放速度控制器，我们需要创建一个包含 playingRates 数组的 JS 对象，然后将其传递给 video.js 播放器引用。
请考虑以下代码片段，该代码片段使用 JavaScript 动态地向我们的视频播放器添加速度控制器。
<script>
// 将播放速率添加到选项
let videoOptions = {
"playbackRates": [0.25, 0.5, 1, 1.5, 2]
}
// 使用视频选项初始化视频播放器
var player = videojs('my-video', videoOptions);
</script>
在上面的代码片段中，我们在 videoOptions 对象中添加了一个包含 5 个不同速度值的播放速率数组，并将其传递给 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://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 将播放速率添加到选项中
let videoOptions = {
"playbackRates": [0.25, 0.5, 1, 1.5, 2]
}
// 使用视频选项初始化视频播放器
var player = videojs('my-video', videoOptions);
</script>
</body>
</html>
如果您仔细观察上面的示例，就会发现我们从 <video> 标签中的"data-setup"属性中移除了播放速率。相反，我们在 <script> 标签中动态添加了播放速率作为视频选项。
但是，当您在 Web 浏览器中执行上述代码时，将创建与上述示例相同的视频播放器。它将具有相同的 5 个速度乘数值，即 0.25 倍、0.5 倍、1 倍、1.5 倍和 2 倍。选择任何一个乘数都会相应地加快或减慢视频速度。理想情况下，这两种方法都提供相同的功能，但调用函数的方式却大相径庭。"datasetup"在代码的 HTML 部分完成，而"videoOptions"在 js 部分完成。因此，使用上述任何一种方法，您都可以在 video.js 播放器中加速或减速视频。
结论
在本教程中，我们学习了如何使用 video.js 加速或减速视频。我们使用 video.js 原生提供的 playingRates 方法实现了相同的功能。之后，我们通过示例了解了两种使用播放速率方法的方法。
