In this tutorial we’ll be using the Page Visibility API to detect if a browser tab is idle (not currently being viewed) or active. To get an understanding of how the API works we’ll use it to pause a video when a tab becomes idle.
Let’s get started by setting up a HTML5 video player:
<video id="video" width="300" controls>
<source
src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
type="video/mp4" />
<p>Your browser doesn't support HTML video playback!</p>
</video>
Now for the JavaScript functionality that’ll make use of the Page Visibility API. We first need to define an EventListener
that calls a toggleVideoPlayback
function when the Page Visibility visibilitychange
event has been fired:
document.addEventListener("visibilitychange", toggleVideoPlayback);
Now let’s create the toggleVideoPlayback
function:
const toggleVideoPlayback = () => {
const video = document.getElementById("video");
return document.hidden ? video.pause() : video.play();
};
This function checks the status of document.hidden
. If this equals true
the video will pause and if it equals false
the video will resume playing. You can go ahead and test this code in browser now, note the timestamp when you navigate to another tab whilst the video is playing to confirm the video has been paused when you return.
That’s all for this tutorial. You should now have an understanding of how the Page Visibility API works. If you’re interested in learning about some of the other uses for the Page Visibility API the MDN Web Docs is worth checking out.
Top comments (1)
Thanks! Great and concise explanation.