无需登录 数据私有 本地保存

画中画文档演示 - Document Picture-in-Picture API

开发工具 检测工具 API 演示 画中画
73
1
0
1
画中画文档演示 未开启
您的浏览器暂不支持 Document Picture-in-Picture API。
请使用 Chrome 116+ 或基于 Chromium 的浏览器（Edge、Arc 等）来体验此功能。您仍可以编辑和预览内容，但无法开启画中画窗口。
演示内容（将显示在画中画窗口） 0 字符 0 行
演讲者备注（仅主窗口可见，不会显示在PiP中） 仅您可见
PiP 窗口预览 亮色
预览内容将在此显示...
PiP窗口尺寸： px px
PiP字体大小： PiP暗色模式：
HTML模式：
开启后内容将作为HTML渲染
快速模板：
📄 空白 📋 会议议程 🎤 演讲要点 💻 代码片段 📊 数据摘要

常见问题与知识库

Document Picture-in-Picture API 是 Chrome 116 引入的一项新Web标准，允许开发者将任意HTML内容放入画中画浮动窗口中。与传统的Video PiP（仅支持视频）不同，它可以展示文档、笔记、表单、代码片段等任何HTML元素。这为演讲辅助、多任务参考、在线教育等场景提供了强大的原生支持。API通过 window.documentPictureInPicture.requestWindow() 方法调用。

Video PiP（通过 <video>.requestPictureInPicture()）仅限于播放视频内容，窗口内只能显示视频画面。
Document PiP（通过 documentPictureInPicture.requestWindow()）则是一个完整的浏览上下文，可以包含任意HTML、CSS和JavaScript，就像一个迷你的独立网页。这使得它可以用于文档演示、笔记参考、实时数据监控等丰富场景。

目前（2024-2025年），Chrome 116+、Microsoft Edge 116+ 以及其他基于 Chromium 的浏览器（如 Arc、Opera、Brave 等）均支持此API。Firefox 和 Safari 尚未实现该功能。本工具会自动检测浏览器兼容性并给出相应提示。建议使用最新版Chrome以获得最佳体验。

基本使用步骤：
1. 检测支持：if ('documentPictureInPicture' in window)
2. 请求窗口：const pipWin = await window.documentPictureInPicture.requestWindow({width: 480, height: 400});
3. 填充内容：pipWin.document.body.innerHTML = '您的HTML内容';
4. 注入样式：通过创建 <style> 标签将CSS添加到PiP窗口的head中。
5. 监听关闭：pipWin.addEventListener('pagehide', () => { ... });
注意：API调用必须在用户手势（如点击事件）中触发。

PiP窗口是一个独立的浏览上下文，可以显示几乎所有HTML内容：文本、图片、表格、代码块、SVG、CSS动画等。但有一些限制：
• PiP窗口中的表单输入可能受限（不建议在其中放置需要交互的输入框）
• 弹窗和alert在PiP窗口中可能无法正常使用
• PiP窗口关闭时，其中的JavaScript执行会停止
• 主页面刷新或关闭时，PiP窗口也会自动关闭
• 同一时间只能有一个PiP窗口存在

本工具模拟了"演讲者视图"功能：
• 演示内容区：您希望展示给观众（或自己参考）的内容，将被放入PiP浮动窗口
• 演讲者备注区：仅主窗口可见的私人笔记，不会出现在PiP中
您可以边演讲边在主窗口查看备注，同时PiP窗口始终悬浮在最前方展示核心内容。适用于在线会议、直播讲解、课堂演示、项目汇报等场景。

是的。在请求PiP窗口时可以通过 width 和 height 参数设置初始尺寸（如本工具的设置面板）。用户还可以手动拖拽PiP窗口边缘来调整大小。窗口内的样式（字体大小、颜色主题、背景等）完全由开发者通过CSS控制，本工具提供了字体大小调节和暗色/亮色模式切换。

Document Picture-in-Picture API 在设计时充分考虑了安全性：
• PiP窗口与主页面同源，不会跨越安全边界
• PiP窗口的标题栏会明确显示来源，用户始终知道内容来自哪个网站
• 用户可随时点击关闭按钮终止PiP窗口
• 主页面关闭时PiP窗口自动关闭，不会残留
• 内容完全由您控制，本工具不会将任何数据发送到外部服务器（所有数据存储在本地）

可能的原因：
1. 浏览器不支持：请确认使用Chrome 116+或Edge 116+
2. 已有PiP窗口：同一时间只能有一个PiP窗口，请先关闭现有的
3. 弹窗被阻止：检查浏览器是否阻止了弹窗，允许本网站弹窗即可
4. 内容为空：请先在编辑区输入演示内容
5. 需要用户手势：API必须在点击等用户交互中调用，不能自动触发

在Android版Chrome 116+上，Document Picture-in-Picture API 已得到支持，PiP窗口会以浮动方式显示。在iOS上，由于所有浏览器均使用WebKit内核（Apple限制），目前不支持此API。本工具在移动端做了响应式适配，您可以在支持该API的Android设备上正常使用画中画功能。对于不支持的设备，内容编辑和预览功能仍然可用。
🔧 相关工具