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

相关文章
|
Windows
万能脚本录制器(支持鼠标/键盘的前台和后台,支持多种绑定模式)
本人现承接各种脚本/程序。包括:网页脚本(网页数据读取,post提交,自动下注等。)办公脚本(Word Excel Xls操作等)安卓模拟器脚本游戏脚本(自动喊话等简单功能,复杂暂不接)等其他脚本各种程序。
15492 0
万能脚本录制器(支持鼠标/键盘的前台和后台,支持多种绑定模式)
|
3月前
|
测试技术
锁屏组件新能力实现问题之多业务同时注册锁屏组件的管理展示如何解决
锁屏组件新能力实现问题之多业务同时注册锁屏组件的管理展示如何解决
32 0
|
3月前
|
小程序 前端开发 JavaScript
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。
微信小程序结合PWA技术,提供离线访问、后台运行、桌面图标及原生体验,增强应用性能与用户交互。开发者运用Service Worker等实现资源缓存与实时推送,利用Web App Manifest添加快捷方式至桌面,通过CSS3和JavaScript打造流畅动画与手势操作,需注意兼容性与性能优化,为用户创造更佳体验。
105 0
|
3月前
|
小程序 UED
锁屏组件新能力实现问题之锁屏组件在支付宝的实现如何解决
锁屏组件新能力实现问题之锁屏组件在支付宝的实现如何解决
41 0
|
6月前
|
数据挖掘 数据处理 API
使用TransBigData组件实现个人手机定位功能
使用TransBigData组件实现个人手机定位功能
115 0
|
11月前
后台交互-首页->与后台数据进行交互,wsx的使用
后台交互-首页->与后台数据进行交互,wsx的使用
68 0
|
移动开发 前端开发
前端(四):移动端页面闪烁、设备识别、全屏切换
移动端页面闪烁、设备识别、全屏切换
136 0
|
JSON 前端开发 JavaScript
前端重新部署如何通知用户刷新网页?
如果后端可以配合我们的话我们可以使用webSocket 跟后端进行实时通讯,前端部署完之后,后端给个通知,前端检测到Message进行提示,还可以在优化一下使用EvnentSource 这个跟socket很像只不过他只能后端往前端推送消息,前端无法给后端发送,我们也不需要给后端发送。
175 0
前端重新部署如何通知用户刷新网页?
|
存储 缓存 小程序
如何实现游戏中的在线计时器和离线计时器
本文包含了游戏中两种计时器的实现原理和实现方法,皆在帮助你彻底的搞懂游戏开发中的计时器。 如果你没有任何的游戏开发经验,欢迎观看我的“人人都能做游戏”系列视频教程,它会手把手的教你做出自己的第一个小游戏。 在游戏中经常会有需要倒计时的需求,例如倒计时 10 分钟可以获得 1 点体力,倒计时 1 小时后可以开启一个宝箱,或者是根据游戏的计时获得奖励等等。
304 0