HTML画中画（PiP）是系统级浮层，尺寸位置由系统控制，开发者无法直接设置宽高或拖拽；仅能通过video属性和事件监听有限干预。
HTML 画中画（Picture-in-Picture，PiP）本身不强制要求“小窗播放”——它只是把视频内容浮在其他页面/应用之上，尺寸和位置由系统控制；所谓“小窗”是用户触发 PiP 后的默认行为，但开发者无法直接设置宽高、拖拽或缩放。
video 元素必须支持 requestPictureInPicture() 才能启用 PiP
不是所有 <video> 都能调用 PiP：需满足播放状态、非静音、无 disablepictureinpicture 属性，且浏览器支持（Chrome 70+、Edge 79+、Safari 14.1+）。移动端 Safari 仅支持全屏后手动点 PiP 按钮，不能 JS 主动触发。
-
video必须已加载元数据（loadedmetadata事件后），且至少播放过一次（play()成功 resolve 后） - 若视频静音（
muted）且未设置playsinline，iOS Safari 可能拒绝 PiP - 主动调用前检查能力：
if ('pictureInPictureElement' in document) { ... }
触发 PiP 的常见失败原因和修复方式
点击按钮无反应？大概率卡在权限或状态校验环节。PiP 是异步操作，失败时会抛出 DOMException，但不会自动提示。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 错误
"NotAllowedError: Permission denied"：用户未与媒体交互（如没点过播放按钮）就调用requestPictureInPicture()—— 必须由用户手势（click、touchend）触发 - 错误
"InvalidStateError"：视频未播放、被暂停、或src为空 —— 建议加video.readyState >= HTMLMediaElement.HAVE_METADATA判断 - Safari 上
requestPictureInPicture()返回 Promise，但不支持video.disablePictureInPicture = true写法，要用disablepictureinpicture属性
如何让 PiP 更“像小窗”：有限的样式干预手段
你不能改 PiP 窗口大小，但可以影响其初始状态和退出逻辑。PiP 窗口本质是独立上下文，<video> 的 CSS 不生效，唯一可控的是源视频的宽高比和 poster。
立即学习“前端免费学习笔记（深入）”；
- 设置
video.width和video.height（或style="width:320px;height:180px"）不影响 PiP 尺寸，但会影响退出 PiP 后的回填尺寸 - PiP 窗口默认保持原始宽高比，拉伸变形说明源视频 track 编码异常（如 SPS 中 SAR 设置错）
- 监听
enterpictureinpicture和leavepictureinpicture事件，可同步 UI 状态（如切换按钮文案） - 退出 PiP 后，
video会自动恢复为paused，需手动play()（如果需要）
PiP 的“小窗感”来自系统策略，而非前端控制。真正容易被忽略的是：PiP 窗口一旦激活，就脱离当前页面 DOM 生命周期，任何 JS 绑定、CSS 动画、甚至 visibilitychange 都无法影响它——你只能管好触发前的状态和退出后的响应。
