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