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

Posted qixidi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5 移动端 关于监测切换程序到后台或息屏事件和visibilitychange的使用相关的知识,希望对你有一定的参考价值。

需求:当我们页面上正在播放视频或者播放背景音乐时,我们屏幕自动息屏或者切换程序去看消息时,我们希望暂停视频或背景音乐,回到程序我们希望继续播放视频或播放背景音乐。
小程序上提供了 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延时才可以成功执行播放事件。具体机制不太清楚,如果有哪位大神指导其中缘由请指教。

来源:https://segmentfault.com/a/1190000017482475


以上是关于h5 移动端 关于监测切换程序到后台或息屏事件和visibilitychange的使用的主要内容,如果未能解决你的问题,请参考以下文章

移动端检测微信浏览器返回,关闭,进入后台操作

移动端检测微信浏览器返回,关闭,进入后台操作

js控制手机保持亮屏的库,解决h5移动端,自动息屏问题

H5移动端,ios从后台返回到app,页面会白一下

移动端H5页面点击穿透问题

移动端触屏 也就H5页面 左右滑动 返回上一页?