Pause html5 video when user switches tab

Question

I have an HTML5 video embedded on my webpage:

<video id="myvideo">
    <source src="videos/myvideo.mp4">
</video>

And I have a bit of jQuery to pause the video when the user goes to a different browser window or tab. And also to play the video when the user returns:

// pause when the user leaves this window/tab
$(window).blur(function(){
    $('#myvideo').get(0).pause();
});

// play when the user returns to this window/tab
$(window).focus(function(){
    $('#myvideo').get(0).play();
});

The problem with this is that will also pause the video if the user clicks on the location bar or focuses on a different OS window, even though the video is visible and the user hasn't switched tabs.

Is there a way to pause/play the video based on whether the current tab is open (but not necessarily focused)?

Answer 1

I found the answer almost immediately after posting the question. The Page Visibility API allows you to know when a webpage is visible or in focus. There's a nice jQuery shim called jquery-visibility that provides a clean API for a cross-browser solution. Using it you can do something like:

$(document).on('show.visibility', function() {
    $('#myvideo').get(0).play();
});
$(document).on('hide.visibility', function() {
    $('#myvideo').get(0).pause();
});