video标签本身不提供“编辑器级”画中画控制能力，所谓“html编辑器做画中画”本质是用标准video+原生pip api实现，不是靠某个编辑器功能开关。
直接说结论：video 标签本身不提供“编辑器级”画中画控制能力，所谓“HTML 编辑器做画中画”本质是用标准 video + 原生 PiP API 实现，不是靠某个编辑器功能开关。浏览器是否支持、视频状态是否合规、JS 调用是否在用户手势中——这三点卡住，再好的编辑器也出不来画中画。
如何用 allowpictureinpicture 正确启用画中画入口
这个属性是 PiP 的“门把手”，不是“门锁”。加了它，浏览器才可能在右键菜单或控件栏显示 PiP 按钮；不加，连默认入口都没有。
-
allowpictureinpicture必须写在<video></video>标签里，不是 CSS 或 JS 属性；写成allowPictureInPicture（驼峰）在 Safari 下会静默失效 - 它不影响 JS 调用
requestPictureInPicture()，哪怕你写了disablepictureinpicture，只要 JS 里调了，照样能进 PiP - 移动端 iOS Safari 默认不显示 PiP 按钮（因强制全屏），此时该属性无视觉表现，但 JS 触发仍有效——所以不能只靠它判断 PiP 是否可用
- 如果视频源跨域（比如 CDN 地址），服务端必须返回
Access-Control-Allow-Origin: *，否则 Chrome 会拒绝 PiP 启动，且不报错
requestPictureInPicture() 调用失败的常见原因
报 NotAllowedError 或静默失败，基本不是代码写错了，而是环境没达标。
- 视频没真正播放过：即使只播了 1ms，也要先调
video.play()成功（返回 Promise 并 resolve），再立刻调requestPictureInPicture() - 调用不在用户手势中：按钮
click事件里直接await video.requestPictureInPicture()可以；但如果包在setTimeout、Promise.then或自定义事件回调里，就会被拦截 - 视频处于暂停或未加载状态：
video.readyState （即还没到 <code>HAVE_ENOUGH_DATA）时调用必失败；建议监听canplay或playing事件后再绑定按钮逻辑 - 移动端缺失
playsinline：iOS Safari 要求视频必须可内联播放才能触发 PiP，否则直接忽略请求；需同时写playsinline和webkit-playsinline
如何真正禁用画中画（而不是假装禁用）
disablepictureinpicture 只是藏按钮，不是关功能。要彻底阻断，得靠 JS 主动拦截 + 清理。
- 必须同时做两件事：HTML 层加
disablepictureinpicture，JS 层监听enterpictureinpicture事件 - 监听器必须挂在
video元素上，不是document——这个事件不冒泡，document 上监听不到 - 进入瞬间就调
document.exitPictureInPicture().catch(() => {})，并吞掉NotFoundError（比如用户快速进出导致元素已不存在） - 注意 Safari 16.4 之前版本完全忽略
disablepictureinpicture，所以 JS 监听 + 退出是唯一可靠手段
::picture-in-picture-window 样式能改什么、不能改什么
这个伪类只作用于 PiP 窗口自身，不是视频元素，也不能改变窗口行为。
- 能控制尺寸、位置（
top/right）、边框、圆角、背景、阴影——仅此而已 - 不能修改窗口层级（z-index 无效）、不能加动画、不能响应点击事件（PiP 窗口是独立 OS 级窗口，CSS 无法注入交互）
- 样式只在 PiP 激活时生效；退出后所有样式自动失效，无需手动清理
- 目前仅 Chrome 和 Edge 支持该伪类；Safari 不支持，Firefox 完全不支持 PiP，所以别指望跨浏览器一致外观
最容易被忽略的是：PiP 窗口一旦激活，就脱离当前页面 DOM 树和渲染上下文，所有页面级 JS 监听、CSS 变量、甚至 window 对象都不可见。你以为在控制它，其实只是在给一个独立窗口贴张静态皮肤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
