PictureInPictureWindow
PictureInPictureWindow 介面代表一個物件，該物件能夠以程式設計方式獲取浮動影片視窗的 width 和 height 以及 resize event。
可以透過 HTMLVideoElement.requestPictureInPicture() promise 返回值獲得具有此介面的物件。
例項屬性
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(
`The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`,
);
// will print:
// The floating window dimensions are: 640x360px
}
button.onclick = () => {
video.requestPictureInPicture().then((pictureInPictureWindow) => {
pictureInPictureWindow.onresize = printPipWindowDimensions;
});
};
規範
| 規範 |
|---|
| 畫中畫 # interface-picture-in-picture-window |
瀏覽器相容性
載入中…