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 则允许将任意文档内容在独立窗口呈现，适合工具面板/预览。需用户手势触发与安全上下文。

示例：视频画中画

const video = document.querySelector('video')
await video.requestPictureInPicture()

示例：Document PiP 窗口

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/