前端实现视频画中画功能 - 完整代码与同步控制
在视频播放场景中,用户往往需要在观看内容的同时处理其他任务。传统的画中画(Picture-in-Picture)仅支持视频轨道,而新的 Document Picture-in-Picture API 允许将整个文档内容移入独立的小窗口,并保留自定义控件和交互能力。
本文通过一个完整的案例,演示如何创建一个小窗模式,实现主页面与小窗之间的视频状态同步(播放、暂停、音量、进度),提升多任务场景下的用户体验。
为什么要使用 Document PiP API
随着 Chrome 116+ 对 Document Picture-in-Picture API 的支持,我们不再局限于仅将 <video> 元素移出。新 API 的优势在于:
- 完整 HTML 支持:小窗内可包含按钮、进度条等任意交互元素。
- 无缝集成:与原始页面共享 JavaScript 上下文,便于通信。
- 尺寸灵活:可自定义小窗的宽高。
- 双向通信:主页面与小窗实时同步状态。
相比传统方案,它特别适用于视频会议、在线课程及需要高度定制控制的播放器场景。
完整代码案例
以下示例包含 HTML 结构、CSS 样式及核心 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);
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: (, , , );
: ;
: (, , , );
: 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;
}
}


