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 |
浏览器兼容性
加载中…