正文

掌握JS控制video标签：暂停、播放、跳转、获取时长及进度详解

/0 浏览量
0530

在HTML5中，<video>标签允许我们在网页上嵌入视频内容。通过JavaScript，我们可以实现对<video>标签的强大控制，包括暂停、播放、跳转、获取视频时长和当前进度等。下面，我们将详细探讨如何使用JavaScript来控制<video>标签。

暂停和播放视频

要控制视频的播放和暂停，我们可以使用play()和pause()方法。

// 播放视频
videoElement.play();

// 暂停视频
videoElement.pause();

这里，videoElement是<video>标签的DOM元素。调用play()方法将启动视频播放，而调用pause()方法则停止播放。

跳转视频

要跳转到视频的指定位置，我们可以使用currentTime属性。

// 跳转到视频的30秒位置
videoElement.currentTime = 30;

// 跳转到视频的1分钟15秒位置
videoElement.currentTime = 75;

currentTime属性表示视频的当前播放时间，单位为秒。你可以将其设置为任何介于0（视频开始）和视频时长（videoElement.duration）之间的值。

获取视频时长

要获取视频的总时长，可以使用duration属性。

// 获取视频的总时长
var videoDuration = videoElement.duration;
console.log("视频时长：" + videoDuration + "秒");

duration属性表示视频的总时长，单位为秒。

获取当前进度

要获取视频的当前播放进度，可以使用currentTime属性。

// 获取当前播放进度
var currentProgress = videoElement.currentTime;
console.log("当前播放进度：" + currentProgress + "秒");

currentTime属性表示视频的当前播放时间，单位为秒。

示例代码

以下是一个简单的HTML和JavaScript示例，演示如何控制视频的播放、暂停、跳转以及获取视频时长和当前进度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Control Example</title>
</head>
<body>
<video id="videoElement" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<button onclick="jumpToVideo(30)">跳转到30秒</button>
<button onclick="jumpToVideo(75)">跳转到1分15秒</button>

<script>
  var videoElement = document.getElementById("videoElement");

  function playVideo() {
    videoElement.play();
  }

  function pauseVideo() {
    videoElement.pause();
  }

  function jumpToVideo(seconds) {
    videoElement.currentTime = seconds;
  }
</script>
</body>
</html>

在这个示例中，我们有一个<video>标签和一个按钮。点击播放按钮将调用playVideo()函数，点击暂停按钮将调用pauseVideo()函数。跳转按钮分别跳转到视频的30秒和1分15秒位置。

通过以上内容，相信你已经掌握了如何使用JavaScript控制<video>标签。在实际开发中，你可以根据需要扩展这些功能，例如添加事件监听器来处理视频播放状态的变化等。

-- 展开阅读全文 --