HTML5 Page Visibility Interface Application (page Visibility API) usage detailed

There is a need to determine whether the user is interacting with the current page, such as the browser open a lot of tabs, if the page is minimized or the target page is hidden in other tabs, then some features of the target page can be stopped, and so on to switch to the target page to continue some features.

For example, the target page plays animation or video, and when I switch the tab, the animation or video pauses, and when I switch back, I continue to play the animation or video. How does the target page determine the toggle label event?
Before H5, we can listen for onfocus () events. If the current window has the focus, then we can simply assume that the user is interacting with the page, and if the focus is lost (onblur ()), then the user can be considered to stop interacting with the page.
Current Window gets focus
Window.onfocus = function () {
Play an animation or video
};

The current window loses focus
Window.onblur = function () {
Pause Animation or video
};
This method can be implemented to toggle the label Pause Animation video, but will bring a problem, because is the judgment focus, if is in the current page spread a small window, that the current page suspended animation, imagine, if you look at the film, while opening a chat window and mm chat, when you operate Chat window, the video paused, This is not the effect you want.
OK, now let's see how the HTML5 is solved. H5 provides a number of simple and useful api,page Visibility APIs. The Page Visibility API is an effective way to help us with this judgment.
The API itself is very simple and consists of the following three parts.
Document.hidden: A Boolean value that indicates whether the page is hidden. Page hiding includes pages in the Background tab or minimized browsers (note that the page is not hidden by other software, such as open sublime obscured the browser).
Document.visibilitystate: A value representing the following 4 possible states
Hidden: The page is in the Background tab or the browser is minimized
Visible: The page is in the Foreground tab
PreRender: The page performs a pre-render processing outside the screen Document.hidden value is True
Unloaded: page is unloading from memory
Visibilitychange Event: This event is triggered when the document becomes invisible from visible or never visible.
In this way, we can listen to the Visibilitychange event, when the event is triggered, get the value of Document.hidden, according to the value of the page some of the event processing.
Document.addeventlistener (' Visibilitychange ', function () {
var ishidden = Document.hidden;
if (Ishidden) {
Animated video Pause
} else {
Animation video Start
}
});
Combined with the example in the demo, switch the label or minimize the time, the video in the demo will pause, restore the current page, the demo will continue to play the video. The complete code is as follows:
var hidden, Visibilitychange;
if (typeof Document.hidden!== "undefined") {
Hidden = "hidden";
Visibilitychange = "Visibilitychange";
else if (typeof Document.mshidden!== "undefined") {
Hidden = "Mshidden";
Visibilitychange = "Msvisibilitychange";
else if (typeof Document.webkithidden!== "undefined") {
Hidden = "Webkithidden";
Visibilitychange = "Webkitvisibilitychange";
}

var videoelement = document.getElementById ("videoelement");

If the page is hidden, pause playback and continue playing if the page resumes
function Handlevisibilitychange () {
if (Document[hidden]) {
Videoelement.pause ();
} else {
Videoelement.play ();
}
}

To determine the browser support situation
if (typeof Document.addeventlistener = = "undefined" | | typeof Document[hidden] = = "undefined") {
Consol.log ("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
Monitor Visibilitychange Events
Document.addeventlistener (Visibilitychange, Handlevisibilitychange, false);

When the player is paused, set the page title to: Paused.
Videoelement.addeventlistener ("Pause", function () {
Document.title = ' paused ';
}, False);

When the player is playing correctly, set the page title to: Playing.
Videoelement.addeventlistener ("Play", function () {
Document.title = ' Playing ';
}, False);
}