Picture-in-Picture 与 Document PiP：窗口化展示与交互

--- title: Picture-in-Picture 与 Document PiP：窗口化展示与交互 keywords: - Picture-in-Picture - Document PiP - HTMLVideoElement - 多窗口 - 交互 description: 介绍视频与文档的画中画能力与差异、窗口化展示与交互管理、权限与兼容回退策略，并给出可运行示例与参考。 categories: - 应用软件 - 办公软件 --- 概述 视频画中画（PiP）允许将 `HTMLVideoElement` 以浮窗显示；Document Picture-in-Picture 则允许将任意文档内容在独立窗口呈现，适合工具面板/预览。需用户手势触发与安全上下文。 示例：视频画中画 ```js const video = document.querySelector('video') await video.requestPictureInPicture() ``` 示例：Document PiP 窗口 ```js const pipWindow = await documentPictureInPicture.requestWindow({ width: 400, height: 300 }) const content = pipWindow.document.createElement('div') content.textContent = '独立窗口内容' pipWindow.document.body.appendChild(content) ``` 工程建议 - 交互与生命周期：处理窗口关闭与主页面同步；避免阻塞主线程。 - 权限与手势：在用户手势下请求；提示用途与回退方案。 - 兼容：特性检测；不支持时回退到内嵌对话框或新窗口。 参考与验证 - MDN Picture-in-Picture 文档：https://developer.mozilla.org/docs/Web/API/Picture-in_Picture_API - MDN Document PiP 文档：https://developer.mozilla.org/docs/Web/API/Document_Picture-in-Picture_API - Chrome 平台文档：https://developer.chrome.com/docs/web-platform/document-picture-in-picture/