HTML画中画（PiP）窗口尺寸和位置由浏览器强制限定，无法通过JS操控；document.pictureInPictureElement为空或requestPictureInPicture()失败主因是未满足用户手势触发、视频元数据已加载、muted属性设置及iframe沙箱权限等条件。
HTML 画中画（Picture-in-Picture，PiP）本身不要求“小窗”必须是特定尺寸或位置，但浏览器强制控制窗口最小尺寸和行为逻辑，实际效果受限于 UA 实现，不是开发者能自由缩放或拖动的“任意小窗”。
为什么 document.pictureInPictureElement 为空或 requestPictureInPicture() 失败？
常见原因不是代码写错，而是触发条件未满足：
-
requestPictureInPicture()必须由用户手势（如click、touchend）触发，不能在setTimeout或异步回调里直接调用 - 目标
<video>元素必须已加载元数据（loadedmetadata事件后），且有有效 src（不支持 blob URL 在部分 Safari 版本） - 视频需处于可播放状态：不能是静音且
muted属性缺失（Chrome 要求自动播放策略合规，Safari 更严，常需显式muted+autoplay） - 页面未被 iframe 沙箱隔离（
sandbox属性不含allow-presentation会禁用 PiP）
如何让画中画窗口“更小”或“固定位置”？
做不到。浏览器（Chrome、Edge、Safari）对 PiP 窗口尺寸有硬性下限（通常 ≥ 160×90px），且禁止 JS 操控其大小、坐标或层级。所谓“小窗”只是相对全屏而言，本质是独立顶层窗口，不是网页内浮动 DOM。
- 无法用 CSS 缩放
video元素来影响 PiP 窗口——PiP 渲染与原页面完全解耦 - 没有 API 设置初始位置；窗口默认出现在屏幕右下角附近，用户可手动拖动，但 JS 无法读取/设置坐标
- 想实现真正可控的“迷你播放器”，得放弃 PiP，改用自定义悬浮
<div>+position: fixed+transform: scale()，再配合video.play()和音视频同步逻辑
移动端（iOS Safari）PiP 行为差异大吗？
非常大。iOS 15+ 才支持 requestPictureInPicture()，且仅限 <video> 在全屏模式下点击系统 PiP 按钮触发，不支持 JS 主动调用（requestPictureInPicture() 会抛 NotSupportedError）。
立即学习“前端免费学习笔记（深入）”；
- iOS 不允许网页内 video 进入 PiP，必须先全屏（
webkitEnterFullscreen()），再点右上角 PiP 图标 - 没有
enterpictureinpicture/leavepictureinpicture事件监听能力（iOS 16.4+ 才开始部分支持） - 若需兼容 iOS，得降级处理：检测
'pictureInPictureElement' in document且video.webkitSupportsPresentationMode('picture-in-picture')为 true，否则隐藏 PiP 按钮，改推“悬浮窗”伪方案
PiP 的“小窗”是浏览器提供的标准化浮层，不是可编程 UI 组件。真要精细控制尺寸、位置、关闭逻辑或跨平台一致体验，就得绕开它，自己实现悬浮容器——但代价是失去系统级音频焦点管理、后台播放保活和免交互续播能力。
