# 页面可见性应用
页面可见性 API对于节省资源和提高性能特别有用，它使页面在文档不可见时避免执行不必要的任务。 通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
# 对应api
- 属性
- Document.hidden （只读属性）返回布尔值，表示页面是（true）否（false）隐藏.
- Document.visibilityState 返回document的可见性, 即当前可见元素的上下文环境.
- visible
- hidden
- prerender
- unloaded
- Events
- visibilitychange 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.
# 实际应用
# 切换页面自动停止播放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<audio src="demo.mp3" controls="controls" id="videoElement">
Your browser does not support the audio element.
</audio>
</body>
</html>
<script type="text/javascript">
// 设置隐藏属性和改变可见属性的事件的名称
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
// Opera 12.10 and Firefox 18 and later support
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");
// 如果页面是隐藏状态，则暂停视频
// 如果页面是展示状态，则播放视频
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}
// 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
if (typeof document.addEventListener === "undefined" ||
typeof document[hidden] === "undefined") {
console.log("This demo requires a browser, such as Google Chrome or Firefox,
that supports the Page Visibility API.");
} else {
// 处理页面可见属性的改变
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// 当视频暂停，设置title
// This shows the paused
videoElement.addEventListener("pause", function(){
document.title = 'Paused';
}, false);
// 当视频播放，设置title
videoElement.addEventListener("play", function(){
document.title = 'Playing';
}, false);
}
</script>