PictureInPictureWindow

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

PictureInPictureWindow インターフェイスは、プログラムにより浮動動画ウィンドウの width、height、resize イベントを取得できるオブジェクトを表します。

このインターフェイスを持つオブジェクトは、 HTMLVideoElement.requestPictureInPicture() のプロミスの返値を使用して取得します。

インスタンスプロパティ

PictureInPictureWindow インターフェイスはプロパティを継承していません。

PictureInPictureWindow.width 読取専用: 浮動動画ウィンドウの幅を指定します。
PictureInPictureWindow.height 読取専用: 浮動動画ウィンドウの高さを指定します。

インスタンスメソッド

PictureInPictureWindow インターフェイスはメソッドを継承していません。

イベント

PictureInPictureWindow インターフェイスはイベントを継承していません。

resize: 浮動動画ウィンドウのサイズ変更時に PictureInPictureWindow に送られます。

例

<button> と <video> が指定されており、ボタンをクリックすると動画がピクチャインピクチャモードになります。次に、浮動動画ウィンドウの寸法をコンソールに出力するイベントを取り付けます。

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

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(
    `浮動動画ウィンドウの大きさ: ${pipWindow.width}x${pipWindow.height}px`,
  );
  // 表示例:
  // 浮動動画ウィンドウの大きさ: 640x360px
}

button.onclick = () => {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};