成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

h5 移動(dòng)端 關(guān)于監(jiān)測(cè)切換程序到后臺(tái)或息屏事件和visibilitychange的使用

chuyao / 3442人閱讀

摘要：需求當(dāng)我們頁(yè)面上正在播放視頻或者播放背景音樂時(shí)，我們屏幕自動(dòng)息屏或者切換程序去看消息時(shí)，我們希望暫停視頻或背景音樂，回到程序我們希望繼續(xù)播放視頻或播放背景音樂。

需求：當(dāng)我們頁(yè)面上正在播放視頻或者播放背景音樂時(shí)，我們屏幕自動(dòng)息屏或者切換程序去看消息時(shí)，我們希望暫停視頻或背景音樂，回到程序我們希望繼續(xù)播放視頻或播放背景音樂。
小程序上提供了 onUnload返回 onHide退出 onShow重新進(jìn)入等生命周期，h5提供了一個(gè)visibilitychange，可以幫我們監(jiān)測(cè)這種情況。

document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      audio.pause()
      video.pause()
    } else {
      setTimeout(() => {
        bgMusic.play()
        video.play()
      }, 2000)
    }
});

關(guān)于2s延時(shí)：在測(cè)試中發(fā)現(xiàn)，當(dāng)回到頁(yè)面后100%會(huì)執(zhí)行else 但已知在IOS上只是息屏else里的play事件能執(zhí)行成功，但如果是點(diǎn)擊home鍵或者切換到其他程序則需要加2000延時(shí)才可以成功執(zhí)行播放事件。具體機(jī)制不太清楚，如果有哪位大神指導(dǎo)其中緣由請(qǐng)指教。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100300.html

相關(guān)文章

  • 移動(dòng)端倒計(jì)時(shí)切到后臺(tái)切回來不繼續(xù)執(zhí)行的問題

    摘要：?jiǎn)栴}描述這個(gè)倒計(jì)時(shí)按鈕，如果頁(yè)面在移動(dòng)端切到后臺(tái)和切回來，倒計(jì)時(shí)停止運(yùn)行。相關(guān)代碼為了兼容，切換到后臺(tái)繼續(xù)運(yùn)行 問題描述 showImg(https://segmentfault.com/img/bVbiVSh);這個(gè)倒計(jì)時(shí)按鈕，如果頁(yè)面在移動(dòng)端切到后臺(tái)和切回來，倒計(jì)時(shí)停止運(yùn)行。但是在pc端沒有這個(gè)問題。倒計(jì)時(shí)代碼如下 let downCount = () => { ...

    Aomine 評(píng)論0 收藏0

  • 頁(yè)面可見與不可見的事件——visibilitychange

    摘要：需求背景在最近的項(xiàng)目中，使用了和定時(shí)器實(shí)現(xiàn)了隨機(jī)走動(dòng)物體的功能，走動(dòng)的物體還會(huì)有的動(dòng)畫。上述代碼中，維護(hù)了兩個(gè)數(shù)組，分別代表頁(yè)面進(jìn)入可見狀態(tài)時(shí)需要執(zhí)行的回調(diào)列表和進(jìn)入不可見狀態(tài)時(shí)需要執(zhí)行的回調(diào)列表。 需求背景 在最近的項(xiàng)目中，使用了transition和定時(shí)器實(shí)現(xiàn)了隨機(jī)走動(dòng)物體的功能，走動(dòng)的物體還會(huì)有animation的動(dòng)畫。我發(fā)現(xiàn)在手機(jī)中，按home鍵或者切換應(yīng)用，使頁(yè)面不在屏幕中，...

    libxd 評(píng)論0 收藏0

  • 頁(yè)面進(jìn)入后臺(tái)如何關(guān)閉背景音樂

    摘要：之前在做小程序的時(shí)候遇到一個(gè)問題小程序中有一個(gè)頁(yè)面，這個(gè)頁(yè)面中用嵌套了一個(gè)頁(yè)面，這個(gè)頁(yè)面中有背景音樂，背景音樂播放的情況下，點(diǎn)擊小程序右上角退出的小圓圈背景音樂仍然播放。 之前在做小程序的時(shí)候遇到一個(gè)問題：小程序中有一個(gè)webview頁(yè)面，這個(gè)頁(yè)面中用iframe嵌套了一個(gè)H5頁(yè)面，這個(gè)H5頁(yè)面中有背景音樂，背景音樂播放的情況下，點(diǎn)擊小程序右上角退出的小圓圈背景音樂仍然播放。 預(yù)期效果...

    Travis 評(píng)論0 收藏0

  • 頁(yè)面進(jìn)入后臺(tái)如何關(guān)閉背景音樂

    摘要：之前在做小程序的時(shí)候遇到一個(gè)問題小程序中有一個(gè)頁(yè)面，這個(gè)頁(yè)面中用嵌套了一個(gè)頁(yè)面，這個(gè)頁(yè)面中有背景音樂，背景音樂播放的情況下，點(diǎn)擊小程序右上角退出的小圓圈背景音樂仍然播放。 之前在做小程序的時(shí)候遇到一個(gè)問題：小程序中有一個(gè)webview頁(yè)面，這個(gè)頁(yè)面中用iframe嵌套了一個(gè)H5頁(yè)面，這個(gè)H5頁(yè)面中有背景音樂，背景音樂播放的情況下，點(diǎn)擊小程序右上角退出的小圓圈背景音樂仍然播放。 預(yù)期效果...

    abson 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<