h5 移动端 关于监测切换程序到后台或息屏事件---visibilitychange的使用

需求：当我们页面上正在播放视频或者播放背景音乐时，我们屏幕自动息屏或者切换程序去看消息时，我们希望暂停视频或背景音乐，回到程序我们希望继续播放视频或播放背景音乐。
小程序上提供了 onUnload返回 onHide退出 onShow重新进入等生命周期，h5提供了一个visibilitychange，可以帮我们监测这种情况。

 

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilitychange_event

 

 

该API的属性和事件：

HTML5中专门为document元素添加了相关属性和事件：

属性：

1、Document.hidden 只读属性 布尔值 简单的表示标签页显示或者隐藏
如果页面处于被认为是对用户隐藏状态时返回true，否则返回false。
2、Document.visibilityState 只读属性
是一个用来展示文档可见性状态的字符串,可能的值：
visible: 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡。
hidden : 页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。 注释：浏览器支持是可选的。
unloaded : 页面正在从内存中卸载。 注释：浏览器支持是可选的。
3、Document.onvisibilitychange
EventListener 提供在visibilitychange 事件被触发时要调用的代码。

 

3.罗列一些使用场景：

1.网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。
2.显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
3.页面想要检测是否正在渲染，以便可以准确的计算网页浏览量（埋点使用场景）。
4.当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）。

visibilitychange监听事件

你可以在document对象上注册一个监听visibilitychange事件，根据document.hidden或者document.visibilityState属性做一些业务逻辑：

document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      audio.pause()
      video.pause()
    } else {
      setTimeout(() => {
        bgMusic.play()
        video.play()
      }, 2000)
    }
});

 

关于2s延时：在测试中发现，当回到页面后100%会执行else 但已知在IOS上只是息屏else里的play事件能执行成功，但如果是点击home键或者切换到其他程序则需要加2000延时才可以成功执行播放事件。具体机制不太清楚