基于 Document PiP API 实现视频小窗及状态同步
提示：本文演示如何利用
Document Picture-in-Picture API实现网页视频的小窗播放功能，并支持主窗口与画中画窗口之间的双向状态同步。
1. 前言
在视频观看场景中，用户往往需要在播放的同时处理其他任务。传统的画中画（PiP）功能通常仅支持视频元素本身，无法携带自定义控件或交互逻辑。随着 Chrome 116+ 对 Document Picture-in-Picture API 的支持，我们能够将整个文档内容移入独立的小窗口中，并在其中保留完整的 HTML 结构和 JavaScript 上下文。
本文将带你实现一个完整案例：在主页面点击按钮后开启小窗模式，并确保主窗口与小窗在播放、暂停、进度、音量等状态上实时同步。
2. 为什么使用 Document PiP API
相比传统的 <video> 标签自带的 PiP 功能，新的 Document PiP 具有以下优势：
- 完整 HTML 支持：小窗内可包含按钮、进度条、字幕等任意 DOM 元素。
- 无缝集成：主页面与小窗共享 JavaScript 上下文，便于通信。
- 尺寸灵活：可自定义小窗的宽度和高度。
- 双向通信：主窗口与小窗可实时同步状态，提升用户体验。
3. 完整代码案例
以下示例包含 CSS 样式、HTML 结构及核心 JavaScript 逻辑。请确保本地有一个名为 1.mp4 的视频文件，或修改代码中的 src 属性指向有效的视频资源。
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);
: ;
: ;
}
{
: ;
: 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;
}
}
