PiP窗口无法动态添加DOM内容，因其无独立document上下文，仅接受video元素作为只读视频浮层；唯一可行方案是通过canvas.captureStream()将动态内容渲染进视频流。
Document PiP（Picture-in-Picture）本身不提供“向悬浮窗口中动态添加 DOM 内容”的能力——window 对象在 PiP 模式下**没有独立的 document 或 DOM 上下文**，你无法像操作普通窗口那样用 document.createElement 或 appendChild 往 PiP 窗口中插入元素。
为什么不能直接往 PiP 窗口里 appendChild？
PiP 是一个受限的、只读的视频叠加层，由浏览器原生实现。它只接受一个 <video> 元素作为内容源，不暴露 DOM 接口，也不允许注入 HTML、运行脚本或访问其内部 document。所谓“PiP 窗口”，本质是系统级视频浮层，不是浏览器 tab 或 iframe。
- 调用
video.requestPictureInPicture()后，浏览器仅复制该<video>的画面和音轨，不复制父页面的任何其他 DOM 节点 -
window在 PiP 激活后仍指向原始页面，document也仍是原页面的 document，不存在“PiP 窗口的 window”对象 - 尝试监听
pipwindow、pictureinpicturewindow等事件或属性，只会得到undefined或抛出SecurityError
替代方案：用 video 元素自身承载动态信息
唯一可行路径是把需要展示的“动态内容”预先融合进 <video> 的画面中——通过 Canvas 渲染或 WebRTC 叠加，再将该 canvas 作为视频源传入 PiP。
- 创建
<canvas>，用getContext('2d')绘制文字、图标、实时数据等 - 用
canvas.captureStream()获取媒体流（需注意浏览器兼容性：Chrome ≥ 71，Edge ≥ 79；Firefox 不支持） - 将流赋给
<video>的srcObject，再调用video.requestPictureInPicture() - 后续更新内容时，只需重绘 canvas，流会自动推送新帧
示例关键片段：
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById('overlay-canvas');
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream(30); // 30fps
const video = document.getElementById('pip-video');
video.srcObject = stream;
// 动态更新
function updateOverlay(text) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillText(text, 20, 40);
}
常见错误：误信 deprecated 的 pictureInPictureWindow API
早期 Chrome（≤89）曾短暂暴露 document.pictureInPictureElement 和 document.addEventListener('enterpictureinpicture', ...)，但从未提供可写入的 pictureInPictureWindow.document。现在该 API 已被移除，且从没支持过 DOM 插入。
- 若看到网上代码含
pipWindow.document.body.appendChild(...)，一定是过时文档或误解 -
pictureInPictureWindow现在只作为事件对象属性存在（如event.pictureInPictureWindow），但它是个空对象，无document属性 - 试图访问
window.pictureInPictureWindow会返回undefined，不是 null 或空对象
真正能控制 PiP 内容的边界，就卡在 video 元素及其媒体流上。任何想绕过这个限制去“注入 DOM”的做法，都会撞上浏览器的安全沙箱——这不是权限问题，而是架构决定的不可行。
