我们都有过这样的经验：启动浏览器后，会重新加载所有的tab页，声音和视频混合嘈杂。虽然你可以很容易对这方面进行控制，像MuteTab等，对于大多数人来说这是一种令人失望的用户体验。作为开发人员和设计师，我们应该让页面更加友好，而不能喧宾夺主。
网站只关注当前的激活标签，这难道没有有意义吗？我们为什么消耗电池和处理器，去播放那些看不到的画面呢？
值得庆幸的是，有一个解决方案：HTML5 Page Visibility API（页页能见度API）。你可以看到它在Active Theory 上面的应用:在点击另一个选项卡时，你会发现，视频和音乐暂停了。这种行为的网站是我喜欢的，我称之为“有礼貌的网站”：那些重视用户体验，节约带宽和电费的网站。
过去的开发人员通过，加入onblur（）和onfocus（）的事件侦听来解决。有总比没有强，但该方法无法判断该窗口对用户是否隐藏。例如，具有两个浏览器窗口并排排例，当onblur()和onfocus()事件响应时，内容其实仍然是完全可见的。
应用Page Visibility
使用Page visibility API有很多例子，这里有一个典型应用，当播放的视频对用户不可见时，就停止播放。
<video autoplay controls id="videoElement"><source src="rar.mp4"><source src="rar.webm"></video><script>var videoElement = document.getElementById("videoElement");document.addEventListener("visibilitychange", function() {if (document.hidden) {videoElement.pause();} else {videoElement.play();}});</script>
上面的代码有点小问题，就是中断地太突然了，如果你使用的是jQuery，你可以通过animate为这种中断添加一些淡入淡出效果。
<script>var videoElement = document.getElementById("videoElement");document.addEventListener("visibilitychange", function() {if (document.hidden) {$("#videoElement").animate({volume: 0}, 1000, "linear", function() {videoElement.pause();});} else {videoElement.play();$("#videoElement").animate({volume: 1}, 1000, "linear");}});</script>
Spec规范
Page Visibility API标准是非常简单的，只有两个方法： document.hidden 根据当前窗口状态会返回 true 或 false； 相同的结果会以字符串的形式存储在 document.visibilityState 中（'hidden'或'visible'，还有额外的两个值： prerender 和 unloaded）; visibilitychange 是可见度改变的事件。document.visibilityState 对于判断为什么当前文档不可见是很有帮助的，但是大多数情况下 document.hidden 已经够用了。
兼容性
Page Visibility API已经兼容各主流浏览器 ； IE10, Chrome, Firefox等。
Page Visibility API对浏览器也是无害的，当浏览器不支持时，它会被忽略。
HAO