前端实现视频画中画功能 - 主页面与小窗同步控制

前言

随着 Chrome 116+ 对 Document Picture-in-Picture API 的支持，我们不再局限于传统的视频小窗模式。新 API 允许将整个文档移入画中画窗口，并保留完整的交互能力。本文将演示如何实现主页面与画中画窗口之间的视频状态同步（播放、暂停、进度、音量）。

画中画效果

为什么使用 Document PiP API

传统 Picture-in-Picture 仅支持视频元素本身，无法携带自定义控件。Document PiP 则不同，它可以将整个页面上下文带入小窗，支持按钮、进度条等任意 HTML 元素的交互。这对于视频会议、在线课程或需要自定义控制的播放器场景尤为适用。

与传统 PiP 的区别：

传统 PiP：功能有限，无法带自定义控件与交互。
Document PiP：完整 HTML 支持，可包含按钮、进度条等交互元素；与原始页面共享 JavaScript 上下文；尺寸灵活且支持双向通信。

完整代码案例

代码中 1.mp4 为测试视频资源，大家可自行获取相应资源源，修改 video 的 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;
    : ;
}
 {
    : ;
}
 {
    : ;
}
 (: ) {
     {
        : column;
    }
}

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频小窗模式演示</title> <link href="css/pip.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="container"> <header> <h1>视频小窗模式演示</h1> <p class="subtitle">使用 Document Picture-in-Picture API 实现在其他内容上浮动播放视频</p> </header> <div class="content"> <div class="video-section"> <div class="video-container"> <video id="mainVideo" src="1.mp4" controls playsinline></video> </div> <div class="video-controls"> <button id="pipButton" title="开启小窗模式">  开启小窗模式 </button> <button id="fullscreenButton">  全屏 </button> </div> </div> <div class="info-section"> <h2>Document Picture-in-Picture API</h2> <div class="feature-list"> <div class="feature"> <div class="feature-icon">1</div> <div> <h3>任意 HTML 内容</h3> <p>可以在小窗中显示视频控件、字幕等任意 HTML 元素</p> </div> </div> <div class="feature"> <div class="feature-icon">2</div> <div> <h3>保持播放状态</h3> <p>进入小窗模式时视频持续播放，不中断观看体验</p> </div> </div> <div class="feature"> <div class="feature-icon">3</div> <div> <h3>双向同步</h3> <p>主页面和小窗中的视频状态实时同步</p> </div> </div> <div class="feature"> <div class="feature-icon">4</div> <div> <h3>自由调整</h3> <p>用户可以调整小窗位置和大小，适应不同需求</p> </div> </div> </div> <div class="status"> <p>当前状态：<span id="statusText">等待操作</span></p> <p>小窗状态：<span id="pipStatus">未激活</span></p> </div> <div class="browser-support"> <h3>浏览器支持情况</h3> <div class="support-list"> <div class="browser"><span class="supported">Chrome 108+</span></div> <div class="browser"><span class="unsupported">Firefox</span></div> <div class="browser"><span class="unsupported">Edge</span></div> <div class="browser"><span class="unsupported">Safari</span></div> </div> </div> </div> </div> </div>  <div id="pipContainer" class="pip-window"> <video id="pipVideo" src="1.mp4" controls></video> <div class="pip-controls"> <button id="closePipButton" title="关闭小窗">关闭</button> </div> </div> <script> // 页面元素 const mainVideo = document.getElementById('mainVideo'); const pipVideo = document.getElementById('pipVideo'); const pipButton = document.getElementById('pipButton'); const fullscreenButton = document.getElementById('fullscreenButton'); const closePipButton = document.getElementById('closePipButton'); const pipContainer = document.getElementById('pipContainer'); const statusText = document.getElementById('statusText'); const pipStatus = document.getElementById('pipStatus'); // 检查浏览器支持情况 const isPipSupported = 'documentPictureInPicture' in window; // 初始化页面 function init() { updateStatus(isPipSupported ? "Document Picture-in-Picture API 可用" : "您的浏览器不支持 Document Picture-in-Picture API"); // 设置按钮状态 pipButton.disabled = !isPipSupported; // 添加事件监听器 pipButton.addEventListener('click', togglePictureInPicture); fullscreenButton.(, toggleFullscreen); closePipButton.(, closePictureInPicture); pipVideo. = mainVideo.; mainVideo. = ; pipVideo. = ; } () { statusText. = message; } () { pipStatus. = message; } () { (!isPipSupported) ; (..) { (); ; } { pipWindow = ..({ : , : , }); pipWindow.. = ; style = .(); style. = ; pipWindow...(style); pipWindow...(pipVideo); pipVideo. = mainVideo.; (!mainVideo.) { pipVideo.(); } { pipVideo.(); } pipWindow.(, { pipContainer.(pipVideo); pipContainer.. = ; (); }); pipContainer.. = ; (); (); mainVideo.(, syncVideoTime); pipVideo.(, syncVideoTime); mainVideo.(, pipVideo.()); mainVideo.(, pipVideo.()); pipVideo.(, mainVideo.()); pipVideo.(, mainVideo.()); mainVideo.(, syncVolume); pipVideo.(, syncVolume); } (error) { (); .(error); } } () { (.(mainVideo. - pipVideo.) > ) { ( === mainVideo) { pipVideo. = mainVideo.; } { mainVideo. = pipVideo.; } } } () { ( === mainVideo) { pipVideo. = mainVideo.; pipVideo. = mainVideo.; } { mainVideo. = pipVideo.; mainVideo. = pipVideo.; } } () { (..) { ...(); } mainVideo.(, syncVideoTime); pipVideo.(, syncVideoTime); mainVideo.(, syncVolume); pipVideo.(, syncVolume); pipContainer.(pipVideo); pipContainer.. = ; (); (); } () { (!.) { (mainVideo.) { mainVideo.(); } (mainVideo.) { mainVideo.(); } (mainVideo.) { mainVideo.(); } } { (.) { .(); } (.) { .(); } (.) { .(); } } } .(, init); </script> </body> </html>

前端实现视频画中画功能 - 主页面与小窗同步控制

前言

为什么使用 Document PiP API

完整代码案例

CSS 样式

更多推荐文章

相关免费在线工具

更多推荐文章

相关免费在线工具

HTML 结构

演示效果

案例核心原理与流程

代码流程

状态同步机制

关键事件处理

结语

前端实现视频画中画功能 - 主页面与小窗同步控制

前言

为什么使用 Document PiP API

完整代码案例

CSS 样式

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

HTML 结构

演示效果

案例核心原理与流程

代码流程

状态同步机制

关键事件处理

结语