[PageVisivilityAPI]브라우저 최소화 이벤트

안녕하세요?

오랜만이네요.

직장일이 바쁘다보니 쓰질 못하고 있었습니다.

이번에 작성하는 API는 Page Visivility API인데요

웹에서 최소화 했을 때에도 웹에서 재생하던 Video나 Audio를 계속 재생하도록 하기위해서 방법을 찾던 도중 찾은 API입니다.

MDN Web docs에서 확인할 수 있는 자료인데요.

원문 주소는 https://developer.mozilla.org/ko/docs/Web/API/Page_Visibility_API 입니다.

sample 소스 그대로 붙여놓고 사용해도 충분히 가져다 쓸 수 있는 함수입니다.

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
    if (document[hidden]) {
        if( player.getState() == "play" ){
            player.play();
        } else {
        }
    }
}
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
    console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
}

JW Player를 사용하고 있는 페이지에서 사용한 소스입니다.

handleVisibilityChange() 함수에서 상태값을 변경하는데요.

플레이어가 재생상태였다면 최소화했을 경우에도 재생하도록 했습니다.

물론 제가 했을 경우에는 됬지만 다른 분들이 했을 경우 상황이 달라서 안될수도 있다는 점을 주의해주세요.

코드는 꼭 똑같으란 법이 없으니까요.

아직 시간이 넉넉한 편이 아니라서 이것만 쓰고 저는 가보겠습니다.

여유가 있을 때 조금더 멋지고 이해하기 쉽도록 수정하고 새로운 글을 올리도록 하겠습니다..

그럼 이만!!