PictureInPictureWindow
接口是一个对象,它可以通过编程的方式获得浮动视频窗口的宽度和高度,并调整浮动视频窗口的大小。
使用HTMLVideoElement.requestPictureInPicture()
返回一个具有此接口的promise值
属性
PictureInPictureWindow
接口不继承任何属性。
PictureInPictureWindow.width
只读- 获取浮动视频窗宽度。
PictureInPictureWindow.height
只读- 获取浮动视频窗高度。
Methods
The PictureInPictureWindow
interface doesn't inherit any methods.
Events
The PictureInPictureWindow
interface doesn't inherit any events.
PictureInPictureWindow.resize
- Sent to a
PictureInPictureWindow
when the floating video window is resized. The associated event handler isPictureInPictureWindow.onresize
.
Examples
Given a <button>
and a <video>
, clicking the button will make the video enter the picture-in-picture mode; we then attach an event to print the floating video window dimensions to the console.
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 = function() {
video.requestPictureInPicture().then(pictureInPictureWindow => {
pictureInPictureWindow.onresize = printPipWindowDimensions;
});
};
Specifications
Specification | Status | Comment |
---|---|---|
Picture-in-Picture API | Draft | Initial specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "api.PictureInPictureWindow" (depth: 1) to the MDN compatibility data repository.