video.requestpictureinpicture() 报错 “notallowederror” 是因未满足浏览器强制条件：必须在用户手势（如 click）回调中调用，且 video 已加载元数据、未静音、含 playsinline 属性、未被 controls 禁用。
html5 视频的画中画（pip）功能不是靠“开启教程”激活的，而是由浏览器策略 + 元素属性 + 用户交互共同决定的——没有用户手势触发，requestPictureInPicture() 会直接抛错。
为什么 video.requestPictureInPicture() 报错 “NotAllowedError”
这是最常见也最容易卡住的地方。浏览器强制要求：调用必须发生在用户显式操作（如 click、keydown）的事件处理函数内，且该 video 元素必须已加载元数据、未静音、未被 controls 属性禁用（部分浏览器还要求有音频轨道或已播放过）。
- 错误写法：
video.requestPictureInPicture()放在onload或setTimeout里 → 立即报NotAllowedError: Permission denied - 正确姿势：绑定到按钮点击，且确保
video.readyState >= HTMLMediaElement.HAVE_METADATA - 注意：chrome 91+ 要求 video 必须有
playsinline属性（ios safari 同样需要），否则移动端无法进入 PiP
如何判断当前是否支持画中画
别硬调用，先查兼容性。不是所有浏览器都支持，也不是所有 video 都能进 PiP（比如 display: none 的、被父容器 overflow: hidden 截断的，都会失败）。
- 检查 API 存在性：
'pictureInPictureElement' in document && 'requestPictureInPicture' in HTMLVideoElement.prototype - 检查当前状态：
document.pictureInPictureElement为NULL表示未启用；非null则是当前 PiP 中的 video 元素 - 监听变化更稳妥：
document.addEventListener('enterpictureinpicture', handler)和document.addEventListener('leavepictureinpicture', handler)
移动端 iOS Safari 的特殊限制
iOS 上 PiP 行为和桌面 Chrome 完全不同：它只响应系统级控制（如锁屏后上滑控制中心里的 PiP 按钮），不支持 js 主动调用 requestPictureInPicture() —— 即使你写了也不会生效。
立即学习“前端免费学习笔记（深入）”；
- 必须加
playsinline属性，否则视频默认全屏，PiP 根本没机会出现 - 必须设置
webkit-playsinline（旧版 Safari 兼容） - 必须有用户手势触发播放（
video.play()不能自动执行），否则 PiP 控制项不会显示 - 实际 PiP 入口在系统控制中心，不在页面里；JS 只能监听
enterpictureinpicture事件做响应
真正难的不是写那行 requestPictureInPicture()，而是让整个链路满足浏览器层层校验：从加载状态、属性标记、用户交互时机，到移动端的渲染上下文——漏掉任意一环，就只是个静默失败。