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延时才能够胜利实行播放事宜。详细机制不太清晰,如果有哪位大神指点个中启事请指教。

    原文作者:不会飞的Porco
    原文地址: https://segmentfault.com/a/1190000017482475
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞