メディアの再生時にピクチャー イン ピクチャーを自動的に開始する

François Beaufort
François Beaufort

公開日: 2025 年 2 月 5 日

Chrome 120 以降では、ユーザーが現在のタブからフォーカスを切り替えると、ビデオ会議ウェブアプリでピクチャー イン ピクチャー ウィンドウが自動的に開くようになりました。これは、ドキュメントのプレゼンテーション中に、他のタブやウィンドウを使用しながら参加者をリアルタイムで確認してやり取りしたいプレゼンターに便利です。詳しくは、ビデオ会議ウェブアプリの自動ピクチャー イン ピクチャーをご覧ください。

Chrome 134 以降では、音声や動画を再生するウェブアプリがピクチャー イン ピクチャー モードに自動的に移行できるようになりました。つまり、ウェブ上の音楽プレーヤーと動画プレーヤーは、ユーザーがタブを切り替えたときにミニプレーヤー ウィンドウにシームレスに切り替わるようになり、手動で有効にする必要がなくなります。

Spotify ユーザーがタブを切り替えると、ピクチャー イン ピクチャー ウィンドウが自動的に開いたり閉じたりしていた。

このようなメディア再生のユースケースをサポートするため、Chrome 134 以降では、デスクトップ ウェブアプリでピクチャー イン ピクチャーを自動的に開始できるようになりました。ただし、ユーザー エクスペリエンスを向上させるため、いくつかの制限があります。ウェブアプリがメディア再生の自動ピクチャーインピクチャーの対象となるのは、以下の条件をすべて満たしている場合のみです。

  • トップフレームの URL は、セーフ ブラウジング サービスによると安全です。

  • メディアは上部のフレームにあります。

  • 過去 2 秒以内にメディアの音声が聞こえた。

  • メディアに音声フォーカスがある。

  • メディアが再生中である。

  • "enterpictureinpicture" アクションのメディア セッション アクション ハンドラが登録されている。

  • ユーザーの メディア エンゲージメント インデックスのしきい値を超えています。これは、ユーザーがこのウェブアプリでメディアを頻繁に使用していることを示します。これは、ユーザーのブラウザの設定が [ピクチャー イン ピクチャーへの切り替えをリクエスト可能] になっている場合に適用されます。ユーザーがウェブアプリがピクチャー イン ピクチャーに入ることを明示的に許可している場合、この条件は適用されません。

Chrome ブラウザのサイト情報ペインにあるピクチャー イン ピクチャーの自動設定。
Chrome ブラウザのサイト情報ペインでの自動ピクチャー イン ピクチャーの設定。

バグ 386193409 では、サーフェシング条件の実装を追跡して、デバッグと実装を容易にしています。

別のピクチャー イン ピクチャー ウィンドウがすでに開いている場合、Chrome ではピクチャー イン ピクチャーの自動開始はトリガーされません。このルールは、既存のピクチャー イン ピクチャー ウィンドウが自動的に開いて閉じようとしている場合は適用されません。

ウェブアプリが要件を満たしている場合、フォーカスを別のタブに切り替えると、"enterpictureinpicture" アクションのメディア セッション アクション ハンドラ コールバック関数がトリガーされます。これにより、ウェブアプリはユーザー操作なしでピクチャー イン ピクチャー ウィンドウを開くことができます。その後、サイトがピクチャー イン ピクチャーを自動的に開始することを許可するかどうかを尋ねる権限ダイアログが表示されることがあります。このダイアログでは、毎回、今回のみ、または許可しないのいずれかを選択できます。

ピクチャー イン ピクチャー ウィンドウに表示される権限オーバーレイ。サイトにピクチャー イン ピクチャーの自動開始を許可するかどうかをユーザーに尋ねています。
ピクチャー イン ピクチャーの自動開始を許可するかどうかをユーザーに尋ねます。

<video> の Picture-in-Picture API を使用して HTML <video> 要素からピクチャー イン ピクチャー ウィンドウを開くか、Document Picture-in-Picture API を使用して常に最前面に表示されるウィンドウを開き、任意の HTML コンテンツを表示できます。ピクチャー イン ピクチャー ウィンドウは開いたときにフォーカスされず、ページが再び表示されると自動的に閉じられます。

次の例は、ユーザーがボタンをクリックしたときに HTML <video> 要素を再生する方法を示しています。次に、ピクチャー イン ピクチャー ウィンドウを開くコールバック関数を使用して、"enterpictureinpicture" アクションのメディア セッション アクション ハンドラを安全に登録します。このウィンドウには、<video> の Picture-in-Picture API を使用した動画が表示されます。

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

async function onPlayButtonClick() {
  // Play video.
  await video.play();
}

try {
  // Request video to automatically enter picture-in-picture when eligible.
  navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
    await video.requestPictureInPicture();
  });
} catch (error) {
  console.log("The enterpictureinpicture action is not yet supported.");
}

Document Picture-in-Picture API を示す VideoJS プレーヤーのデモを試す。または、Video Media SessionAudio Media Session のサンプルを試す。

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

フィードバックや問題がある場合は、crbug.com で共有してください。

リソース

謝辞

レビューを投稿していただいた Benjamin Keen 様、Frank Liberato 様に感謝いたします。