你以为 PiP 只能看视频？今天它被 Chrome 变成了一个浮动工作台

写过前端的人都踩过这个坑——Chrome 的画中画（Picture-in-Picture）API 喊了这么多年，打开来永远只能塞一个 video 标签，其他 HTML 一律不认。今天 Document Picture-in-Picture API 把这件事彻底原生化了，浮窗里可以装任意 HTML 内容。

传统的 Video PiP 只能这样：

“`html
<video id=”myVideo” src=”movie.mp4″></video>
<button onclick=”myVideo.requestPictureInPicture()”>PiP</button>
“`

结果就是视频飘出去了，播放控件还是原生的，想加字幕、进度条、弹幕？对不起，不支持。Document PiP 换了一个思路——不是把 video 元素丢出去，而是打开一个全新的空白窗口，往里塞任意 DOM：

“`js
async function openDocPip() {
const pipWindow = await documentPictureInPicture.requestWindow({
initialAspectRatio: 16 / 9,
copyStyleSheets: true,
});

// 把视频移进去
const video = document.querySelector(‘#myVideo’);
pipWindow.document.body.append(video);

// 自定义播放控件——这次全支持
const controls = document.createElement(‘div’);
controls.innerHTML = <button id="playBtn">▶</button> <input type="range" id="seekBar"> <span id="timeDisplay">0:00 / 0:00</span> ;
pipWindow.document.body.append(controls);

// 绑定事件
pipWindow.document.getElementById(‘playBtn’).onclick = () => {
video.paused ? video.play() : video.pause();
};

// 窗口关闭时把视频移回来
pipWindow.addEventListener(‘unload’, () => {
document.querySelector(‘#videoContainer’).append(video);
});
}
“`

这个 API 的核心不在于「浮起来」，而在于「独立文档」。每个 PiP 窗口都是一个拥有独立 document 的新浏览上下文，所以 CSS、JS 全都独立运行，父页面刷新或跳转了，窗口直接关闭——没有隐私风险。

Browser support：Chrome 116+ / Edge 116+ / Firefox 151+（2026年加入）/ Opera 102+。Safari 暂不支持，移动端没有。全球覆盖率约 26%，桌面 Chrome 用户约 70%+，按渐进增强策略用即可。

视频会议场景是它最天然的用武之地：把多人视频合成一路放进 PiP 浮窗，同时在主窗口继续聊天或写文档，不需要任何 Canvas 混流 hack；字幕、举手按钮、禁言控件全部是原生 HTML，比 video 标签的原生控件强大十倍。

另一个被低估的场景是在线教育——视频教程浮窗 + 主页面记事本或代码编辑器并排操作，不用在标签页之间来回切换。打开浮窗时视频离开文档流，关闭时自动回到原位，用户感知是无缝的。

实际工程注意点：

• copyStyleSheets: true 会把父页面的 CSS 复制进去，没有它浮窗是裸样式的
• 一次只能开一个浮窗，再调 requestWindow() 会自动关闭前一个
• 浮窗标题栏无法隐藏（浏览器安全强制要求），但 disallowReturnToOpener 可以隐藏「返回页签」按钮
• Fullscreen API 在浮窗内不可用，别踩这个坑
• opener 页面关闭/刷新/跳转，浮窗自动关闭，依赖它做主控的要提前感知这个生命周期

如果你现在还在用 postMessage + 乱七八糟的 hack 维持一个「伪画中画」，Document PiP 是你扔掉那堆 workaround 的机会。