How can I check if the page is open in the active tab? I want to mute video on my website, when user leave tab. Currently I'm using:

$(window).on('focus', function() {
    $("video").prop('muted', false);
});

but when user click on adressbar video is muted, so this is unexpected. Can I avoid this behavior? The best solution is something like at this webpage: / when user open other tabs in browser, sounds is smoothly turned down. How it's made?

How can I check if the page is open in the active tab? I want to mute video on my website, when user leave tab. Currently I'm using:

$(window).on('focus', function() {
    $("video").prop('muted', false);
});

but when user click on adressbar video is muted, so this is unexpected. Can I avoid this behavior? The best solution is something like at this webpage: http://volkswagen-sportscars.fr/cars/ when user open other tabs in browser, sounds is smoothly turned down. How it's made?

• javascript
• jquery
• html

• Have you actually looked at the javascript source that's being used on their site, or are you just asking us first? – RevanProdigalKnight Commented Jul 11, 2014 at 19:33
• 3 see: stackoverflow./questions/1060008/… – keune Commented Jul 11, 2014 at 19:34
• yes, I saw this, but this not answered at mine question – Adam Golab Commented Jul 11, 2014 at 19:35

1 Answer 1

Newer browsers (IE10 and up) have support for the Page Visibility API

The Page Visibility API lets you know when a webpage is visible or in focus. With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. When the user minimizes the webpage or moves to another tab, the API sends a visibilitychange event regarding the visibility of the page. You can detect the event and perform some actions or behave differently. For example, if your web app is playing a video, it would pause the moment the user looks at another browser, and plays again when the user returns to the tab. The user does not lose their place in the video and can continue watching.

Used something like this

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}

document.addEventListener(visibilityChange, handleVisibilityChange, false);

function handleVisibilityChange() {
    $("video").prop('muted', document[hidden]);
}

DEMONSTRATION