Radiant Media Player

Working with the Page Visibility API



The W3C Page Visibility API

The Page Visibility API is a W3C Recommendation which defines a means for site developers to programmatically determine the current visibility state of the page in order to develop power and CPU efficient web applications. This MDN article also holds practical information on how to use the Page Visibility API.

In this guide we will review how to use the Page Visibility API to play/pause Radiant Media Player based on page visibility.


Complete example

In essence what we want to do is quite simple: assuming we have multiple tabs opened at the same time within our favourite browser we want content to only play when a page holding a player is in-focus/visible. When the page holding the player becomes out of focus (either minimised or because another tab becomes active) we want to pause the player. This can help save bandwidth/CPU and help with user experience as when the user comes back to the tab holding the player it can resume from where it was left off.

This feature is not directly implemented into Radiant Media Player as there could be use-cases, like for example a music video site where one could want the video to keep playing in background. However the example we provide here can help you easily implement this feature.

You can find a complete example of using the Page Visibility API with Radiant Media Player here. View page source for commented code and see how we do it.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.