h5 移動端 關於監測切換程式到後臺或息屏事件和visibilitychange的使用
阿新 • • 發佈:2018-12-23
需求:當我們頁面上正在播放視訊或者播放背景音樂時,我們螢幕自動息屏或者切換程式去看訊息時,我們希望暫停視訊或背景音樂,回到程式我們希望繼續播放視訊或播放背景音樂。
小程式上提供了 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延時才可以成功執行播放事件。具體機制不太清楚,如果有哪位大神指導其中緣由請指教。