PictureInPictureWindow: resize イベント

Limited availability

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

resize イベントは、浮動動画ウィンドウのサイズが変更されたときに発行されます。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("resize", (event) => {});

onresize = (event) => {};

イベント型

PictureInPictureEvent です。Event を継承しています。

Event PictureInPictureEvent

イベントプロパティ

このインターフェイスには以下のプロパティに加え、親である Event から継承したプロパティもあります。

PictureInPictureEvent.pictureInPictureWindow

サイズが変更された PictureInPictureWindow を返します。

例

ウィンドウのサイズをログ出力

html
<p>Resize the floating video window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
<video id="video" src="" muted autoplay></video>
js
const video = document.querySelector("#video");
const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function resize(evt) {
  heightOutput.textContent = evt.target.height;
  widthOutput.textContent = evt.target.width;
}

video.requestPictureInPicture().then((pictureInPictureWindow) => {
  pictureInPictureWindow.onresize = resize;
  // or
  pictureInPictureWindow.addEventListener("resize", resize);
});

仕様書

Specification
Picture-in-Picture
# eventdef-pictureinpicturewindow-resize
Picture-in-Picture
# dom-pictureinpicturewindow-onresize

ブラウザーの互換性

BCD tables only load in the browser