国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

頁面進入后臺如何關閉背景音樂

abson / 2659人閱讀

摘要:之前在做小程序的時候遇到一個問題小程序中有一個頁面,這個頁面中用嵌套了一個頁面,這個頁面中有背景音樂,背景音樂播放的情況下,點擊小程序右上角退出的小圓圈背景音樂仍然播放。

之前在做小程序的時候遇到一個問題:小程序中有一個webview頁面,這個頁面中用iframe嵌套了一個H5頁面,這個H5頁面中有背景音樂,背景音樂播放的情況下,點擊小程序右上角退出的小圓圈背景音樂仍然播放。

預期效果:點擊小程序退出后背景音樂停止播放,再次打開小程序后背景音樂繼續播放,如果用戶停止了音樂,退出再次打開時背景音樂仍然是停止狀態

思路過程:因為H5頁面是嵌套的,音樂在H5頁面中,無法通過小程序的生命周期去控制音樂的播放狀態,所以如何能在H5頁面中監聽頁面的顯隱藏狀態去控制音樂

visibilitychange:瀏覽器標簽頁被隱藏或顯示的時候會觸發

適用場景:

瀏覽器標簽頁切換時觸發

微信環境下切成浮窗狀態觸發

小程序嵌套頁面,小程序切換頁面或進入后臺觸發

其他頁面顯隱切換時觸發

解決方案:

let statusBeforeHide = true; // 記錄頁面切換到后臺時音樂的播放狀態,如果用戶進行了音樂關閉操作,則將該狀態置為false
// document.hidden boolean 頁面當前是否不可見
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.");
}

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

拓展:
1.可在頁面后臺運行時清掉一些定時器,頁面顯示時再重新設置定時器,節省性能

作者:易企秀——sunny

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106520.html

相關文章

  • 頁面進入后臺如何關閉背景音樂

    摘要:之前在做小程序的時候遇到一個問題小程序中有一個頁面,這個頁面中用嵌套了一個頁面,這個頁面中有背景音樂,背景音樂播放的情況下,點擊小程序右上角退出的小圓圈背景音樂仍然播放。 之前在做小程序的時候遇到一個問題:小程序中有一個webview頁面,這個頁面中用iframe嵌套了一個H5頁面,這個H5頁面中有背景音樂,背景音樂播放的情況下,點擊小程序右上角退出的小圓圈背景音樂仍然播放。 預期效果...

    Travis 評論0 收藏0
  • 從URL輸入到頁面展現到底發生什么?

    摘要:定義文檔資源的名稱二域名解析在瀏覽器輸入網址后,首先要經過域名解析,因為瀏覽器并不能直接通過域名找到對應的服務器,而是要通過地址。什么是域名解析協議提供通過域名查找地址,或逆向從地址反查域名的服務。 前言 打開瀏覽器從輸入網址到網頁呈現在大家面前,背后到底發生了什么?經歷怎么樣的一個過程?先給大家來張總體流程圖,具體步驟請看下文分解!本文首發地址為GitHub博客,寫文章不易,請多多支...

    elva 評論0 收藏0
  • 從URL輸入到頁面展現到底發生什么?

    摘要:定義文檔資源的名稱二域名解析在瀏覽器輸入網址后,首先要經過域名解析,因為瀏覽器并不能直接通過域名找到對應的服務器,而是要通過地址。什么是域名解析協議提供通過域名查找地址,或逆向從地址反查域名的服務。 前言 打開瀏覽器從輸入網址到網頁呈現在大家面前,背后到底發生了什么?經歷怎么樣的一個過程?先給大家來張總體流程圖,具體步驟請看下文分解!本文首發地址為GitHub博客,寫文章不易,請多多支...

    WrBug 評論0 收藏0
  • 微信小程序知識總結及案例集錦

    摘要:對微信小程序進行全局配置,決定頁面文件的路徑窗口表現設置網絡超時時間設置多等。 微信小程序知識總結及案例集錦 微信小程序的發展會和微信公眾號一樣,在某個時間點爆發 學習路徑 微信小程序最好的教程肯定是官方的文檔啦,點擊這里直達 微信官方文檔 認真跟著文檔看一遍,相信有vue前端經驗的看下應該就能上手了,然后安裝 微信小程序開發者工具 新建一個quick start項目,了解代碼結構,...

    sean 評論0 收藏0

發表評論

0條評論

abson

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<