disablePictureInPicture仅隐藏浏览器默认画中画入口，无法阻止JS调用requestPictureInPicture()；真正禁用需结合该属性与enterpictureinpicture事件监听并立即调用exitPictureInPicture()。
disablePictureInPicture 属性只能禁用浏览器 UI 提供的画中画入口，无法阻止 JavaScript 主动调用 requestPictureInPicture()，更不构成任何内容安全防护。
为什么加了 disablePictureInPicture 还能进画中画
这个属性是纯 UI 层面的“隐藏开关”，不是运行时拦截机制。只要页面里有 JS 代码调用 video.requestPictureInPicture()，用户依然能进入画中画——尤其常见于第三方播放器 SDK、自定义控制栏按钮或误写的自动触发逻辑。
- HTML 属性只影响右键菜单、“控件栏 PiP 按钮”等浏览器默认 UI 元素
-
video.disablePictureInPicture（JS 属性）是只读的，设为true不生效；必须用setAttribute('disablepictureinpicture', '')或直接写在 HTML 中 - 大小写不敏感，但推荐统一用小写
disablepictureinpicture，避免 Safari 等浏览器解析异常 - 动态添加该属性后，已打开的画中画窗口不会自动关闭，也不会阻止后续 JS 调用
如何真正阻止所有画中画行为
仅靠 HTML 属性不够，需配合事件监听和主动退出。关键点是：在 enterpictureinpicture 触发后立刻调用 document.exitPictureInPicture()，并忽略可能的拒绝错误。
- 必须为
<video>元素同时设置disablepictureinpicture属性和 JS 监听器 - 监听器要写在
video上，不是document——enterpictureinpicture是元素级事件 - 使用
.catch(() => {})吞掉exitPictureInPicture()可能抛出的NotFoundError（比如用户快速进出） - 示例代码：
const video = document.querySelector('video');<br>video.addEventListener('enterpictureinpicture', () => {<br> document.exitPictureInPicture().catch(() => {});<br>});
哪些情况会让 disablePictureInPicture 失效或被忽略
它不是万能开关，很多实际场景下根本不起作用，甚至被浏览器直接跳过。
立即学习“前端免费学习笔记（深入）”；
- Safari 16.4 之前版本完全不支持该属性，会静默忽略
- 视频源跨域且服务端未返回
Access-Control-Allow-Origin: *时，部分浏览器（如 Chrome）可能绕过 UI 限制，允许 JS 触发 PiP - 移动端 iOS Safari 不显示 PiP 按钮本身（因默认全屏），此时该属性无实际表现，但 JS 仍可调用成功
- 若页面使用了 Web Components 封装
<video>，Shadow DOM 可能导致属性未透传到底层元素 - 通过
document.createElement('video')动态创建后，必须在 append 到 DOM 前就设置setAttribute('disablepictureinpicture', '')，否则无效
金融/教育类敏感视频不能只靠 disablePictureInPicture
这个属性对录屏、抓包、m3u8 下载、内存 dump 完全无效，把它当作“防盗措施”是危险误解。
- 真实防护需要服务端动态 token 鉴权 + HLS/DASH 分片加密 + DRM（如 Widevine、FairPlay）
- 前端可叠加动态水印（时间戳+用户 ID）、Canvas 帧级干扰、环境检测（是否在模拟器/录屏进程下运行）
- 若业务真要求“绝对不可 PiP”，唯一可靠方式是不提供原生
<video>，改用<canvas>渲染 + MediaSource API + 自研解码逻辑（代价极高，极少采用） - 大多数合规方案里，
disablepictureinpicture仅作为 UI 合规性声明的一环，和“本视频受版权保护”文字同级，无技术约束力
最容易被忽略的一点：即使你把所有 JS 监听、属性、CORS、手势都配齐了，Safari 对 leavepictureinpicture 事件根本不支持——得靠轮询 document.pictureInPictureElement 来感知退出，否则 UI 状态永远不同步。
