HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pause when hidden</title>
</head>
<body>
  <video id="clip" width="240" controls loop muted>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  </video>
  <p id="status">Switch tabs to pause/resume.</p>
  <script>
    var video = document.getElementById("clip");
    var status = document.getElementById("status");
    video.play().catch(function () {});
    document.addEventListener("visibilitychange", function () {
      if (document.hidden) {
        video.pause();
        status.textContent = "Paused (tab hidden)";
      } else {
        video.play().catch(function () {});
        status.textContent = "Playing (tab visible)";
      }
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Pause video when hidden (Try It)