1. 程式人生 > >h5 移動端 關於監測切換程式到後臺或息屏事件和visibilitychange的使用

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