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

相关文章
|
6月前
|
缓存 小程序 UED
微信小程序如何在切换页面后原页面状态不变
微信小程序如何在切换页面后原页面状态不变
323 0
|
Windows
万能脚本录制器(支持鼠标/键盘的前台和后台,支持多种绑定模式)
本人现承接各种脚本/程序。包括:网页脚本(网页数据读取,post提交,自动下注等。)办公脚本(Word Excel Xls操作等)安卓模拟器脚本游戏脚本(自动喊话等简单功能,复杂暂不接)等其他脚本各种程序。
15466 0
万能脚本录制器(支持鼠标/键盘的前台和后台,支持多种绑定模式)
|
3月前
|
小程序 前端开发 JavaScript
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。开发者运用Service Worker等实现资源缓存与实时推送,利用Web App Manifest添加快捷方式至桌面,通过CSS3和JavaScript打造流畅动画与手势操作,需注意兼容性与性能优化,为用户创造更佳体验。
83 0
|
3月前
|
测试技术
锁屏组件新能力实现问题之多业务同时注册锁屏组件的管理展示如何解决
锁屏组件新能力实现问题之多业务同时注册锁屏组件的管理展示如何解决
31 0
|
6月前
|
定位技术 开发工具 iOS开发
ios9定位服务的app进入后台三分钟收不到经纬度,应用被挂起问题及解决方案
ios9定位服务的app进入后台三分钟收不到经纬度,应用被挂起问题及解决方案
55 0
|
11月前
后台交互-首页->与后台数据进行交互,wsx的使用
后台交互-首页->与后台数据进行交互,wsx的使用
65 0
|
JavaScript 小程序
微信小程序伪装页面(定时改变页面内容)
微信小程序伪装页面(定时改变页面内容)
318 0
|
移动开发 前端开发
前端(四):移动端页面闪烁、设备识别、全屏切换
移动端页面闪烁、设备识别、全屏切换
129 0
|
JSON 前端开发 JavaScript
前端重新部署如何通知用户刷新网页?
如果后端可以配合我们的话我们可以使用webSocket 跟后端进行实时通讯,前端部署完之后,后端给个通知,前端检测到Message进行提示,还可以在优化一下使用EvnentSource 这个跟socket很像只不过他只能后端往前端推送消息,前端无法给后端发送,我们也不需要给后端发送。
174 0
前端重新部署如何通知用户刷新网页?