数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在 Video.js 中获取当前播放时间？
Video.js 是一个库，允许您创建一个现代化外观且先进的视频播放器，支持所有传统的视频格式，如 mp4、Flv 等。此外，它还支持最新的视频格式，如 YouTube、Vimeo 等。在本教程中，我们将了解如何获取使用 Video.js 创建的视频播放器的当前播放时间。
Video.js 提供了灵活的控制能力，即使是视频播放器的细微方面也能轻松掌控。因此，在本教程中，我们将尝试获取视频播放器的当前播放时间。获取当前播放时间非常有用，因为它有很多应用，例如获取当前播放时间并在特定时间调用函数，或在特定时间暂停音乐播放器。因此，让我们继续本教程的下一部分，了解如何获取视频播放器的当前播放时间。
在 Video.js 中获取当前播放时间
前提条件 − 假设您知道如何使用 Video.js 库创建基本的视频播放器。
为了获取 Video.js 播放器的当前播放时间，我们将使用 Video.js 的默认方法。该方法称为 currentTime，它负责以秒为单位显示视频播放器的时间。使用此方法非常简单直接。我们只需要在视频播放器引用上调用 currentTime() 方法即可。
currentTime 方法不能在代码的 <html> 部分的“data-setup”属性中使用。它需要在代码的 <script> 部分中对播放器引用进行调用。
请考虑以下代码片段，该片段使用 Video.js 来警告视频播放器的当前播放时间：
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Alerting the current Time of a video player
let currentTime = player.currentTime();
window.alert(`currentTime : ${currentTime}`);
</script>
在这里，我们为 id 为“my-video-player”的 <video> 元素创建了一个视频播放器。然后，我们在播放器上使用 currentTime 方法来获取视频播放器的当前时间（以秒为单位）。在最后一行，我们在浏览器窗口中警告了视频的当前时间。
示例 1
在完整的示例中使用上述代码片段来获取视频播放器的当前时间，看起来像这样：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Current Playback Time 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"
autoplay="true"
preload="true"
controls="true"
muted="true"
fluid="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
let player = videojs('my-video-player');
// Alerting the current Time of a video player
let currentTime = player.currentTime();
window.alert(`currentTime : ${currentTime}`);
</script>
</body>
</html>
说明
在此代码示例中，我们实现了以下内容：
首先，我们使用 CDN URL 在代码的 <head> 标记中导入了 Video.js 的 CSS 和 JS 文件。
接下来，我们在 <body> 部分内为我们的视频播放器创建了一个 <video> 元素，它具有各种类，例如“video.js vjs-default-skin vjs-big-play-centered”和“my-video-player”（作为视频“id”）。
我们还对 <video> 元素使用了一些标准的 HTML 视频选项，例如 controls 和 poster，并且我们还使用了 fluid 属性来使我们的视频播放器具有响应性。
在 <script> 标记部分，我们使用 id 为“my-video-player”初始化了一个视频播放器，然后使用 currentTime 方法获取当前时间，然后使用 window.alert 方法将其显示在 Web 浏览器中。
当您在 Web 浏览器中执行上述代码时，您会注意到您会收到一个“currentTime: 0”的警报，然后您的视频播放器加载。Video.js 正在警告视频播放器的当前时间，在本例中为 0 秒。但这并不太有用，因为它每次我们重新加载视频播放器时都只显示 0 秒。
问题在于 currentTime 方法是在创建视频播放器时立即调用的。因此，此时播放时间仅为 0 秒。
假设您希望在视频播放时连续查看当前时间。为此，我们可以将“currentTime”方法与“timeupdate”事件监听器结合使用，该监听器每 15-200 毫秒更新时间变化。我们将记录每次“timeupdate”事件的视频播放器的当前播放时间。
请考虑以下代码片段，该片段在视频播放时间发生变化时立即记录当前播放时间：
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Using time update event listener
player.on('timeupdate', function () {
// Get current time and log
let currentTime = player.currentTime();
console.log("Current Time of the Video Player: ", currentTime)
});
</script>
在此代码片段中，我们首先使用 id 为“my-video-player”的 <video> 元素初始化我们的视频播放器。接下来，我们使用 player.on() 方法使用“timeupdate”事件监听器。在“timeupdate”方法中，我们使用 player.currentTime() 方法获取视频播放器的当前播放时间，然后最后将其记录在 Web 浏览器的控制台中。
示例 2
我们完整的示例，用于在每次时间更新事件时获取视频播放器的当前播放时间，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Current Playback Time 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"
autoplay="true"
preload="true"
controls="true"
muted="true"
fluid="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
let player = videojs('my-video-player');
// Using time update event listener
player.on('timeupdate', function () {
// Get current time and log
let currentTime = player.currentTime();
console.log("Current Time of the Video Player: ", currentTime)
});
</script>
</body>
</html>
说明
如您所见，在 <script> 部分，我们使用了 time update 事件监听器，该监听器每 15-250 毫秒触发一次，这意味着 time update 监听器内的函数将每秒触发 3-4 次。每次触发 time update 函数时，我们都会获取视频播放器的当前时间并将其记录到浏览器控制台中。
当上述代码在 Web 浏览器中执行时，将创建一个视频播放器，并且在浏览器的控制台选项卡中，您将每秒至少收到三到四次视频的当前播放时间。因此，控制台选项卡将有多个条目，例如“视频播放器的当前时间：1.527636”，其中 1.52 是视频播放器的当前播放时间（以秒为单位）。
因此，这就是您可以使用 currentTime 方法获取使用 Video.js 创建的视频播放器的当前播放时间的方法。
结论
在本教程中，我们了解了如何在 Video.js 中获取视频的当前播放时间。为此，我们使用了 Video.js 中默认提供的 current time 方法。此方法以秒为单位返回视频播放器的当前时间。我们还解释了如何使用此方法以及 time update 事件监听器，并提供了一个完整的可运行示例。
2K+ 次浏览
