iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0
JavaScript

PM說: RD大大,這個功能要怎麼寫啊?系列 第 15

PM 說: 要怎麼監聽網頁切換到背景?

  • 分享至 

  • xImage
  •  

Yes

前言

封面圖是電腦版的ig,影片播放到一半接著切換分頁(ig退到背景)時,會自動暫停影片

原本今天想寫透過網頁開啟App的功能,但會碰到監聽網頁切換到背景的議題
因此臨時更改主題~

監聽的方式其實比想像中簡單,透過visibilitychange

可以從文件看到觸發時機:
when a user

  • navigates to a new page
  • switches tabs
  • closes the tab
  • minimizes or closes the browser
  • on mobile, switches from the browser to a different app

電腦: 開新頁,切換分頁,關閉分頁,縮小瀏覽器
手機: 切換應用程式

成果

播放聲音檔,當切換到背景時暫停撥放

想看貓貓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 是以前的用法(歷史遺留)

document.visibilityState 瀏覽器可見狀態

有三種情況: "hidden", "visible", "prerender"
"unloaded" => 這個被棄用了

prerender =>預渲染很少用
hidden =>隱藏
visible =>可見

只要透過visibilitychange事件監聽,再判斷可見狀態就能達成暫停影片的需求囉~


上一篇
PM 說: 要怎麼用網頁實現`ios滑動出現刪除按鈕`的效果?
下一篇
我想跟教練說: 網頁開啟 App 其實很麻煩
系列文
PM說: RD大大,這個功能要怎麼寫啊?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言