ピクチャー イン ピクチャー（PIP）

François Beaufort

2017 年 4 月以降、Android O 版 Chrome はピクチャー イン ピクチャーをサポートしています。これにより、他のウィンドウによってブロックされない小さなオーバーレイ ウィンドウで <video> 要素を再生できるため、他の作業をしながら視聴できます。

手順は次のとおりです。Chrome を開き、動画を含むウェブサイトにアクセスして、全画面表示で再生します。そこからホームボタンを押して Android のホーム画面に移動すると、再生中の動画が自動的にピクチャー イン ピクチャーに切り替わります。以上です。これはとても便利です。

はい。では、パソコンの場合はどうなりますか？ウェブサイトがそのエクスペリエンスを制御したい場合はどうすればよいですか？

現在、Picture-in-Picture Web API の仕様の草案作成が進んでいます。この仕様は、ウェブサイトが次の一連のプロパティを API に公開することで、この動作を開始して制御できるようにすることを目的としています。

• 動画がピクチャー イン ピクチャー モードに入ったときと、ピクチャー イン ピクチャー モードから抜けたときをウェブサイトに通知します。
• ウェブサイトがユーザー操作で動画要素のピクチャー イン ピクチャーをトリガーできるようにします。
• ウェブサイトでピクチャー イン ピクチャーを終了できるようにします。
• ピクチャー イン ピクチャーをトリガーできるかどうかをウェブサイトが確認できるようにします。

次のような表示になります。

<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>

フィードバック

ご意見をお聞かせください。フィードバックをお送りいただく際は、ピクチャー イン ピクチャー 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();
    }
});