Page Visibility API Support in Opera 12.10
Our recent Opera 12.10 release added partial support for the Page Visibility API. It’s a simple API, but a mighty one because it allows developers to specify what a document should do when it becomes hidden. If you’ve ever been embarrassed at the office while trying to determine which of your 200 tabs is playing unexpected sound, you’ll appreciate the utility of the Page Visibility API.
How it works
The Page Visibility API adds two attributes —
visibilityState — and a
visibilitychange event to the HTML5
Document interface. When the document’s window or tab isn’t visible, the value of
true, otherwise it’s
document.visibilityState attribute simply reveals the particular state of a document:
visible. Two other values —
unloaded are outlined in the specification, but not yet supported.
When the visibility state of a document changes, Opera fires a
visibilitychange event. This is where it gets interesting. When the document is not visible, your
visibilitychange handler can pause media or animations. When the document becomes visible again, the handler can play the media, or resume the animation. It’s particularly useful for memory-intensive applications such as games. This demo shows an example using video. A small word of warning: the video plays automatically any time the tab is in the foreground.
Some parts of this implementation don’t quite work as you might expect. For example, switching from Opera to another application will not fire a
visibilitychange event. Neither will minimizing the browser window.
Because it’s document-specific, you also can’t use the Page Visibility API to determine which tab or window is active. It is possible to determine whether your document is visible, and therefore active. But it is not possible to determine which of the other tabs or windows currently has focus.
Opera is not the only browser to support this API. It is, however, the only one to use un-prefixed properties at this time. Corresponding properties in other browsers are as follows.
- Chrome / WebKit:
- Internet Explorer:
You will also need to listen for the