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

共计 442 个字符，预计需要花费 2 分钟才能阅读完成。

需求：当我们页面上正在播放视频或者播放背景音乐时，我们屏幕自动息屏或者切换程序去看消息时，我们希望暂停视频或背景音乐，回到程序我们希望继续播放视频或播放背景音乐。小程序上提供了 onUnload 返回 onHide 退出 onShow 重新进入等生命周期，h5 提供了一个 visibilitychange，可以帮我们监测这种情况。
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 延时才可以成功执行播放事件。具体机制不太清楚，如果有哪位大神指导其中缘由请指教。