PIP 모드

프랑수아 보포르
프랑수아 보포르

2017년 4월부터 Android O용 Chrome에서 PIP 모드를 지원합니다. 이를 통해 사용자는 다른 창에 의해 차단되지 않는 작은 오버레이 창에서 <video> 요소를 재생하여 다른 작업을 하는 동안 시청할 수 있습니다.

방법은 다음과 같습니다. Chrome을 열고 동영상이 있는 웹사이트로 이동하여 전체 화면으로 재생합니다. 여기에서 홈 버튼을 눌러 Android 홈 화면으로 이동하면 재생 중인 동영상이 PIP 모드로 자동 전환됩니다. 여기까지입니다. 정말 멋지죠.

Android PIP 모드 사진
그림 1. Android PIP 모드 사진

그렇다면 데스크톱은 어떨까요? 웹사이트가 이러한 경험을 관리하고자 한다면 어떻게 해야 할까요?

다행히 PIP 모드 웹 API 사양의 초안이 작성되고 있습니다. 이 사양의 목표는 웹사이트에서 다음 속성 집합을 API에 노출하여 이 동작을 시작하고 제어할 수 있도록 하는 것입니다.

  • 동영상이 PIP 모드로 전환되거나 PIP 모드에서 나오면 웹사이트에 알립니다.
  • 웹사이트에서 사용자 동작을 통해 동영상 요소에서 PIP 모드를 실행하도록 허용합니다.
  • 웹사이트에서 PIP 모드를 종료하도록 허용합니다.
  • 웹사이트에서 PIP 모드가 트리거될 수 있는지 확인하도록 허용합니다.

다음과 같이 표시될 수 있습니다.

<video id="video" src="https://example.com/file.mp4"></video>

<button id="pipButton"></button>

<script>
    // Hide button if Picture-in-Picture is not supported.
    pipButton.hidden = !document.pictureInPictureEnabled;

    pipButton.addEventListener('click', function() {
    // If there is no element in Picture-in-Picture yet, let's request Picture
    // In Picture for the video, otherwise leave it.
    if (!document.pictureInPictureElement) {
        video.requestPictureInPicture()
        .catch(error => {
        // Video failed to enter Picture-in-Picture mode.
        });
    } else {
        document.exitPictureInPicture()
        .catch(error => {
        // Video failed to leave Picture-in-Picture mode.
        });
    }
    });
</script>

의견

어떻게 생각하세요? PIP 모드 WICG 저장소에서 의견을 제출하고 문제를 제기하세요. 여러분의 의견을 기다립니다.

Android의 기본 PIP 동작 방지

현재는 크기 조절 이벤트에 응답하고 창 크기가 크게 변경된 시점을 감지하여 Chrome에서 Android의 기본 PIP 동작을 사용하지 못하게 할 수 있습니다 (아래 코드 참고). 이는 영구적인 솔루션은 권장되지 않지만 웹 API가 구현될 때까지 임시 옵션을 제공합니다.

// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
    if (!document.fullscreenElement) {
    return;
    }

    var minimumScreenSize = 0.33;
    var screenArea = screen.width * screen.height;
    var windowArea = window.outerHeight * window.outerWidth;

    // If the size of the window relative to the screen is less than a third,
    // let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
    if ((windowArea / screenArea) < minimumScreenSize) {
    document.exitFullscreen();
    }
});