DOM

：

：

PictureInPictureWindow インターフェイス

　編集：2022.11.11 by T.A.

[Edge]。→、、

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

親 EventTarget ← PictureInPictureWindow 

interface PictureInPictureWindow : EventTarget {
  readonly attribute long width;
  readonly attribute long height;

  attribute EventHandler onresize;
};
インスタンス プロパティ
PictureInPictureWindow.height 読取専用
HTMLPictureInPictureWindow のピクチャー イン ピクチャーのフローティング ビデオ ウインドウの縦幅をピクセル数を表す数値で返します。
PictureInPictureWindow.width 読取専用
HTMLPictureInPictureWindow のピクチャー イン ピクチャーのフローティング ビデオ ウインドウの横幅をピクセル数を表す数値で返します。
イベント
resize
HTMLPictureInPictureWindow のフローティング ビデオ ウィンドウのサイズが変更されると発行されます。

onresize イベント ハンドラー プロパティからも利用できます。

例
／mdn

<button> と <video> を指定すると、ボタンをクリックするとビデオがピクチャー イン ピクチャー モードになります。 次に、イベントをアタッチして、フローティング ビデオ ウィンドウのサイズをコンソールに出力します。 

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

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(`The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`);
  // will print:
  // The floating window dimensions are: 640x360px
}

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