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

超、凢脫俗 2022-04-03 15:26 189阅读 0赞

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

*  [移动端用下拉刷新的方式实现上拉加载][Link 1]
 *  [移动端(手机端)页面自适应解决方案—rem布局篇][rem]
 *  [一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）][VUE _ scroll _PC]
 *  [移动端rem.js使用方法][rem.js]
 *  [移动端常见bug][bug]

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延时才可以成功执行播放事件。具体机制不太清楚，如果有哪位大神指导其中缘由请指教。

来源：[https://segmentfault.com/a/1190000017482475][https_segmentfault.com_a_1190000017482475]

[Link 1]: http://www.jqhtml.com/21617.html
[rem]: http://www.jqhtml.com/18980.html
[VUE _ scroll _PC]: http://www.jqhtml.com/18842.html
[rem.js]: http://www.jqhtml.com/18605.html
[bug]: http://www.jqhtml.com/18418.html
[https_segmentfault.com_a_1190000017482475]: https://segmentfault.com/a/1190000017482475