数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 video.js 播放器中从特定时间播放视频？
在本教程中，我们将学习如何在 video.js 播放器中从特定时间播放视频。Video.js 是一个知名且广泛使用的开源 HTML5 视频播放器。它使您能够为各种视频格式开发视频播放器，包括传统的视频格式（如 mp4、WebM、Flv 等）以及当前的视频播放格式（如 YouTube、Vimeo 和 Twitch）。
因此，在本教程中，我们将从特定时间在 video.js 播放器中播放视频。从特定时间开始或播放视频有很多应用，例如从特定时间共享视频。现在让我们了解如何在教程的下一部分中更改视频播放器的起始位置。
在 video.js 播放器中从特定时间播放视频
为了在 video.js 播放器中从特定时间播放视频，我们将使用 video 播放器的名为“currentTime”的方法引用。此方法默认情况下仅由 video.js 公开。
“currentTime”方法将数值作为输入参数，并跳过从视频开始算起的这些秒数，以便从特定时间开始播放我们的视频。此外，此选项将字符串引用作为输入值，并将我们的视频时间更改为传递的值，前提是该值是有效的秒数时间。例如，如果我们希望从第 30 秒而不是第 0 秒开始播放视频，我们可以将值 30 作为参数传递给 currentTime 方法。
先决条件 - 假设您知道如何创建视频播放器以及 video.js 库的基本用法。
请考虑以下代码片段，用于在 video.js 播放器中从特定时间（对于我们的案例为 30 秒）播放视频：
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime(30);
</script>
正如您在上面的代码示例中注意到的，我们的视频播放器将 id 设置为“my-video-player”并已初始化，然后我们通过将其作为数字输入参数传递给 currentTime 方法，将视频播放器的初始时间或开始时间设置为 30 秒。
因此，我们的视频播放器将跳过视频的前 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://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime(30);
</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 属性用于使视频播放器具有响应性。
在底部的 <script> 标签部分，我们的视频播放器（id 为“my-vide-player”）已初始化，然后我们对视频播放器使用了 currentTime 方法，其值为 30 秒。
在执行上述示例时，将在 Web 浏览器中创建一个视频播放器，该播放器将从第 30 秒标记而不是第 0 秒开始播放我们的视频。
因此，我们已成功地通过将值“30”作为数值参数传递给 currentTime 方法引用，从特定时间（即 30 秒）播放了我们的视频。但我们也可以将输入值作为字符串参数传递给此方法。
请考虑以下代码片段，以使用将字符串参数传递给 currentTime 方法（这次以 60 秒为例）：
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
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://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
var player = videojs('my-video-player', {});
// starting a video from a particular time
player.currentTime("60");
</script>
</body>
</html>
在上面的示例中，在 <script> 部分，您会注意到 currentTime 方法的输入参数类型已从数字更改为字符串，并且这次传递给此方法的值为 60 秒。
执行后，此示例也将创建一个几乎相同的视频播放器，该播放器将从特定时间（即 60 秒）而不是 0 秒开始播放我们的视频。
因此，这些是您可以利用 currentTime 方法在 video.js 播放器中从特定时间播放视频的两种方法。
请注意，传递给 video.js currentTime 方法的开始时间值不能超过视频的总长度。例如，对于长度仅为 5 分钟或 300 秒的视频，您不能将 1000 秒作为值传递。在这种情况下，视频将从末尾开始播放，即您只会看到一个重播按钮，就像视频已经完全播放过一样。
结论
在本教程中，我们了解了如何使用 video.js 从特定时间播放视频。我们通过使用 video.js 的默认选项引用（称为 currentTime 方法）来实现这一点。我们还借助每个方法的完整工作示例，了解了此方法的两种类型的输入参数（字符串和数字）。
3K+ 浏览量
