前端实现 Document Picture-in-Picture API 主窗口与小窗视频同步控制
不知道大家是否注意到,B 站等视频平台在播放时提供了一个 画中画 功能。用户点击后,视频会展现为一个小窗,即使将主窗口缩小,小窗口依然保留在桌面上浮动播放。


随着 Chrome 116+ 支持 Document Picture-in-Picture API,我们终于可以把整个页面内容(不仅仅是 <video> 标签)移入画中画小窗口中,并在小窗中实现自定义控件、播放进度操作等功能。
本文将演示如何实现一个主页面和小窗同步视频控制的功能,例如在主窗口暂停、小窗也同步暂停;调节音量、跳转进度也保持一致,从而提升用户体验。
为什么要使用 Document PiP API
在当今多任务处理的时代,用户经常需要在观看视频的同时进行其他操作(如浏览信息、回复消息等)。小窗模式(画中画)解决了这一需求,让视频可以浮动在页面上方,同时用户可以自由浏览其他内容。
与传统 Picture-in-Picture 的区别

- 传统的
Picture-in-PictureAPI 功能有限,无法带自定义控件与交互 - 新的
Document Picture-in-Picture API可以让整个文档出现在独立的小窗口中,支持丰富交互,如播放、暂停、音量、进度条等 - 特别适用于视频会议、在线课程、弹幕播放器,以及需要自定义控制画中画的小应用
新 API 优势
- 完整 HTML 支持:可包含按钮、进度条等交互元素
- 无缝集成:与原始页面共享 JavaScript 上下文
- 尺寸灵活:可自定义小窗尺寸
- 双向通信:主页面与小窗实时同步
完整代码案例
代码中的 1.mp4 为测试视频资源,大家可以自行获取相应资源源,修改 video 的 src 即可。
可直接复用运行代码
CSS 样式
* {
margin: 0;
padding: 0;
box-sizing: 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;
: ;
}
{
: ;
}
{
: ;
}
(: ) {
{
: column;
}
}




