直接为元素绑定enterpictureinpicture事件即可监听，该事件在画中画窗口真正创建并显示后触发，不冒泡、无额外属性，需确保视频已加载元数据且在组件卸载时移除监听器。
如何监听 enterpictureinpicture 事件
直接给 <video></video> 元素绑定 enterpictureinpicture 事件即可，它在用户成功触发画中画（比如点击浏览器的 PiP 按钮、调用 video.requestPictureInPicture()）后同步触发。注意：该事件**不冒泡**，也不能用事件委托，必须绑定在目标 video 实例上。
常见错误是绑定到 document 或父容器，结果完全收不到；还有人误以为它会在调用 requestPictureInPicture() 后立刻触发——其实它只在 PiP 窗口真正创建并显示后才触发，中间可能有短暂延迟（尤其在系统资源紧张时）。
- 确保
video已加载元数据（loadedmetadata或canplay后再绑定更稳妥） - 不要依赖事件触发顺序来控制 UI 状态，建议同时监听
leavepictureinpicture做对称处理 - 若使用 React/Vue 等框架，需注意组件卸载时手动移除监听器，否则可能引发内存泄漏
enterpictureinpicture 的事件对象里有什么
该事件是标准 Event 实例，**没有额外属性**（不像 play 或 timeupdate 那样带 currentTime）。它的作用纯粹是“通知你 PiP 已就绪”，后续逻辑需自行维护状态（比如设置 isInPiP = true）。
容易被忽略的一点：事件触发时，video 元素的 document.pictureInPictureElement 已指向该 video，但此时 video 的 offsetParent、getBoundingClientRect() 等布局相关 API 返回值已失效（因为元素已脱离主文档流）。别试图在此刻做 DOM 尺寸计算。
video.addEventListener('enterpictureinpicture', () => {
console.log('已进入画中画');
// ✅ 安全：更新状态、发埋点、暂停其他视频
// ❌ 危险：video.getBoundingClientRect()、video.offsetWidth
});
为什么有时监听不到 enterpictureinpicture
最常见原因是浏览器兼容性或权限限制：Chrome 70+、Edge 79+、Safari 16.4+ 支持，Firefox **完全不支持** PiP API（截至 2024 年中）；iOS Safari 也不支持。另外，只有用户手势触发（如 click、tap）后的 requestPictureInPicture() 才能成功，自动调用会静默失败，自然也不会触发事件。
- 检查
document.pictureInPictureElement是否为null，非null表示当前有 PiP 活跃，可辅助调试 - 捕获
requestPictureInPicture()的 Promise rejection，常见错误信息是"NotAllowedError"（缺少用户手势）或"SecurityError"（跨域视频未加crossorigin属性） - 某些安卓 WebView（如微信内置）禁用了 PiP，即使调用成功也无事件回调
和 leavepictureinpicture 配合使用的注意事项
这两个事件必须成对监听，且逻辑要对称。例如：进入 PiP 时暂停主页面其他视频，退出时恢复播放；进入时隐藏控制栏，退出时重新显示。但要注意退出时机不唯一——用户可能手动关闭 PiP 窗口、按 ESC、切换标签页导致系统自动退出，甚至系统休眠后恢复。
一个易踩的坑：在 leavepictureinpicture 回调里直接调用 video.play() 可能失败（因自动播放策略限制），应结合 video.paused === true 和用户交互上下文判断是否允许恢复。
PiP 状态本身不可靠，别只依赖事件——始终以 document.pictureInPictureElement === video 为准做最终判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
