頁籤隱藏展示來監聽原生返回

需求：APP內頁面音頻播放時，原生app的返回或者安卓ios的物理鍵返回返回時，暫停音頻播放。

方法：瀏覽器標籤頁被隱藏或顯示的時候會觸發visibilitychange事件.點擊查看介紹

例子：當你切換到另一個標籤時視頻會暫停，當你返回到當前標籤時視頻會再次播放

音頻例子

html

<div style="background:#eca2a2;min-height:80px;margin-top:20px;">
    <audio id="audio" controls>
        <source src="./p3.mp3" type="audio/mp3">
        您的瀏覽器不支持 audio 元素。
     </audio>
</div>

js

// 監聽頁面是否可見
// 設置隱藏屬性和改變可見屬性的事件的名稱
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}

var videoElement = document.getElementById("audio");
function handleVisibilityChange() {
   if (document[hidden]) {
        alert('要關閉')
        videoElement.pause();
    }

}

當音頻是多個的時候

html

<div id="audio-bar">
      <audio controls>
         <source src="./p3.mp3" type="audio/mp3">
            您的瀏覽器不支持 audio 元素。
      </audio>
        <audio controls>
         <source src="./p3.mp3" type="audio/mp3">
            您的瀏覽器不支持 audio 元素。
      </audio>
       <audio controls>
         <source src="./p3.mp3" type="audio/mp3">
            您的瀏覽器不支持 audio 元素。
      </audio>
</div>

js

// 如果頁面是隱藏狀態，則暫停音頻
function handleVisibilityChange() {
    // if (document[hidden]) {
    //     alert('要關閉')
    //     videoElement.pause();
    // } else {
    //     //  videoElement.play();
    // }
    var domList = document.querySelectorAll('audio');
    console.log(domList)
    for (var i = 0;i < domList.length;i++) {
        domList[i].pause()
    }
}

// 如果瀏覽器不支持addEventListener 或 Page Visibility API 給出警告
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
    console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {

    // 處理頁面可見屬性的改變
    document.addEventListener(visibilityChange, handleVisibilityChange, false);

    
}