HTML 检测HTML5视频元素是否正在播放

在本文中，我们将介绍如何使用HTML和JavaScript来检测HTML5视频元素是否正在播放。HTML5视频元素是用于在网页上播放视频的标准元素，可以使用它来添加视频到网页中并控制视频的播放状态。

阅读更多：HTML 教程

什么是HTML5视频元素

HTML5视频元素 <video> 是HTML标签中的一个新元素，用于在网页上播放视频。它提供了一种简单的方式来嵌入视频到网页中，并且可以使用JavaScript来控制视频的播放和其他操作。

HTML5视频元素的基本结构如下：

<video src="video.mp4" controls></video>

在上面的例子中，src 属性指定了视频文件的URL，controls 属性使得视频播放器显示控制按钮，让用户可以暂停、播放、停止等操作。

检测HTML5视频元素是否正在播放

通过JavaScript，我们可以检测HTML5视频元素的 paused 属性来判断视频是否正在播放。当视频暂停时，paused 属性的值为 true，当视频正在播放时，paused 属性的值为 false。

下面的代码演示了如何使用JavaScript来检测HTML5视频元素是否正在播放：

<!DOCTYPE html>
<html>
<body>

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

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

function checkVideoPlaying() {
  if (video.paused) {
    console.log("视频暂停");
  } else {
    console.log("视频正在播放");
  }
}

video.onplay = checkVideoPlaying;
video.onpause = checkVideoPlaying;
</script>

</body>
</html>

在上面的代码中，我们首先通过 getElementById 方法获取了视频元素，并给它添加了一个 id。然后，我们定义了一个 checkVideoPlaying 函数，该函数检查视频是否正在播放，并在控制台输出相应的消息。

接着，我们把 checkVideoPlaying 函数分别绑定到 onplay 和 onpause 事件上。当视频开始播放时，onplay 事件会触发 checkVideoPlaying 函数，同样地，当视频暂停时，onpause 事件也会触发 checkVideoPlaying 函数。

我们可以根据需要，在 checkVideoPlaying 函数中执行其他操作。例如，根据视频的播放状态来显示或隐藏其他元素，调整播放器的样式等。

示例

假设我们有一个包含多个视频的网页，并且我们想要在页面中添加一些特殊效果，比如在视频播放时显示一个提示信息。

<!DOCTYPE html>
<html>
<body>

<video id="video1" src="video1.mp4" controls></video>
<video id="video2" src="video2.mp4" controls></video>

<div id="message" style="display: none;">视频正在播放</div>

<script>
var videos = document.getElementsByTagName("video");
var message = document.getElementById("message");

function checkVideoPlaying() {
  for (var i = 0; i < videos.length; i++) {
    if (!videos[i].paused) {
      message.style.display = "block";
      break;
    }
  }
}

for (var i = 0; i < videos.length; i++) {
  videos[i].onplay = checkVideoPlaying;
  videos[i].onpause = checkVideoPlaying;
}
</script>

</body>
</html>

在上面的示例中，我们有两个视频，分别由两个 <video> 元素表示，它们都添加了相同的 onplay 和 onpause 事件处理程序，并且在视频播放状态改变时调用 checkVideoPlaying 函数。

checkVideoPlaying 函数在视频正在播放时将一个具有提示信息的 <div> 元素显示出来，当视频暂停时隐藏。