Page Visibility API로 유휴 또는 활성 브라우저 탭 감지

이 튜토리얼에서는 페이지 가시성 API를 사용하여 브라우저 탭이 유휴 상태인지(현재 표시되지 않음) 활성 상태인지 감지합니다. API 작동 방식을 이해하기 위해 탭이 유휴 상태가 될 때 API를 사용하여 비디오를 일시 중지합니다.

HTML5 비디오 플레이어를 설정하여 시작하겠습니다.

<video id="video" width="300" controls>
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />
  <p>Your browser doesn't support HTML video playback!</p>
</video>

이제 Page Visibility API를 사용할 JavaScript 기능에 대해 설명합니다. 먼저 페이지 가시성EventListener 이벤트가 발생했을 때 toggleVideoPlayback 함수를 호출하는 visibilitychange를 정의해야 합니다.

document.addEventListener("visibilitychange", toggleVideoPlayback);

이제 toggleVideoPlayback 함수를 만들어 보겠습니다.

const toggleVideoPlayback = () => {
  const video = document.getElementById("video");        
  return document.hidden ? video.pause() : video.play();           
};

이 기능은 document.hidden 의 상태를 확인합니다. 이 값이 true이면 비디오가 일시 중지되고 false이면 비디오 재생이 다시 시작됩니다. 지금 브라우저에서 이 코드를 테스트할 수 있습니다. 비디오가 재생되는 동안 다른 탭으로 이동할 때 타임스탬프를 기록하여 돌아올 때 비디오가 일시 중지되었는지 확인할 수 있습니다.

이것이 이 튜토리얼의 전부입니다. 이제 Page Visibility API의 작동 방식을 이해하셨을 것입니다. Page Visibility API의 다른 용도에 대해 알아보고 싶다면 MDN Web Docs을 확인해 볼 가치가 있습니다.