摘要:需求當我們頁面上正在播放視頻或者播放背景音樂時,我們屏幕自動息屏或者切換程序去看消息時,我們希望暫停視頻或背景音樂,回到程序我們希望繼續播放視頻或播放背景音樂。
需求:當我們頁面上正在播放視頻或者播放背景音樂時,我們屏幕自動息屏或者切換程序去看消息時,我們希望暫停視頻或背景音樂,回到程序我們希望繼續播放視頻或播放背景音樂。
小程序上提供了 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延時才可以成功執行播放事件。具體機制不太清楚,如果有哪位大神指導其中緣由請指教。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100300.html
摘要:問題描述這個倒計時按鈕,如果頁面在移動端切到后臺和切回來,倒計時停止運行。相關代碼為了兼容,切換到后臺繼續運行 問題描述 showImg(https://segmentfault.com/img/bVbiVSh);這個倒計時按鈕,如果頁面在移動端切到后臺和切回來,倒計時停止運行。但是在pc端沒有這個問題。倒計時代碼如下 let downCount = () => { ...
摘要:需求背景在最近的項目中,使用了和定時器實現了隨機走動物體的功能,走動的物體還會有的動畫。上述代碼中,維護了兩個數組,分別代表頁面進入可見狀態時需要執行的回調列表和進入不可見狀態時需要執行的回調列表。 需求背景 在最近的項目中,使用了transition和定時器實現了隨機走動物體的功能,走動的物體還會有animation的動畫。我發現在手機中,按home鍵或者切換應用,使頁面不在屏幕中,...
摘要:之前在做小程序的時候遇到一個問題小程序中有一個頁面,這個頁面中用嵌套了一個頁面,這個頁面中有背景音樂,背景音樂播放的情況下,點擊小程序右上角退出的小圓圈背景音樂仍然播放。 之前在做小程序的時候遇到一個問題:小程序中有一個webview頁面,這個頁面中用iframe嵌套了一個H5頁面,這個H5頁面中有背景音樂,背景音樂播放的情況下,點擊小程序右上角退出的小圓圈背景音樂仍然播放。 預期效果...
摘要:之前在做小程序的時候遇到一個問題小程序中有一個頁面,這個頁面中用嵌套了一個頁面,這個頁面中有背景音樂,背景音樂播放的情況下,點擊小程序右上角退出的小圓圈背景音樂仍然播放。 之前在做小程序的時候遇到一個問題:小程序中有一個webview頁面,這個頁面中用iframe嵌套了一個H5頁面,這個H5頁面中有背景音樂,背景音樂播放的情況下,點擊小程序右上角退出的小圓圈背景音樂仍然播放。 預期效果...
閱讀 632·2021-08-17 10:15
閱讀 1715·2021-07-30 14:57
閱讀 1971·2019-08-30 15:55
閱讀 2813·2019-08-30 15:55
閱讀 2704·2019-08-30 15:44
閱讀 662·2019-08-30 14:13
閱讀 2380·2019-08-30 13:55
閱讀 2588·2019-08-26 13:56