Created
October 16, 2017 16:00
-
-
Save prof3ssorSt3v3/ac34769b1cce2833cd1d115b86c1daa9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Page Visibility API</title> | |
<meta name="viewport" content="width=device-width"> | |
</head> | |
<body> | |
<h1>Page Visibility API</h1> | |
<p>As long as this tab is the one tab in the browser with focus then nothing happens. When the user switches to another tab that triggers the visibilitychange event on the document object.</p> | |
<script> | |
//document.hidden | |
//document.addEventListener('visibilitychange', myfunc) | |
//... webkitHidden msHidden | |
//... webkitvisibilitychange msvisibilitychange | |
let hidden, vChange; | |
if( typeof document.hidden !== 'undefined'){ | |
hidden = 'hidden'; | |
vChange = 'visibilitychange'; | |
}else if(typeof document.webkitHidden !== 'undefined'){ | |
hidden = 'webkitHidden'; | |
vChange = 'webkitvisibilitychange'; | |
}else if(typeof document.msHidden !== 'undefined'){ | |
hidden = 'msHidden'; | |
vChange = 'msvisibilitychange'; | |
}else{ | |
//no support | |
hidden = null; | |
vChange = null; | |
} | |
if( hidden !== null){ | |
document.addEventListener(vChange, function(ev){ | |
console.log('visibilitychange', document[hidden]); | |
if(document[hidden]){ | |
//page has lost focus | |
//stop the audio or video | |
}else{ | |
//page has regained focus | |
//start the audio or video | |
} | |
}); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment