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

chuyao 发布于2019-08-23 14:14 / 3351人阅读

摘要：需求当我们页面上正在播放视频或者播放背景音乐时，我们屏幕自动息屏或者切换程序去看消息时，我们希望暂停视频或背景音乐，回到程序我们希望继续播放视频或播放背景音乐。

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

云服务器 GPU云服务器移动端webrtc h5 H5移动端上传图片移动端tab切换华为云服务器移动端使用教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100300.html

移动端倒计时切到后台切回来不继续执行的问题

摘要：问题描述这个倒计时按钮，如果页面在移动端切到后台和切回来，倒计时停止运行。相关代码为了兼容，切换到后台继续运行问题描述 showImg(https://segmentfault.com/img/bVbiVSh);这个倒计时按钮，如果页面在移动端切到后台和切回来，倒计时停止运行。但是在pc端没有这个问题。倒计时代码如下 let downCount = () => { ...

Aomine 2019-08-23 12:38 评论0 收藏0
页面可见与不可见的事件——visibilitychange

摘要：需求背景在最近的项目中，使用了和定时器实现了随机走动物体的功能，走动的物体还会有的动画。上述代码中，维护了两个数组，分别代表页面进入可见状态时需要执行的回调列表和进入不可见状态时需要执行的回调列表。需求背景在最近的项目中，使用了transition和定时器实现了随机走动物体的功能，走动的物体还会有animation的动画。我发现在手机中，按home键或者切换应用，使页面不在屏幕中，...

libxd 2019-08-23 18:40 评论0 收藏0
页面进入后台如何关闭背景音乐

摘要：之前在做小程序的时候遇到一个问题小程序中有一个页面，这个页面中用嵌套了一个页面，这个页面中有背景音乐，背景音乐播放的情况下，点击小程序右上角退出的小圆圈背景音乐仍然播放。之前在做小程序的时候遇到一个问题：小程序中有一个webview页面，这个页面中用iframe嵌套了一个H5页面，这个H5页面中有背景音乐，背景音乐播放的情况下，点击小程序右上角退出的小圆圈背景音乐仍然播放。预期效果...

Travis 2019-08-26 10:18 评论0 收藏0
页面进入后台如何关闭背景音乐

摘要：之前在做小程序的时候遇到一个问题小程序中有一个页面，这个页面中用嵌套了一个页面，这个页面中有背景音乐，背景音乐播放的情况下，点击小程序右上角退出的小圆圈背景音乐仍然播放。之前在做小程序的时候遇到一个问题：小程序中有一个webview页面，这个页面中用iframe嵌套了一个H5页面，这个H5页面中有背景音乐，背景音乐播放的情况下，点击小程序右上角退出的小圆圈背景音乐仍然播放。预期效果...

abson 2019-08-26 10:38 评论0 收藏0