浏览器不支持自动进入画中画，因PiP必须由用户手势同步触发requestPictureInPicture()，异步操作或非手势事件（如canplay、setTimeout）均会抛NotAllowedError。
autoplay 可以自动播放，但 autopictureinpicture 并不存在 —— 浏览器**不支持自动进入画中画**，这是硬性限制，不是漏写了属性。
为什么没有 autopictureinpicture 属性？
所有主流浏览器（Chrome、Edge、Firefox、Safari）都明确拒绝“自动触发 PiP”。原因很直接：画中画是强用户意图行为，必须由明确的手势（如 click、touchend）同步调用 requestPictureInPicture()，否则会抛 NotAllowedError。即使你把 video.play() 和 requestPictureInPicture() 写在同一个 click 回调里，只要中间夹了异步操作（比如 setTimeout、Promise.then、await 等待非用户触发的时机），就视为“非手势上下文”，立即失败。
常见误用场景与静默失败原因
这些写法看似合理，实则必败：
- 在
video.addEventListener('canplay', () => video.requestPictureInPicture())中调用 ——canplay不是用户手势，无权限 - 给
video加autoplay+playsinline后，在loadeddata事件里调用 —— 仍无手势上下文 - 用
setTimeout(() => video.requestPictureInPicture(), 100)模拟“稍后触发” —— 定时器中断手势链，被拦截 - 在
fetch().then(() => video.requestPictureInPicture())里调用 —— Promise 回调不属于初始交互流
移动端特别注意：iOS Safari 的双重门槛
iOS 16.4+ 才开放 JS 控制 PiP，且必须同时满足：
立即学习“前端免费学习笔记（深入）”；
-
video元素带playsinline和webkit-playsinline属性 - 视频源需跨域允许：
Access-Control-Allow-Origin: *（否则NotFoundError） - 不能设
disablePictureInPicture（包括 JS 动态设置） - 按钮点击必须直接、同步、无中间 await（哪怕只 await 一个已 resolve 的 Promise）
即便全部满足，Safari 仍不支持 enterpictureinpicture/leavepictureinpicture 事件，只能靠轮询 document.pictureInPictureElement 判断状态。
真正可行的“接近自动”方案
如果你需要降低用户操作成本，唯一合规路径是：让用户点一次按钮，之后由 JS 自动完成 PiP 切换逻辑 —— 但前提是这个按钮本身是用户真实点击的。
- 按钮文案可写成“继续观看（画中画）”，而非“开启画中画”，降低心理门槛
- 点击后立即
await video.play()（若未播），再await video.requestPictureInPicture() - 失败时检查
err.name：是NotAllowedError就提示“请先播放视频”，是NotFoundError就检查 DOM 是否挂载、是否被disablePictureInPicture - 退出后不要假设视频自动恢复播放 —— 大部分浏览器保持暂停，需手动
video.play()（如果业务需要）
真正的“自动 PiP”在当前 Web 标准下不存在，任何绕过用户手势的尝试都会被浏览器拦截。别在 autopictureinpicture 上浪费时间，它从来就不是标准的一部分，也不会成为。
