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

資訊專(zhuān)欄INFORMATION COLUMN

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

Travis / 2414人閱讀

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

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

預(yù)期效果：點(diǎn)擊小程序退出后背景音樂(lè)停止播放，再次打開(kāi)小程序后背景音樂(lè)繼續(xù)播放，如果用戶停止了音樂(lè)，退出再次打開(kāi)時(shí)背景音樂(lè)仍然是停止?fàn)顟B(tài)

思路過(guò)程：因?yàn)镠5頁(yè)面是嵌套的，音樂(lè)在H5頁(yè)面中，無(wú)法通過(guò)小程序的生命周期去控制音樂(lè)的播放狀態(tài)，所以如何能在H5頁(yè)面中監(jiān)聽(tīng)頁(yè)面的顯隱藏狀態(tài)去控制音樂(lè)

visibilitychange：瀏覽器標(biāo)簽頁(yè)被隱藏或顯示的時(shí)候會(huì)觸發(fā)

適用場(chǎng)景：

瀏覽器標(biāo)簽頁(yè)切換時(shí)觸發(fā)

微信環(huán)境下切成浮窗狀態(tài)觸發(fā)

小程序嵌套頁(yè)面，小程序切換頁(yè)面或進(jìn)入后臺(tái)觸發(fā)

其他頁(yè)面顯隱切換時(shí)觸發(fā)

解決方案：

let statusBeforeHide = true; // 記錄頁(yè)面切換到后臺(tái)時(shí)音樂(lè)的播放狀態(tài)，如果用戶進(jìn)行了音樂(lè)關(guān)閉操作，則將該狀態(tài)置為false
// document.hidden boolean 頁(yè)面當(dāng)前是否不可見(jiàn)
let hiddenProperty = ("hidden" in document) ? "hidden"
        : ("webkitHidden" in document) ? "webkitHidden"
            : ("mozHidden" in document) ? "mozHidden" : null;
if (hiddenProperty) {
    let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, "visibilitychange");
    let onVisibilityChange = () => {
        console.log("visibilityChange");
        changePlay();
    };
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
} else {
    console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
}

// 更改音樂(lè)播放狀態(tài)
function changePlay() {
    if (document[hiddenProperty]) {
        // 頁(yè)面隱藏
        if (statusBeforeHide) {
            music.pause(); // 偽代碼，音樂(lè)暫停，但不改變statusBeforeHide
        }
    } else {
        // 頁(yè)面顯示
        if (statusBeforeHide) {
            music.play() // 偽代碼，如果statusBeforeHide是true,音樂(lè)繼續(xù)播放
        }
    }
}

拓展：
1.可在頁(yè)面后臺(tái)運(yùn)行時(shí)清掉一些定時(shí)器，頁(yè)面顯示時(shí)再重新設(shè)置定時(shí)器，節(jié)省性能

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

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

相關(guān)文章

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

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

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

  • 從URL輸入到頁(yè)面展現(xiàn)到底發(fā)生什么？

    摘要：定義文檔資源的名稱二域名解析在瀏覽器輸入網(wǎng)址后，首先要經(jīng)過(guò)域名解析，因?yàn)闉g覽器并不能直接通過(guò)域名找到對(duì)應(yīng)的服務(wù)器，而是要通過(guò)地址。什么是域名解析協(xié)議提供通過(guò)域名查找地址，或逆向從地址反查域名的服務(wù)。 前言 打開(kāi)瀏覽器從輸入網(wǎng)址到網(wǎng)頁(yè)呈現(xiàn)在大家面前，背后到底發(fā)生了什么？經(jīng)歷怎么樣的一個(gè)過(guò)程？先給大家來(lái)張總體流程圖，具體步驟請(qǐng)看下文分解！本文首發(fā)地址為GitHub博客,寫(xiě)文章不易，請(qǐng)多多支...

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

  • 從URL輸入到頁(yè)面展現(xiàn)到底發(fā)生什么？

    摘要：定義文檔資源的名稱二域名解析在瀏覽器輸入網(wǎng)址后，首先要經(jīng)過(guò)域名解析，因?yàn)闉g覽器并不能直接通過(guò)域名找到對(duì)應(yīng)的服務(wù)器，而是要通過(guò)地址。什么是域名解析協(xié)議提供通過(guò)域名查找地址，或逆向從地址反查域名的服務(wù)。 前言 打開(kāi)瀏覽器從輸入網(wǎng)址到網(wǎng)頁(yè)呈現(xiàn)在大家面前，背后到底發(fā)生了什么？經(jīng)歷怎么樣的一個(gè)過(guò)程？先給大家來(lái)張總體流程圖，具體步驟請(qǐng)看下文分解！本文首發(fā)地址為GitHub博客,寫(xiě)文章不易，請(qǐng)多多支...

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

  • 微信小程序知識(shí)總結(jié)及案例集錦

    摘要：對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑窗口表現(xiàn)設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間設(shè)置多等。 微信小程序知識(shí)總結(jié)及案例集錦 微信小程序的發(fā)展會(huì)和微信公眾號(hào)一樣，在某個(gè)時(shí)間點(diǎn)爆發(fā) 學(xué)習(xí)路徑 微信小程序最好的教程肯定是官方的文檔啦，點(diǎn)擊這里直達(dá) 微信官方文檔 認(rèn)真跟著文檔看一遍，相信有vue前端經(jīng)驗(yàn)的看下應(yīng)該就能上手了，然后安裝 微信小程序開(kāi)發(fā)者工具 新建一個(gè)quick start項(xiàng)目，了解代碼結(jié)構(gòu)，...

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

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

0條評(píng)論

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