[Javascript] 웹 페이지 복귀 탐지 visibilitychange 사용하기

visibilitychange 이벤트는 브라우저의 Document 객체에서 발생하는 이벤트로, 페이지의 가시성이 변경될 때(예: 사용자가 탭을 전환하거나 브라우저 창을 최소화할 때) 발생합니다.

 

이 이벤트는 비디오 또는 오디오 플레이어를 일시 중지하거나 다시 시작하거나, 애니메이션을 중지하거나 시작하는 등 페이지가 표시되는지 숨겨지는지에 따라 다양한 작업을 수행하는 데 사용될 수 있습니다.

 

 

아래는 visibilitychange 이벤트를 사용하여 비디오 플레이어를 일시 중지 및 다시 시작하는 예시입니다:

 

// 비디오 엘리먼트에 대한 참조를 가져옵니다.
const video = document.querySelector('video');

// visibilitychange 이벤트에 대한 이벤트 리스너를 추가합니다.
document.addEventListener('visibilitychange', function() {
  // 페이지가 숨겨진 경우 비디오를 일시 중지합니다.
  if (document.hidden) {
    video.pause();
  } else {
    // 그렇지 않으면 페이지가 표시되는 경우 비디오를 다시 시작합니다.
    video.play();
  }
});

이 예제에서는 document.querySelector()를 사용하여 video 엘리먼트에 대한 참조를 먼저 가져옵니다.

 

그런 다음 document.addEventListener()를 사용하여 visibilitychange 이벤트에 대한 이벤트 리스너를 추가합니다.

 

이벤트가 발생하면 document.hidden 속성을 사용하여 페이지가 숨겨졌는지 확인합니다. 페이지가 숨겨진 경우 video.pause()를 사용하여 비디오를 일시 중지합니다. 페이지가 표시되는 경우 video.play()를 사용하여 비디오를 다시 시작합니다.

 

 

visibilitychange 이벤트를 이렇게 사용하면 페이지가 표시되는지 숨겨지는지에 따라 비디오 플레이어를 적절하게 일시 중지하거나 다시 시작할 수 있습니다. 이는 시스템 리소스를 절약하고 페이지에서의 사용자 경험을 향상시키는 데 도움이 됩니다.