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.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 |
ブラウザーの互換性
Loading…