PIP 모드

François Beaufort

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

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

그렇다면 데스크톱은 어떨까요? 웹사이트에서 이 환경을 제어하려면 어떻게 해야 하나요?

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

• 동영상이 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 동작을 사용하지 못하도록 할 수 있습니다 (아래 코드 참고). 이는 영구적인 솔루션으로 권장되지는 않지만 Web 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();
    }
});