使用 Page Visibility API ，让网站更友好

咱们可能都有这样的经历：打开一个浏览器，加载以前打开的全部标签页，听到几个页面发出的混合在一块儿的声音。虽然浏览器经过标签的声音图标、插件等方法告知用户发声的页面，但这种体验仍是很糟糕。做为开发者和设计者，咱们有责任让网站更受欢迎。

网站是否是应该在被激活使用时才能发出声音？为何咱们要浪费资源和进程在咱们看不到的动画上？

幸运的是，如今有一个解决方案：HTML5 有个Page Visibility（页面可见性）的API。你能够看到Active Theory已经在新项目里使用了这个API。例如Under Armor 和 A Spacecraft For All

幸运的是，如今有一个解决方案：HTML5 有个页面可见（Page Visibility）的API。你能够看到Active Theory已经在新项目里使用了这个API。例如Under Armor 和 A Spacecraft For All：点击其余标签页，刚才还在运行的多媒体就会暂停。我喜欢把这样的网站成为“有礼貌的网站（polite web）”：网站考虑了用户的注意力、带宽等。

开发者曾经用绑定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的动画方法完成。

<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>

规范

Page Visibility API的规范很简单，只有两个方法：document.hidden 根据浏览器窗口的状态返回 true 或 false。具体的状态存储在document.visibilityState（hidden 、 visible、prerender、unloaded）里。visibilitychange能够做为一个事件。document.visibilityState能够检测为何document不可见。可是document.hidden已经能知足大部分的需求。

注意事项和浏览器支持

Page Visibility API采用保守的方式来报告document的隐藏：若是用户在同一浏览器窗口里切换就会报告，但若是是用别的窗口遮住当前页面，就不会报告。这个API不是万无一失的，在某些状况下会误报，使用的时候要当心。

浏览器对Page Visibility API的支持是比较好的：全部的现代浏览器（除了Opera Mini）都支持这个API，包括IE10+。供应商前缀也慢慢取消：目前须要-webkit前缀是Android和黑莓的浏览器。我在上面的代码中为了简化操做，没有加前缀。可是添加前缀和测试也很方便。

Page Visibility API是Progressive Enhancement（渐进加强）的一个好例子。若是浏览器不支持这个API，该脚本将被忽略，用户将像平时同样被不受控制的声音打扰。

其余用法

Page Visibility API不只能够用于声音和视频，还能够用于slider 、 PPT。

使用这个API可使网站更友好、更绿色、更有责任感。建议广大开发者和设计师考虑把它整合到本身的项目中。

---

英文原文：Creating Well-Behaved Sites With The Page Visibility API
由 SegmentFault 整理编译