如何在 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>
// 视频播放器初始化
let player = videojs('my-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://www.cainiaomax.com/videos/sample.png"
      data-setup='{}'
   >
   <source
      src="https://www.cainiaomax.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>

说明

在此代码示例中，我们实现了以下内容 -

• 首先，我们在代码的 <head> 标签中使用 CDN URL 导入了 video.js 的 CSS 和 JS 文件。

• 接下来，我们在 <body> 部分中为视频播放器创建了一个 <video> 元素，其中包含各种类，例如"video.js vjs-default-skin vjs-big-play-centered"和"my-video-player"作为视频"id"。

• 我们还为 <video> 元素使用了一些标准的 HTML 视频选项，例如控件和海报，并且我们还使用了 fluid 属性来使我们的视频播放器负责播放。

• 在 <script> 中在标签部分中，我们初始化了一个 ID 为"my-video-player"的视频播放器，然后使用 currentTime 方法获取当前时间，并使用 window.alert 方法将其显示在网页浏览器中。

当您在网页浏览器中执行上述代码时，您会注意到收到一个"currentTime: 0"的 alert，然后视频播放器就加载完成了。Video.js 会 alert 当前视频播放器的时间，在本例中为 0 秒。但这并没有多大用处，因为每次重新加载视频播放器时，它都只显示 0 秒。

问题在于，currentTime 方法会在视频播放器创建后立即调用。因此，此时的播放时间仅为 0 秒。

假设您想在视频播放过程中持续显示当前时间。为此，我们可以将"currentTime"方法与"timeupdate"事件监听器结合起来，后者大约每 15-200 毫秒更新一次时间变化。我们将在每个"timeupdate"事件中记录视频播放器的当前播放时间。

请参考以下代码片段，该代码片段用于在视频播放时间发生变化时立即记录视频的当前播放时间 -

<script>
    // 视频播放器初始化
    let player = videojs('my-video-player');
    
    // 使用时间更新事件监听器
   player.on('timeupdate', function () {

      // 获取当前时间并记录
      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

我们完整的示例将在每次 time update 事件中获取视频播放器的当前播放时间，如下所示 -

<!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://www.cainiaomax.com/videos/sample.png"
      data-setup='{}'
   >
   <source
      src="https://www.cainiaomax.com/videos/sample720.mp4"
      type="video/mp4"
   >
   </video>
   <script>
      // 视频播放器初始化
      let player = videojs('my-video-player');
    
      // 使用时间更新事件监听器
      player.on('timeupdate', function () {
      
         // 获取当前时间并记录
         let currentTime = player.currentTime();
         console.log("Current Time of the Video Player: ", currentTime)
      });
   </script>
</body>
</html>

说明

如您所见，在