在浏览器的多任务处理场景中，用户往往需要在观看视频的同时进行其他操作。传统的 Picture-in-Picture API 仅支持将 <video> 元素本身移出页面，无法携带自定义控件或交互逻辑。随着 Chrome 116+ 对 Document Picture-in-Picture API 的支持，我们可以将整个文档内容移入独立小窗，并保留完整的 HTML 结构与 JavaScript 上下文。
本文将演示如何基于该 API 实现一个主页面与小窗的视频同步控制方案，包括播放/暂停、音量调节及进度跳转的双向实时同步。
为什么要使用 Document PiP API
相比传统方案，新的 API 具备以下优势：
- 完整 HTML 支持：小窗内可包含按钮、进度条等任意交互元素
- 无缝集成：与原始页面共享 JavaScript 上下文，便于状态管理
- 尺寸灵活：可自定义小窗的宽高
- 双向通信：主页面与小窗之间可实时同步数据
注意：目前该功能主要支持 Chrome 108+ 及以上版本，Firefox 和 Safari 尚未完全支持。
完整代码案例
代码中 1.mp4 为测试视频资源，实际使用时请替换为合法的视频源地址。
CSS 样式
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
: auto;
: (, , , );
: ;
: (, , , );
: hidden;
}
{
: (to right, , );
: white;
: ;
: center;
}
{
: ;
: ;
: (, , , );
}
{
: ;
: ;
: ;
: auto;
}
{
: flex;
: ;
: ;
}
{
: ;
: ;
: ;
: hidden;
: (, , , );
}
{
: relative;
: ;
: ;
}
{
: absolute;
: ;
: ;
: ;
: ;
: block;
}
{
: flex;
: ;
: ;
: ;
}
{
: ;
: white;
: none;
: ;
: ;
: pointer;
: ;
: all ease;
: flex;
: center;
: ;
}
{
: ;
: (-);
: (, , , );
}
{
: ;
: not-allowed;
: none;
: none;
}
{
: ;
: white;
: ;
: ;
: (, , , );
}
{
: ;
: ;
: ;
: solid ;
}
{
: ;
}
{
: flex;
: flex-start;
: ;
}
{
: ;
: white;
: ;
: ;
: ;
: flex;
: center;
: center;
: ;
: ;
}
{
: fixed;
: ;
: ;
: ;
: ;
: black;
: ;
: hidden;
: (, , , );
: ;
: none;
}
{
: ;
: ;
: cover;
}
{
: absolute;
: ;
: ;
: ;
: flex;
: center;
: ;
: ;
: opacity ;
}
{
: ;
}
{
: ;
: ;
: ;
: ;
: monospace;
}
{
: ;
: ;
: ;
: ;
: solid ;
}
{
: flex;
: ;
: ;
: wrap;
}
{
: flex;
: center;
: ;
}
{
: ;
}
{
: ;
}
(max-width: ) {
{
: column;
}
}
