PictureInPictureWindow: resize ã¤ãã³ã
å©ç¨å¯è½æ§ã¯éå®ç
ãã®æ©è½ã¯ãã¼ã¹ã©ã¤ã³ã§ã¯ããã¾ãããæãåºã使ç¨ããã¦ãããã©ã¦ã¶ã¼ã®ä¸é¨ã§åä½ãã¾ããã
Want more support for this feature? Tell us why.
resize ã¤ãã³ãã¯ãæµ®ååç»ã¦ã£ã³ãã¦ã®ãµã¤ãºã夿´ãããã¨ãã«çºè¡ããã¾ãã
ãã®ã¤ãã³ãã¯ãã£ã³ã»ã«ä¸å¯ã§ããããªã³ã°ãã¾ããã
æ§æ
ãã®ã¤ãã³ãåã addEventListener() ãªã©ã®ã¡ã½ããã§ä½¿ç¨ããããã¤ãã³ããã³ãã©ã¼ããããã£ãè¨å®ããããã¦ãã ããã
addEventListener("resize", (event) => {});
onresize = (event) => {};
ã¤ãã³ãå
PictureInPictureEvent ã§ããEvent ãç¶æ¿ãã¦ãã¾ãã
ã¤ãã³ãããããã£
ãã®ã¤ã³ã¿ã¼ãã§ã¤ã¹ã«ã¯ä»¥ä¸ã®ããããã£ã«å ãã親ã§ãã Event ããç¶æ¿ããããããã£ãããã¾ãã
PictureInPictureEvent.pictureInPictureWindow-
ãµã¤ãºã夿´ããã
PictureInPictureWindowãè¿ãã¾ãã
ä¾
>ã¦ã£ã³ãã¦ã®ãµã¤ãºããã°åºå
<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>
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);
});
仿§æ¸
| 仿§æ¸ |
|---|
| Picture-in-Picture > # eventdef-pictureinpicturewindow-resize > |
| Picture-in-Picture > # dom-pictureinpicturewindow-onresize > |