因为有选项卡式浏览器，所以页面在后台，用户看不到。 Page Visibility API具有接收文档显示或隐藏的事件触发器的功能，以及表示当前页面的可见行状态的属性。
在保存资源和提高性能时，此API非常有用，因为它可以防止在文档不可见时执行不必要的任务。
的可见性状态与文档相同。 使用CSS属性(display: none )隐藏时，`不会触发可见性事件或更改帧的可见性状态。 当可见的visiblechange事件页面最小化或成为后台选项卡时，页面将隐藏。 浏览器在document中触发visibilitychange事件，属性document.hidden=true；
当打开页面或单击选项卡时，即当显示页面时，页面将显示。 浏览器在document中启动visibilitychange事件并设置document.hidden=false属性。
(隐藏是只读属性)
document.visibilityState属性visibilitychange事件不包含页面可见性状态，但只读属性document.visibilityState可以检索此值。
可能的值如下
“可见”(visible )页面的至少一部分显示，后台窗口中显示未最小化的前选项卡“hiddin”(隐藏)页面内容的文档选项卡，并关闭最小化设备的屏幕。 “prerender”
页面内容正在预渲染中，因为用户看不到它。 文档从prerender状态开始，但不能从其他状态更改为此状态。 因此，ducument仅预渲染一次。 “已卸载”
页面是从内存加载的。 并非所有浏览器都支持unloaded
document.addevent listener (" visibility change "，handleVisibilityChange，false )；
实例跳出页面后，暂停视频播放
打开页面后，播放视频内容
document.addevent listener (' visibilitychange '，function ) )var hidden，visibility change监视事件if(typeofdocument.hidden！=='undefined ' ) { //Opera 12.10 and Firefox 18或更高版本中，此属性hidden='hidden '； 可见性更改='可见性更改'； } else if (type of document.ms hidden！=='undefined ' ) { hidden='msHidden '； 可视更改=' msvisibilitychange '； } else if (type of document.WebKit hidden！=='undefined ' ) { //Chrome hidden='webkitHidden '； 可视更改=' webkitvisibilitychange '； } varvideoelement=document.getelementbyid (视频element )； function handleVisibilityChange () if ) document[hidden] ) {视频element.pause }； //在隐藏页面时暂停视频(else )视频元素. play )； //在页面显示过程中播放视频} if (type of document.addevent listener===' undefined '|hidden===undefined ) /不支持pagevisibilityadd 支持页面可见性API处理页面可见性//浏览器标题video element.addevent listener (' pause '，function ) { document.title='暂停}，false； 视频element.addevent listener (' play '，function ) ) { document.title='播放'； }，false； }