ピクチャーインピクチャー(Picture-in-Picture、略称:PiPまたはPinP)は、1つの画面上に小さな別ウィンドウを表示し、メインコンテンツと同時に別の映像や情報を表示する技術です。
スマートフォンの動画視聴中の操作や、テレビの裏番組の確認など、マルチタスク操作において非常に重要な役割を担っています。
本記事では、ピクチャーインピクチャーの仕組みや用途、Web・モバイル・テレビ分野での応用例をIT視点で詳しく解説します。
ピクチャーインピクチャー(PiP)の基本概念
ピクチャーインピクチャーとは何か?
ピクチャーインピクチャーは、1つのディスプレイ上に複数のコンテンツを同時に視覚的に表示するためのUI手法です。
主に動画やライブ配信などの映像コンテンツを、小さなオーバーレイウィンドウとして表示し、ユーザーが他の操作をしている間も再生を続けられるようにします。
この機能は単なるマルチウィンドウ表示とは異なり、常に前面に表示される固定レイヤーとして実装される点が特徴です。
モバイル端末におけるPiPの役割
AndroidやiOSでの実装と活用
Androidの場合
AndroidではAPI 26(Android 8.0 Oreo)以降で正式にPiPモードがサポートされており、以下のような用途で活用されています:
-
YouTubeやNetflixのバックグラウンド再生
-
ビデオ通話アプリ(Google Meet、Zoomなど)
-
カレンダーやメモを見ながらの映像確認
AndroidではPictureInPictureParams
を用いて画面サイズやアスペクト比を制御可能です。
iOSの場合
iOSではiPadOS 13以降、およびiOS 14以降のiPhoneで対応。
Safari経由での動画再生や、FaceTime通話などが小ウィンドウで継続表示されることでUXが向上しています。
WebアプリケーションにおけるPiPの活用
HTMLとJavaScriptによるPiP実装
WebではHTML5のVideo要素を使用してPiPを実装可能です。
ブラウザによっては標準でPiPをサポートしており、以下のようなJavaScriptコードで簡単に制御できます: