需求：當我們頁面上正在播放視頻或者播放背景音樂時，我們屏幕自動息屏或者切換程序去看消息時，我們希望暫停視頻或背景音樂，回到程序我們希望繼續播放視頻或播放背景音樂。
小程序上提供了 onUnload返回 onHide退出 onShow重新進入等生命周期，h5提供了一個visibilitychange，可以幫我們監測這種情況。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilitychange_event
該API的屬性和事件：
HTML5中專門為document元素添加了相關屬性和事件：
屬性：
1、
Document.hidden只讀屬性 布爾值 簡單的表示標簽頁顯示或者隱藏
如果頁面處於被認為是對用戶隱藏狀態時返回true，否則返回false。
2、Document.visibilityState只讀屬性
是一個用來展示文檔可見性狀態的字符串,可能的值：
visible: 頁面內容至少是部分可見。 在實際中，這意味着頁面是非最小化窗口的前景選項卡。
hidden: 頁面內容對用戶不可見。 在實際中，這意味着文檔可以是一個后台標簽，或是最小化窗口的一部分，或是在操作系統鎖屏激活的狀態下。
prerender: 頁面內容正在被預渲染且對用戶是不可見的(被document.hidden當做隱藏). 文檔可能初始狀態為prerender，但絕不會從其它值轉為該值。 注釋：瀏覽器支持是可選的。
unloaded: 頁面正在從內存中卸載。 注釋：瀏覽器支持是可選的。
3、Document.onvisibilitychange
EventListener提供在visibilitychange事件被觸發時要調用的代碼。
3.羅列一些使用場景：
1.網站有圖片輪播效果，只有在用戶觀看輪播的時候，才會自動展示下一張幻燈片。
2.顯示信息儀表盤的應用程序不希望在頁面不可見時輪詢服務器進行更新。
3.頁面想要檢測是否正在渲染，以便可以准確的計算網頁瀏覽量（埋點使用場景）。
4.當設備進入待機模式時，網站想要關閉設備聲音（用戶按下電源鍵關閉屏幕）。
visibilitychange監聽事件
你可以在document對象上注冊一個監聽visibilitychange事件，根據document.hidden或者document.visibilityState屬性做一些業務邏輯：
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延時才可以成功執行播放事件。具體機制不太清楚