Page Visibility API


웹브라우저 창을 최소화하거나 다른 탭으로 전환하게 되면; API는 visibilitychange 이벤트를 전송하여 리스너에게 페이지 상태가 변경되었음을 알리게 되고, 이를 감지하여 일부 작업을 수행하거나 다르게 동작하도록 할 수 있다. 곧, 사용자는 동영상에서 기존 재생 중인 위치를 잃지 않고, 동영상의 오디오가 새 활성화 탭의 오디오를 방해하지 않으며, 그동안 사용자가 동영상을 놓치지 않을 수 있게 되는 것이다:


음악을 틀어놓고 다른 탭으로 이동해보십시오..

                                
                                    
                                
                            
                                
                                    const audio_ex= document.querySelector("#my_audio_ex")

                                    document.addEventListener("visibilitychange", () => { // 브라우저 창이나 탭(및 앱) 전환 시..
                                        if (document.hidden) audio_ex.pause() // 탭 전환 및 최소화 시; 일시 정지한다
                                        else audio_ex.play() // 중단된 지점에서 다시 플레이한다
                                    });
                                
                            

document.hidden은 페이지가 사용자에게 숨겨진 것으로 간주되는 상태이면; true 를, 아니면; false 를 반환한다!