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

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


document.addEventListener("visibilitychange", () =&gt; {if (document.hidden) {audio.pause()video.pause()} else {setTimeout(() =&gt; {bgMusic.play()video.play()}, 2000)}
});

关于2s延时：在测试中发现，当回到页面后100%会执行else 但已知在IOS上只是息屏else里的play事件能执行成功，但如果是点击home键或者切换到其他程序则需要加2000延时才可以成功执行播放事件。具体机制不太清楚，如果有哪位大神指导其中缘由请指教。

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

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

微信小程序怎么确定是息屏、返回、还是Home键操作？
我们公司在做一个客户端和小程序互相控制的小程序,两者都可以控制用户是否退出,因为安卓手机第一次扫码进来会触发onload方法,但是第二次扫码进入小程序,就直接进入到上次退出的界面,只会触发onShow ...
会导致小程序onhide码手机息屏_小程序onshow事件
问题描述 onShow 事件在小程序里面非常重要,场景之多,导致处理起来很复杂.很多业务场景依赖与onShow与onHide事件.比如分享给他人,在群里PK等等. 息屏,新页面返回.Home键操作,也 ...
用Python实现自定义息屏关声音程序
文章目录 1. 项目介绍 2. 项目下载 3. 参考 1. 项目介绍操作系统本身有一套自动息屏机制,但这有时候会被一些第三方的程序破坏掉,比如火星安防监控程序会阻止系统自动息屏,导致屏幕一直亮着,很 ...
开源全平台版知识付费系统源码支持微信小程序+公众号+H5+PC端
分享一个开源全平台版知识付费系统源码,系统支持微信小程序+公众号+H5+PC端,一套系统实现全端数据及用户体系全面打通,轻松实现店铺全网一站式运营.含完整代码包和详细搭建教程. 系统支持视频课程.音频 ...
全平台知识付费系统源码支持微信小程序+公众号+H5+PC端含搭建部署教程
分享一个全平台知识付费系统源码,支持微信小程序+微信公众号+H5+PC端,支持DIY风格装修,含完整程序包和详细的搭建教程. 系统特色功能一览: 1.支持视频课程.音频课程.图文课程.专栏课程等: 2 ...
uni-app跨端开发微信小程序之HBuilderX项目实现多环境开发
摘要:由于市场的需求不断变化,原有的开发环境和生产环境已经无法满足需求,多环境开发已经是越来越多的公司要面临的问题.本文先介绍如何将HBuilderX创建的uni-app项目转换成vue-cli项目, ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
H5 移动端获取腾讯地图计算两经纬度的实际距离（可批量）_多地打卡
文章目录一.H5移动端 1. 安装vue-jsonp 2. 引入腾讯sdk 3. 实例化 4. 二点求距离 5. 多点求距离文档地址: https://lbs.qq.com/service/web ...
知识付费小程序源码，可上架安卓苹果app应用商店、打包为H5、抖音微信小程序
知识付费小程序源码,可上架安卓苹果app应用商店.打包为H5.匠言知识付费匠言知识付费支持15端版本,数据同步,支持课程点播.直播.在线考试.付费咨询.心理咨询.私董会.电子书.百科.头条.教务管理 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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