How to tell if browser/tab is active, and turn down volume sound when user leave

Question

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?

Have you actually looked at the javascript source that's being used on their site, or are you just asking us first? — RevanProdigalKnight, Jul 11 '14 at 19:33
see: http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active — keune, Jul 11 '14 at 19:34

adeneo · Accepted Answer · 2014-07-11T19:41:38.740

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

How to tell if browser/tab is active, and turn down volume sound when user leave

1 Answers1