📌  相关文章
📜  javascript html video seek to time - Javascript(1)

📅  最后修改于: 2023-12-03 15:16:05.387000             🧑  作者: Mango

JavaScript HTML Video 按时间跳转 - Javascript

在Web开发中，经常需要控制HTML视频的播放，其中包括按特定时间跳转到视频的某一部分。这可以通过JavaScript和HTML标记来实现。本文将介绍如何使用JavaScript来实现此功能。

使用 HTML <video> 标签

首先，我们需要在HTML中添加一个<video>标签来插入视频：

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

上述代码中，我们指定了一个id为"myVideo"的视频元素，并通过<source>标签指定了视频文件的路径和类型。

使用 JavaScript 进行跳转

现在，我们可以通过JavaScript来跳转到视频的指定时间。首先，我们需要获取视频元素的引用：

const video = document.getElementById("myVideo");

接下来，我们可以使用currentTime属性来设置或获取当前视频的播放时间。例如，要跳转到视频的2分钟处，我们可以这样做：

video.currentTime = 120;

上述代码将把当前播放时间设置为120秒（2分钟）。这样，视频将会跳转到2分钟处。

监听事件

如果我们希望在视频跳转完成后执行某些操作，我们可以使用timeupdate事件。例如，要在视频每次播放时间更新时执行某个函数：

video.addEventListener("timeupdate", function() {
  console.log("当前播放时间: " + video.currentTime);
});

上述代码将在视频的播放时间更新时，在控制台输出当前播放时间。

完整示例代码

下面是一个完整的示例代码，展示了如何使用JavaScript在HTML视频中按时间跳转：

<!DOCTYPE html>
<html>
<head>
  <title>HTML Video 跳转到指定时间 - Javascript</title>
</head>
<body>
  <video id="myVideo" controls>
    <source src="video.mp4" type="video/mp4">
  </video>

  <script>
    const video = document.getElementById("myVideo");
    video.currentTime = 120;

    video.addEventListener("timeupdate", function() {
      console.log("当前播放时间: " + video.currentTime);
    });
  </script>
</body>
</html>

在此示例中，我们将视频跳转到2分钟处，并在控制台输出视频的当前播放时间。

希望本文对你理解如何使用JavaScript在HTML视频中按时间跳转有所帮助！