visibilitychange 이벤트 사용하기

Youtube 같은 웹사이트는 사용자가 웹페이지를 최소화했거나 다른 탭을 보고 있는지를 체크한 후 재생 중인 동영상의 화질을 낮추거나, 화면은 내보내지 않고 음성만 재생하거나, 자동 재생이 되지 않도록 막아 데이터 전송량을 줄이는 동작을 합니다.

 

visibilitychange 이벤트에 리스너로 등록된 함수는 웹페이지의 visibility 상태가 변하면, 즉 사용자가 탭을 다른 탭으로 변경하거나 원래 탭으로 복귀하는 등의 행동을 취하면 실행되게 됩니다.

 

Page Visibility API는 웹페이지가 visible 또는 hidden 상태를 확인하는 기능을 제공합니다.

function handleVisibilityChange() {
  if(document.hidden) {
    // the page is hidden
  } else {
    // the page is visible
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

위와 같이 코드를 작성해서 브라우저 창을 최소화해서 내리거나 다른 탭으로 이동하면 슬라이드 동영상을 자동 재생을 멈출 수 있게 됩니다.

또한, 개발자도구 콘솔 창에 아래 코드를 입력해 보면 현재 웹페이지에 visibilitychange 이벤트가 등록되었는지 확인 가능합니다.

getEventListeners(document).visibilitychange