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() のプロミスの返値を使用して取得します。

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

関連情報