背景与需求
在浏览网页时，我们常遇到需要在观看视频的同时处理其他任务的情况。传统的画中画（Picture-in-Picture）功能通常仅支持视频元素本身，无法携带自定义控件或交互逻辑。随着 Chrome 116+ 对 Document Picture-in-Picture API 的支持，我们可以将整个文档内容移入独立的小窗口中，并在其中保留完整的 HTML 结构和 JavaScript 上下文。
本文将演示如何构建一个主页面与小窗同步的视频播放方案：当主窗口暂停、调节音量或跳转进度时，小窗能实时响应，反之亦然。这种双向同步机制非常适合在线课程、视频会议或需要灵活观看体验的场景。
核心原理
与传统 video.requestPictureInPicture() 不同，新的 documentPictureInPicture.requestWindow() 允许我们创建一个独立的浏览器窗口，并将 DOM 节点移动进去。
主要优势：
- 完整 HTML 支持：小窗内可包含按钮、进度条等任意交互元素。
- 无缝集成：主页面与小窗共享 JavaScript 上下文，便于状态管理。
- 尺寸灵活：可自定义小窗的宽高。
- 双向通信：通过事件监听实现主窗口与小窗的状态实时同步。
完整代码示例
为了便于理解，我将 CSS、HTML 和 JavaScript 整合在一个文件中。实际开发中建议拆分文件。请确保本地有一个测试视频文件（如 1.mp4），或者修改代码中的 src 属性。
样式部分 (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;
margin: 0 auto;
background-color: (, , , );
: ;
: (, , , );
: 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;
}
}
