Picture-in-Picture (PiP) とは？

Picture-in-Picture は、現在のタブからビデオをポップアウトして、画面上の他のすべての上に留まる小さなフローティングウィンドウに配置するブラウザ機能です。どこにでも移動でき、サイズを変更でき、他のタブを閲覧したり、ドキュメントを作成したり、コンピュータで他の作業をしたりしながら視聴を続けることができます。ビデオは常に表示されたままです。

PiP は標準化された Web API を通じて、すべての最新デスクトップブラウザ（Chrome、Edge、Firefox、Safari）に組み込まれています。プラグインや拡張機能は不要で、フローティングウィンドウはオペレーティングシステムによって完全に管理されるため、アプリケーションを切り替えても保持されます。

ツールの説明

このツールは、任意の直接ビデオ URL を HTML5 プレイヤーに読み込み、ワンクリックで Picture-in-Picture モードで起動できます。公開アクセス可能なビデオファイルへのリンクを貼り付け、読み込んで、「Picture-in-Picture を起動」を押すと、ビデオがフローティングオーバーレイウィンドウに分離されます。

サポートされている形式

ブラウザのネイティブ HTML5 プレイヤーがサポートするビデオ形式：

  • MP4（H.264 / H.265）— 普遍的にサポート
  • WebM（VP8 / VP9 / AV1）— Chrome、Firefox、Edge でサポート
  • OGG / OGV（Theora）— Firefox と Chrome でサポート
  • MOV — Safari でサポート。その他の場所ではサポートが限定的
  • M4V — ほとんどの Chromium ベースのブラウザと Safari でサポート

ビデオファイルは HTTP/HTTPS で提供される必要があり、ブラウザがそれを読み込むためにサーバーがクロスオリジンリクエスト（CORS）を許可する必要があります。

仕組み

  1. 入力した URL は、標準的な HTML5 <video> 要素の src として読み込まれます。
  2. 「Picture-in-Picture を起動」をクリックすると、ブラウザはその要素でネイティブ requestPictureInPicture() API を呼び出します。
  3. ブラウザはビデオを OS ウィンドウマネージャーによって管理されるフローティングウィンドウに分離します。
  4. 「Picture-in-Picture を終了」をクリック（またはフローティングウィンドウの閉じるボタン）すると、exitPictureInPicture() が呼び出され、ビデオはプレイヤーに戻ります。

機能

  • ブラウザから直接 PiP を起動・終了できるワンクリック操作 — 拡張機能は不要
  • 公開アクセス可能な任意の直接ビデオ URL で動作
  • 16:9 アスペクト比プレイヤーと完全なネイティブコントロール（再生、一時停止、シーク、音量、フルスクリーン）
  • PiP に入る前に自動的に再生を開始するため、ビデオがフリーズしません
  • 現在のブラウザで PiP がサポートされていない場合を検出し、明確なメッセージを表示します

ユースケース

  • コードエディタまたは別のブラウザタブで手順に従いながら、フローティングウィンドウでチュートリアルビデオを視聴
  • 他のアプリケーションで作業しながら、ライブストリームまたは記録されたビデオフィードを監視
  • ドキュメント、スプレッドシート、またはデザインファイルを編集しながら、ビデオリファレンスを表示したままにする

制限事項

  • ビデオサーバーは、異なるオリジンからファイルをフェッチできるようにする必要があります（CORS ヘッダーが必須）。多くの CDN と直接ファイルホストはすでにこれを行っていますが、そうでないものもあります。
  • PiP はすべてのブラウザで利用できるわけではありません。特に一部のモバイルブラウザと古いデスクトップバージョンは API をサポートしていません。
  • HLS（.m3u8）や DASH（.mpd）などのストリーミングプレイリスト形式は直接サポートされていません。プログレッシブダウンロード URL のみが機能します。

FAQ

ビデオが読み込みに失敗するのはなぜですか？ ビデオをホストしているサーバーが、クロスオリジン読み込みを許可する Access-Control-Allow-Origin ヘッダーを含めていないか、URL が認証を必要とする可能性があります。ビデオファイルへの直接公開リンクを試してください。

PiP ボタンが無効になっているのはなぜですか？ URL を入力して「ビデオを読み込む」をクリックしてビデオを読み込む必要があります。ソースが設定されると、ボタンがアクティブになります。

モバイルで動作しますか？ Picture-in-Picture API はモバイルブラウザではサポートが限定的です。iOS では Safari はビデオの PiP をサポートしていますが、動作が異なる場合があります。Android では、Chrome はバージョンと OS 設定に応じてサポートしている場合があります。