封面圖是電腦版的ig,影片播放到一半接著切換分頁(ig退到背景)時,會自動暫停影片
原本今天想寫透過網頁開啟App的功能,但會碰到監聽網頁切換到背景
的議題
因此臨時更改主題~
監聽的方式其實比想像中簡單,透過visibilitychange
可以從文件看到觸發時機:
when a user
電腦: 開新頁,切換分頁,關閉分頁,縮小瀏覽器
手機: 切換應用程式
想看貓貓or想看ig暫停播放影片的下收連結:
https://www.youtube.com/watch?v=n2gon_zZTbE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>visibilitychange demo</title>
</head>
<body>
<audio
src="//samplelib.com/lib/preview/mp3/sample-15s.mp3"
controls=""
controlslist="nodownload"
id="myAudio"
loop
></audio>
<script>
document.addEventListener("visibilitychange", () => {
// ["hidden", "visible"]
if (document.visibilityState === "hidden") {
myAudio.pause();
} else if (document.visibilityState === "visible") {
myAudio.play();
}
console.log("document.hidden:", document.hidden);
});
</script>
</body>
</html>
https://ruanyifeng.com/blog/2018/10/page_visibility_api.html
根據上面文章所說 document.visibilityState
document.hidden
這兩個屬性盡量使用 visibilityState
比較好,因為 hidden
是以前的用法(歷史遺留)
有三種情況: "hidden", "visible", "prerender"
"unloaded" => 這個被棄用了
prerender =>預渲染很少用
hidden =>隱藏
visible =>可見
只要透過visibilitychange
事件監聽,再判斷可見狀態就能達成暫停影片的需求囉~