xxqMKNB

index.html

<main>
  <h3>Page Visibility API Demo</h3>
  <video id="my-video" width="400" controls="">
    <source id='mp4' src="https://alligator.io/images/js/page-visibility-api/bbb-360p.mp4" type='video/mp4' />
    <p>Sorry, there's a problem playing this video. Please try using a different browser</p>
  </video>
  <p>Video thanks to the Blender Foundation | <a href="https://www.blender.org/">www.blender.org</a></p>
  <a href="tel:8882192787">Call us at 888-219-2787</a>
</main>

script.js

window.onload = function() {
  document.addEventListener("visibilitychange", () => {
    const video = document.getElementById("my-video");
    console.log(document.hidden);
    return document.hidden ? video.pause() : video.play();
  });
};

style.css

body {
  background-color: gray;
  font-family: "Helvetica", sans-serif;
}

xxqmknb.markdown

xxqMKNB

A Pen by dsgeyser on CodePen.

License.