ピクチャー イン ピクチャーの未来

François Beaufort
François Beaufort
GitHub

Document Picture-in-Picture API が登場する前は、ピクチャー イン ピクチャー ウィンドウに配置できるのは HTML の <video> 要素のみでした。この新しい API を使用すると、任意の HTML コンテンツを表示する「常に表示状態のウィンドウ」を開くことができます。この機能は、パソコン版 Chrome 111 以降、オリジン トライアルとしてご利用いただけます。

<ph type="x-smartling-placeholder">
</ph> Sintel の予告編動画を再生しているピクチャー イン ピクチャー ウィンドウ。
Document Picture-in-Picture API で作成されたピクチャー イン ピクチャーのウィンドウ（デモ）。

新しい API は、既存の <video> 用 Picture-in-Picture API よりもはるかに多くの機能を提供します。たとえば、字幕、再生リスト、時間スクラブ、動画に高評価 / 低評価を付けるなどのカスタム コントロールとインプットを提供することで、ピクチャー イン ピクチャーの動画プレーヤー エクスペリエンスを向上させることができます。

ピクチャー イン ピクチャーでドキュメント全体を作成することで、ビデオ会議用ウェブアプリで複数の動画ストリームを 1 つのピクチャー イン ピクチャー ウィンドウにまとめることができます。キャンバスのハッキングに頼る必要はありません。また、メッセージの送信、他のユーザーのミュート、挙手などのカスタム コントロールも利用できます。

次のコード スニペットは、カスタム動画プレーヤーでピクチャー イン ピクチャーを切り替える方法を示しています。

async function togglePictureInPicture() {
  // Close Picture-in-Picture window if any.
  if (documentPictureInPicture.window) {
    documentPictureInPicture.window.close();
    return;
  }

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow({
    initialAspectRatio: 640 / 360,
    copyStyleSheets: true,
  });

  // Move video to the Picture-in-Picture window.
  const video = document.querySelector("#video");
  pipWindow.document.body.append(video);

  // Listen for the PiP closing event to move the video back.
  pipWindow.addEventListener("unload", (event) => {
    const videoContainer = document.querySelector("#videoContainer");
    const pipVideo = event.target.querySelector("#video");
    videoContainer.append(pipVideo);
  });
}

詳しくは、<video> だけでなく、あらゆる要素のピクチャー イン ピクチャーについての記事をご覧ください。

この段階ではデベロッパーの皆様からのフィードバックが非常に重要となりますので、ご提案やご質問がございましたら、GitHub で問題を報告してください。

ヒーロー画像作成者: Jakob Owens