JS控制video播放暂停|极客笔记

JS控制video播放暂停

在网页开发中，使用video标签来显示视频是一种常见的方式。通过JavaScript控制视频的播放和暂停是一个常见的需求，可以实现一些动态交互效果。本文将详细介绍如何通过JavaScript来控制video的播放和暂停操作。

video标签基本用法

首先，我们来看一下如何在HTML中使用video标签来显示视频。

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

在上面的代码中，我们使用了<video>标签来创建一个视频播放器，controls属性表示显示视频控制条。在<source>标签中指定了视频文件的路径和类型，如果浏览器不支持video标签，则会显示Your browser does not support the video tag.。

控制video播放暂停

获取video元素

要控制video的播放和暂停，首先需要获取video元素。可以通过document.getElementById()方法来获取指定id的video元素。

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

播放视频

要播放视频，可以使用play()方法。

video.play();

暂停视频

要暂停视频，可以使用pause()方法。

video.pause();

切换播放状态

除了直接播放和暂停视频，我们还可以根据当前的播放状态来切换。

if (video.paused) {
  video.play();
} else {
  video.pause();
}

示例代码

下面是一个完整的示例代码，演示了如何通过JavaScript来控制video的播放和暂停操作：

<!DOCTYPE html>
<html>
<head>
  <title>Control Video with JavaScript</title>
</head>
<body>
  <video id="myVideo" width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <button id="playBtn">Play</button>
  <button id="pauseBtn">Pause</button>

  <script>
    var video = document.getElementById("myVideo");
    var playBtn = document.getElementById("playBtn");
    var pauseBtn = document.getElementById("pauseBtn");

    playBtn.addEventListener("click", function() {
      video.play();
    });

    pauseBtn.addEventListener("click", function() {
      video.pause();
    });
  </script>
</body>
</html>

在上面的示例代码中，我们通过两个按钮来控制视频的播放和暂停操作。点击Play按钮可以播放视频，点击Pause按钮可以暂停视频。