随着 Chrome 116+ 支持 Document Picture-in-Picture API 的出现，我们终于可以把整个页面内容移入画中画小窗口中，并在小窗中实现自定义控件、播放进度操作等功能。
本文介绍一个主页面和小窗同步视频控制功能的实现方案，例如在主窗口暂停、小窗也同步暂停；调节音量、跳转进度也保持一致，提升用户体验。
1. 前言
用户可能注意到 B 站的视频播放中有一个画中画功能，当用户点击会展现一个小窗播放，即使将主窗口缩起来，小窗口依然保留在外面电脑桌面上。
开启画中画（小窗口）
收缩主窗口
2. 为什么要使用 Document PiP API
在当今多任务处理的时代，用户经常需要在观看视频的同时进行其他操作。小窗模式（画中画）解决了这一需求，让视频可以浮动在页面上方，同时用户可以自由浏览其他内容。
与传统 Picture-in-Picture 的区别
- 传统的画中画 API 功能有限，无法带自定义控件与交互
- 新的 API 可以让整个文档出现在独立的小窗口中，支持丰富交互，如播放、暂停、音量、进度条等
- 特别适用于视频会议、在线课程、弹幕播放器，以及需要自定义控制画中画的小应用
新 API 优势
- 完整 HTML 支持：可包含按钮、进度条等交互元素
- 无缝集成：与原始页面共享 JavaScript 上下文
- 尺寸灵活：可自定义小窗尺寸
- 双向通信：主页面与小窗实时同步
3. 完整代码案例
代码中 1.mp4 为测试的视频资源，大家可以自行获取相应资源源，修改 video 的 src 即可。
3.1 可直接复用运行代码
CSS 代码
*{margin: 0;padding: ;: border-box;}{:, Tahoma, Geneva, Verdana, sans-serif;: ;: ;:(, , , );: ;: ;}{: ;: 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;}}
