如何在 video.js 播放器中播放特定时间的视频?
在本教程中，我们将学习如何在 video.js 播放器中播放特定时间的视频。Video.js 是一款知名且广泛使用的开源 HTML5 视频播放器。它支持多种视频格式，包括 mp4、WebM、Flv 等传统视频格式，以及 YouTube、Vimeo 和 Twitch 等主流视频播放格式。
因此，在本教程中，我们将使用 video.js 播放器播放特定时间的视频。播放特定时间的视频有很多用途，例如分享特定时间的视频。现在，让我们在本教程的下一部分中了解如何更改视频播放器的起始位置。
在 video.js 播放器中从特定时间播放视频
要在 video.js 播放器中从特定时间播放视频，我们将使用视频播放器的"currentTime"方法引用。此方法仅在 video.js 中默认公开。
"currentTime"方法接受一个数值作为输入参数，并从视频开始处跳过该秒数，从特定时间开始播放视频。此外，此选项引用字符串作为输入值，并将视频时间更改为传递的值(前提是该值是有效的秒数)。例如，如果我们想从 30 秒而不是 0 秒开始播放视频，我们可以将值传递给当前时间方法 30。
先决条件 - 假设您知道如何创建视频播放器以及 video.js 库的基本用法。
请考虑以下代码片段，用于在 video.js 播放器中从特定时间(在我们的例子中为 30 秒)播放视频播放器 -
<script>
// 初始化视频播放器
var player = videojs('my-video-player', {});
// 从特定时间开始播放视频
player.currentTime(30);
</script>
正如您在上面的代码示例中注意到的，我们的视频播放器的 ID 为"my-video-player"，并且已初始化，然后我们将视频播放器的初始时间或开始时间设置为 30 秒，并将其作为输入参数传递给 currentTime 方法，该参数为数字。
因此，我们的视频播放器将跳过视频的前 30 秒，并从第 30 秒开始播放。
示例 1
在 video.js 中从特定时间播放视频的完整示例如下所示 -
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Play Video from a Particular Time</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"
controls="true"
muted="true"
autoplay="true"
preload="auto"
fluid="true"
poster="assets/sample.png"
data-setup='{}'
>
<source
src=" https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 初始化视频播放器
var player = videojs('my-video-player', {});
// 从特定时间开始播放视频
player.currentTime(30);
</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 属性已用于使视频播放器具有响应式功能。
在底部的 <script> 标签部分中，我们初始化了 ID 为"my-vide-player"的视频播放器，然后我们在视频播放器上调用了 currentTime 方法，并将值设置为 30 秒。
执行上述示例后，将在 Web 浏览器中创建一个视频播放器，它将从 30 秒(而不是 0 秒)开始播放视频。
因此，通过将值"30"作为数字参数传递给当前时间方法引用，我们成功地从特定时间(即 30 秒)播放了视频。但我们也可以将输入值作为字符串参数传递给此方法。
请考虑以下代码片段，使用将字符串参数传递给 currentTime 方法(本次以 60 秒为例)-
<script>
// 初始化视频播放器
var player = videojs('my-video-player', {});
// 从特定时间点开始播放视频
player.currentTime("60");
</script>
这段代码与上面的代码大致相似，不同之处在于，我们将视频的开始时间设置为字符串("60")，而之前的是数值(30)。除此之外，其他部分完全相同。
示例 2
将上面的代码添加到完整示例中，从 60 秒开始播放视频，如下所示 -
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Play Video from a Particular Time</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"
controls="true"
muted="true"
autoplay="true"
preload="auto"
fluid="true"
width=580
height=350
data-setup='{}'
>
<source
src="https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 初始化视频播放器
var player = videojs('my-video-player', {});
// 从特定时间点开始播放视频
player.currentTime("60");
</script>
</body>
</html>
在上面的示例中，在 <script> 部分，您会注意到当前时间方法的输入参数类型已从字符串更改为数字，并且传递给此方法的值是 60 秒。
执行时，此示例还将创建一个几乎类似的视频播放器，它将从特定时间(即 60 秒而不是 0 秒)开始播放视频。
以上就是在 video.js 播放器中利用当前时间方法从特定时间播放视频的两种方法。
请注意，传递给 video.js currentTime 方法的起始时间值不能超过视频的总时长。例如，对于只有 5 分钟或 300 秒的视频，您不能将 1000 秒作为值传递。在这种情况下，视频将从结尾开始播放，也就是说，您只会看到一个重播按钮，就好像视频已经播放完毕一样。
结论
在本教程中，我们了解了如何使用 video.js 从特定时间点播放视频。我们通过使用 video.js 的默认选项引用(称为 currentTime 方法)实现了这一点。我们还通过一个完整的示例，了解了该方法的两种输入参数类型(字符串和数字)。
