ピクチャインピクチャとは？
ピクチャインピクチャ（Picture-in-Picture, PiP）は、動画を最前面に小窓で再生しながら、他のアプリやタブを操作できる機能です。テレビの副画面表示から着想を得ており、モバイルOSやWebブラウザに標準搭載されています。Web分野では W3C による仕様が整備され、<video> 要素を独立したウィンドウに表示できるようになっています。
主な対応環境
Android
Android 8.0（Oreo, API 26）以降で PiP が導入されました。動画再生やナビゲーションアプリなど、一部のアクティビティを PiP モードで動作させられます。
開発者はアクティビティに対して PiP サポートを宣言し、切り替え処理を組み込むことで利用可能です。
iPhone・iPad
iOS 14 以降、Safari や FaceTime、動画アプリなどで PiP が利用可能になりました。
設定で自動開始を有効にすると、ホーム画面や他アプリに移動しても動画が小窓で再生されます。
YouTube では公式に PiP の提供方法が説明されており、アプリ設定や契約状況によって利用可否が異なります。詳しくは
YouTube公式ヘルプ：モバイル デバイスでピクチャー イン ピクチャーを使用する方法 を参照してください。
macOS（デスクトップ）
Safari など主要ブラウザで PiP をサポート。Web 動画やストリーミングを小窓化し、作業を続けながら常に視聴できます。
ウィンドウは任意の場所に配置可能で、最前面に固定されます。
Webブラウザ
Chrome、Safari、Edge、Firefox など主要ブラウザが対応。
<video> 要素に対して JavaScript API で PiP を開始でき、ユーザー操作と連動した制御が可能です。
特に Firefox では
ピクチャーインピクチャー機能の紹介ページ が用意されており、Webブラウザ上での利便性が詳しく解説されています。
Web標準 API
基本的な仕組み
HTMLVideoElement.requestPictureInPicture() を呼び出すと、動画が PiP ウィンドウに表示されます。
PiP 開始時には enterpictureinpicture イベント、終了時には leavepictureinpicture イベントが発火します。
現在 PiP にある要素は Document.pictureInPictureElement で取得できます。
簡易コード例
<video id="video" src="sample.mp4" controls></video>
<button id="pipBtn">PiP 切替</button>
<script>
const video = document.getElementById('video');
const button = document.getElementById('pipBtn');
button.addEventListener('click', async () => {
if (document.pictureInPictureElement) {
await document.exitPictureInPicture();
} else {
const pipWindow = await video.requestPictureInPicture();
pipWindow.addEventListener('resize', () => {
console.log(`新サイズ: ${pipWindow.width}x${pipWindow.height}`);
});
}
});
</script>
Document Picture-in-Picture
従来は <video> 専用でしたが、新しい API により任意の HTML を PiP ウィンドウで表示可能になっています。
これにより、カスタムUI、会議アプリの参加者タイル表示、常時操作できるツールバーなど、柔軟な活用が可能です。
制御とセキュリティ
Permissions-Policy
サーバー管理者は HTTP ヘッダーで PiP の利用可否を制御できます。
例: Permissions-Policy: picture-in-picture=() と指定すると PiP が禁止され、requestPictureInPicture() 呼び出しは SecurityError を返します。
disablePictureInPicture 属性
<video disablepictureinpicture> を指定すると、その動画の PiP 利用をユーザーエージェントに抑制するよう依頼できます。
サイト運営者が意図的に PiP を無効化したい場合に用いられます。
実装のベストプラクティス
- UI トグルの設置 – PiP の開始・終了をボタンで明示し、状態をイベントで同期する。
- 例外処理の実装 – 非対応ブラウザやポリシー制御によるエラーをハンドリングする。
- 小窓サイズ対応 – PictureInPictureWindow.width/height を利用し、ウィンドウリサイズ時に表示を調整。
- 高度な体験の提供 – Document PiP を用いれば、単なる動画再生にとどまらず、インタラクティブな UI や複数ストリームの同時表示も可能。
まとめ
ピクチャインピクチャは、モバイルOS・デスクトップOS・Webブラウザで広く利用できる機能であり、作業と動画視聴の両立を可能にします。Web標準の API はシンプルなメソッドで制御でき、Permissions-Policy や disablepictureinpicture により利用範囲を柔軟に管理可能です。さらに Document PiP により、これまでにない新しい体験設計が可能になっています。
開発者はユーザー体験とセキュリティを両立しつつ、OS・ブラウザの対応状況を踏まえて実装を進めることが求められます。
