html5 video 触发画中画需用户手势同步调用 requestpictureinpicture() 且视频已可播放；退出需监听 leavepictureinpicture 事件并检查 document.pictureinpictureelement 变化；移动端须设 playsinline，ios 16.4+ 才支持 js 控制。
HTML5 video 元素怎么触发画中画（PiP）？
浏览器原生支持 PiP，但必须满足两个硬性条件：用户手势触发 + 视频已播放或可播放。直接调用 video.requestPictureInPicture() 会失败，报错 NotAllowedError。
- 必须在用户点击、键盘事件等**同步的交互回调中**调用，不能放在
setTimeout或Promise.then里 - 视频需处于“可播放状态”：已加载元数据（
loadedmetadata）、未被静音（部分浏览器强制要求）、且未被controls属性禁用（不影响调用） - 移动端 Safari 需额外设置
playsinline，否则默认全屏，PiP 按钮不出现
为什么 video.exitPictureInPicture() 有时没反应？
退出 PiP 不是“立即生效”，它返回 Promise，但失败时不会抛异常，而是静默 resolve —— 所以你以为没执行，其实是已经退出了但没监听状态变化。
- 务必监听
document.pictureInPictureElement变化，而不是只靠 Promise 结果判断 - 如果当前没有 PiP 元素（比如用户手动点了退出），再调
exitPictureInPicture()会 resolve 空值，不是 reject - Chrome 114+ 后，
document.exitPictureInPicture()已废弃，只认video.exitPictureInPicture()
如何监听 PiP 进入/退出状态变化？
靠轮询 document.pictureInPictureElement 效率低还容易漏，正确方式是监听全局事件。
- 监听
enterpictureinpicture和leavepictureinpicture事件，绑定在video元素上即可 - 注意：这两个事件**不冒泡**，也不能用
document.addEventListener监听，必须挂到具体video实例 - 事件对象里没有额外数据，状态要靠对比
document.pictureInPictureElement === video来确认
兼容性与移动端常见坑
PiP 在桌面 Chrome/Firefox/Edge 基本可用，但移动端差异极大，尤其 iOS。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 16.4+ 才支持 JS 控制 PiP（之前只允许系统按钮）；且必须开启
webkit-playsinline和playsinline属性 - Android Chrome 要求视频有音频轨道（哪怕静音），否则
requestPictureInPicture()直接被忽略 - Firefox 不支持
video.requestPictureInPicture({ videoWidth, videoHeight })的尺寸参数，传了也无视
PiP 的核心约束始终是“用户意图明确”和“媒体可播放”，绕过这些做自动进入，基本都会被浏览器拦截。最稳的做法：按钮显式标注“画中画”，点击后立刻调用，失败就提示“请先播放视频”。
