前端实现 B 站视频画中画功能 - 完整代码实现主页面和小窗同步视频控制功能
1. 前言
在视频播放场景中，用户往往需要在观看视频的同时进行其他操作。B 站等平台的画中画功能允许视频以小窗口形式悬浮在其他内容之上，即使主窗口被缩小或切换，小窗口依然保留在桌面上。
随着 Chrome 116+ 支持 Document Picture-in-Picture API，我们不再局限于传统的 <video> 标签画中画，而是可以将整个文档内容移入独立的小窗口中，并在其中实现自定义控件、播放进度操作等功能。
本文将演示如何结合主页面与小窗，实现视频状态的实时同步控制（如暂停、音量调节、进度跳转），提升多任务场景下的用户体验。
2. 为什么要使用 Document PiP API
在多任务处理时代，传统画中画 API 功能有限，无法携带自定义控件与交互。新的 Document Picture-in-Picture API 允许整个文档出现在独立的小窗口中，支持丰富交互，特别适用于视频会议、在线课程及需要自定义控制的小应用。
新 API 优势：
- 完整 HTML 支持：可包含按钮、进度条等交互元素
- 无缝集成：与原始页面共享 JavaScript 上下文
- 尺寸灵活：可自定义小窗尺寸
- 双向通信：主页面与小窗实时同步状态
3. 完整代码案例
代码示例中 src="1.mp4" 为本地测试视频路径，实际使用时请替换为有效的视频资源地址。
3.1 可直接复用运行代码
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: 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;
}
}
