必须绑定在video元素本身，不能挂到document或父容器上，因enterpictureinpicture和leavepictureinpicture事件不冒泡、不支持委托；需用video.addeventlistener()监听，且触发依赖视频已播放、页面未被iframe沙箱限制等前提条件。
video元素上监听enterpictureinpicture和leavepictureinpicture事件
这两个事件必须绑定在video元素本身，不能挂到document或父容器上——它们不冒泡，也不支持委托。浏览器只在视频成功进入或退出画中画时触发，且事件对象里没有额外数据，状态判断要靠对比document.pictureInPictureElement。
-
enterpictureinpicture：视频窗口已浮起，document.pictureInPictureElement此时等于该video元素 -
leavepictureinpicture：PiP窗口已关闭，document.pictureInPictureElement变回null - 错误写法：
document.addEventListener('enterpictureinpicture', ...)→ 永远不会触发 - 正确写法：
video.addEventListener('enterpictureinpicture', handler)，其中video是document.querySelector('video')拿到的实例
为什么监听了却没反应？常见失效原因
不是代码写错，而是触发条件没满足。PiP事件依赖底层状态，以下任一情况都会导致监听“静默失效”：
- 视频尚未播放（
video.readyState 或未触发<code>play事件） - 页面被 iframe 嵌入，且外层未设置
allow="picture-in-picture"属性 - 视频源跨域，但服务端没返回
Access-Control-Allow-Origin响应头 - 用户手势上下文丢失：比如在
setTimeout、Promise.then或fetch回调里调用requestPictureInPicture() - 移动端 Safari 未加
playsinline，导致默认全屏，PiP机制不激活
如何验证事件是否真的生效
别只靠console.log，直接查 DOM 状态更可靠：
- 手动触发 PiP 后，在控制台执行：
document.pictureInPictureElement === document.querySelector('video')→ 应返回true - 检查
video.matches(':picture-in-picture')→ 返回true说明当前处于 PiP 状态 - 监听事件后，立刻打印
document.pictureInPictureElement值，确认它是否随事件同步变化 - 避免轮询：
setInterval(() => console.log(document.pictureInPictureElement), 100)效率低且容易漏掉瞬态切换
Chrome 114+ 后的兼容性注意点
新版 Chrome 已废弃document.exitPictureInPicture()，改用video.exitPictureInPicture()。但事件监听逻辑不变，仍需绑定在video上：
-
enterpictureinpicture监听器里若调用document.exitPictureInPicture()，在 Chrome 114+ 会静默失败（不报错，也不退出） - 必须改用
video.exitPictureInPicture()，且它也返回 Promise，需.catch(() => {})吞掉NotFoundError - Safari 和旧版 Chrome 仍只认
document.exitPictureInPicture()，实际项目建议做运行时判断 - 真正容易被忽略的是：事件监听本身不受版本影响，但退出动作的 API 已分裂，混用会导致部分浏览器 PiP 无法强制退出
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
