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 — hidden
and visibilityState
— and a visibilitychange
event to the HTML5 Document
interface. When the document’s window or tab isn’t visible, the value of document.hidden
is true
, otherwise it’s false
.
The document.visibilityState
attribute simply reveals the particular state of a document: hidden
or visible
. Two other values — prerender
and 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.
Limitations
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.
Other browsers
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:
document.webkitVisibilityState
anddocument.webkitHidden
- Firefox:
document.mozVisibilityState
anddocument.mozHidden
- Internet Explorer:
document.msVisibilityState
anddocument.msHidden
You will also need to listen for the webkitvisibilitychange
, mozvisibilitychange
, and msvisibilitychange
events.