One of the features lacking in the current browser api is that of determining whether the web page is currently visible to the user or is hidden (either in another tab or window).
Notice how the video pauses whenever the page is hidden. Also check the title of the page as it switches state.
The api is quite simple in its design – whenever a web page visibility changes, the ‘visibilitychange’ event is fired. This event can then be registered using the addEventListener method.
Currently the Page Visibility API supports three visibility states:
‘visible’ : user has opened the page and is working within it.
‘hidden’ : user has switched to another tab or minimized browser window.
‘prerender’ : browser is just prerendering a page.
However the problem with the current api implementation is that different browsers have implemented the api specification a little differntly, which can make working with them a little tedious. So one option is to use a wrapper which hides the various browser differences. Visibility.js is one such wrapper which eases the usage of the api by hiding vendor-specific property prefixes and adding some high-level functions.
Below is the complete source for the above demo page. I’d not go into further details, as the respective pages have all the detailed documentation.