PictureInPictureWindow

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

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

EventTarget PictureInPictureWindow

インスタンスプロパティ

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

PictureInPictureWindow.width 読取専用

浮動動画ウィンドウの幅を指定します。

PictureInPictureWindow.height 読取専用

浮動動画ウィンドウの高さを指定します。

インスタンスメソッド

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

イベント

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

resize

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

例

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

js
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;
  });
};

仕様書

Specification
Picture-in-Picture
# interface-picture-in-picture-window

ブラウザーの互換性

BCD tables only load in the browser

関連情報