より多くのサイトで動画のピクチャーインピクチャーを自動的に開始

Benjamin Keen

François Beaufort

公開日: 2026 年 3 月 18 日

Chrome 142 以降では、音声や動画を再生するウェブアプリがメディアセッションのアクションハンドラを登録している場合、自動的にピクチャーインピクチャーモードに切り替わるようになりました。音楽プレーヤーや動画プレーヤーにとっては大きな追加機能ですが、デベロッパーがサポートを明示的に実装する必要があります。

シームレスなメディアマルチタスクエクスペリエンスを提供し、ピクチャーインピクチャー（PIP）の検出可能性を向上させるため、Chrome ではブラウザが開始する自動 PIP が導入されています。この機能を使用すると、メディアセッションアクションハンドラが登録されていないサイトで、動画の PIP ウィンドウが自動的に開きます。これにより、タブを切り替えてもメディアコンテンツが表示されたままになります。

手順

パソコンで Chrome 142 以降を使用します。
chrome://flags/#browser-initiated-automatic-picture-in-picture で [ブラウザが開始した自動ピクチャーインピクチャー] を有効にして、Chrome を再起動します。
動画サイトにアクセスして動画を再生します（例）。
別の Chrome タブに切り替えて、動画の PiP ウィンドウをトリガーします。

仕組み

メディアを再生中に別のタブに切り替えると、Chrome はメディアを常に最前面に表示する動画の PIP ウィンドウに自動的に移動できます。既存の「メディア再生の自動 PIP 機能」は、動画または任意の HTML コンテンツ（Document Picture-in-Picture API を使用）のいずれかをサポートしますが、ブラウザで開始されたリクエストでは常に標準の動画 PIP ウィンドウが開きます。

高品質で邪魔にならないユーザーエクスペリエンスを確保するため、Chrome は厳格な条件が満たされた場合にのみこの動作をトリガーします。

セーフブラウジングサービスによると、トップフレームの URL は安全です。
メディアは上部のフレームにあります。
メディアの音声が過去 2 秒以内に聞こえた。
メディアが音声フォーカスを取得して再生中です。
「標準」プレーヤーが 1 つ存在します。つまり、再生済みで MediaStream を使用していないミュート解除済みのメディア要素です。
メディア要素には動画トラックが必要です。
サイトでカメラやマイクが積極的に使用されていません。
ユーザーのメディアエンゲージメント指数のしきい値を超えているため、サイトが頻繁に使用されていることを示しています。この条件は、ユーザーがこの機能を明示的に許可または拒否していない場合に適用されます。
現在、PIP ウィンドウは開いていません。別の PIP ウィンドウがすでに開いている場合、Chrome は自動切り替えをトリガーしません。

ブラウザが開始する自動 PiP（サイトに enterpictureinpicture アクションハンドラがない場合）とメディア再生の自動 PiP（サイトがハンドラを登録している場合）の比較。

ユーザーの管理とプライバシー

ブラウザで開始された自動 PiP は、サイトで開始されたリクエストと同じユーザー権限と設定を尊重します。サイトが初めて自動的に PiP モードに切り替わると、Chrome は、今後もそのサイトでこの動作を許可するかどうかを尋ねる権限ダイアログを表示します。

ユーザーは、[サイトの設定] からいつでもこれらの権限を管理することもできます。

デベロッパーによる管理とオプトアウト

この機能はほとんどの動画サイトで初期設定のまま動作するように設計されていますが、この動作を無効にすることもできます。

独自のハンドラを実装する

ウェブアプリが enterpictureinpicture アクションのメディアセッションアクションハンドラをすでに登録している場合、実装が優先され、Chrome は独自の自動切り替えを開始しません。

Chrome がトランジションが適切であると判断したときの動作をカスタマイズする場合は、enterpictureinpicture アクションハンドラに MediaSessionActionDetails の reason が含まれます。reason が contentoccluded（タブが非表示になったためブラウザがリクエストを開始したことを意味します）かどうかを確認し、処理方法を決定できます。

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

メディアセッションのベストプラクティス

ブラウザで開始される自動 PiP では、メディアセッションの構成によって、Chrome がコンテンツを理解して操作できるようになります。適切に構成された MediaSession により、ユーザーは正確なコントロールと情報を使用して、高品質な PiP ウィンドウを体験できます。

進行状況バーを同期する

setPositionState API が使用され、メディアセッションの位置が適切に更新されない場合、メディアの再生中に PiP ウィンドウに不正確な進行状況バーが表示されます。これを防ぐため、position state は、navigator.mediaSession.setPositionState() を使用して常に更新または設定解除してください（たとえば、メディアソースが変更またはリセットされた場合など）。これにより、再生中のメディアの正しい位置が PiP ウィンドウに反映されます。

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

トランジションを適切に処理する

サイトで「次のエピソード」が自動的に再生される場合は、MediaSession アクションハンドラとメタデータが移行中も有効で正確であることを確認してください。「次へ」要素への移行中にアクションハンドラが削除または設定解除されると、PiP ウィンドウでハンドラによって提供されていた機能が失われる可能性があります。

フルコントロールを有効にする

基本的な再生と一時停止に加えて、seekto、previoustrack、nexttrack のハンドラの実装を検討してください。これにより、ユーザーは元のタブに戻ることなく、PIP ウィンドウからコンテンツを直接操作できます。

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

意見交換とフィードバックの提供

この動作に関するフィードバックや問題が発生した場合は、crbug.com で共有してください。

より多くのサイトで動画のピクチャー イン ピクチャーを自動的に開始 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

手順

仕組み