Picture-in-picture (video)
Picture-in-Picture（PiP）は、ウェブページの動画を小さなフローティングウィンドウとして表示する機能です。ユーザーは他のタブやアプリケーションを操作しながら動画を視聴し続けることができます。動画コンテンツを提供するウェブサイトにおいて、マルチタスク中のユーザー体験を大幅に向上させる機能です。
概要
Picture-in-Picture（PiP）は、ウェブページの動画を小さなフローティングウィンドウとして表示する機能です。ユーザーは他のタブやアプリケーションを操作しながら動画を視聴し続けることができます。動画コンテンツを提供するウェブサイトにおいて、マルチタスク中のユーザー体験を大幅に向上させる機能です。
対応ブラウザ
デスクトップ
Chrome 69+
Edge 79+
Safari 13.1+
Firefox 未対応
モバイル
Chrome Android 105+
Safari iOS 13.4+
Firefox Android 未対応
基本構文
CSS
video:picture-in-picture {
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
:picture-in-picture {
border: 3px solid blue;
}実務での使いどころ
-
動画のピクチャーインピクチャー表示
ユーザーがページをスクロールしたり他のタブに切り替えても、動画を小さなウィンドウで視聴し続けられます。
注意点
- Firefoxではこの標準APIが未サポートであり、独自のPiP実装を持っています。クロスブラウザ対応には注意が必要です。
アクセシビリティ
- PiPウィンドウにも適切なコントロール（再生/一時停止、字幕切り替え）が表示されるよう、track要素で字幕を提供してください。