前端实现视频画中画功能 - 主页面与小窗同步控制
在网页开发中，我们常遇到需要在观看视频的同时处理其他任务的需求。B 站等平台的画中画功能允许视频以小窗口形式悬浮在其他内容之上。随着 Chrome 116+ 对 Document Picture-in-Picture API 的支持，我们可以将整个文档内容移入独立小窗，并自定义控件与交互逻辑。
本文分享一个完整案例：实现主页面与小窗的视频状态同步（播放、暂停、进度、音量），提升多任务场景下的用户体验。
为什么使用 Document PiP API
传统的 Picture-in-Picture API 仅支持将 <video> 元素本身移出，无法携带自定义 UI 或脚本上下文。新的 Document Picture-in-Picture API 优势在于：
- 完整 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);
: ;
: ;
}
{
: ;
: 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;
: ;
}
{ : ; }
{ : ; }
(: ) {
{ : column; }
}
