disablepictureinpicture属性必须全小写、无值、直接写在标签内，如，否则chrome/edge会忽略，safari 16.4+虽支持驼峰写法但混用导致跨浏览器不一致。
disablepictureinpicture 属性怎么写才被主流浏览器识别
这个属性必须是全小写、无值、直接写在 <video></video> 标签里，否则 Chrome/Edge 会忽略，Safari 16.4+ 虽支持驼峰写法 disablePictureInPicture，但混用会导致跨浏览器行为不一致。
正确写法只有一种：<video controls disablepictureinpicture src="video.mp4"></video>
常见错误包括：
-
disablePictureInPicture="true"（加引号或赋值 → 属性失效） -
video.setAttribute('disablePictureInPicture', '')（动态添加可生效，但 Safari 16.4 之前完全不支持该属性） -
video.disablePictureInPicture = true（JS 属性只读，赋值无效） - 写在 CSS 里如
style="disablepictureinpicture: true"（根本不是 CSS 属性）
Chrome/Firefox/Safari 的兼容性差异在哪
不是所有浏览器都按同一套逻辑解析这个属性：
- Chrome 71+、Edge 79+：支持
disablepictureinpicture，但若视频源跨域且服务端没返回Access-Control-Allow-Origin: *，JS 仍可能绕过 UI 限制调用requestPictureInPicture() - Safari 16.4+：支持驼峰和小写两种写法，但要求视频满足 PiP 前置条件（已播放、非静音、
playsinline、同源或 CORS 配置正确），否则即使没禁用也进不了 PiP - Firefox 111+：支持该属性，但默认不显示 PiP 按钮（原生控件里本就没有），所以加了也看不出 UI 变化；需手动开启
media.videocontrols.picture-in-picture.enabled才能测试效果 - iOS Safari：不显示 PiP 按钮（因默认全屏），
disablepictureinpicture在 UI 层无表现，但 JS 调用requestPictureInPicture()仍可能成功（尤其配合playsinline）
如何让禁用逻辑在旧版或异常环境里“尽量生效”
仅靠 HTML 属性无法覆盖全部场景，需组合降级策略：
- 对 WebKit 内核（Chrome/Safari）隐藏按钮：
video::-webkit-media-controls-picture-in-picture-button { display: none; } - 禁用右键菜单（防右键触发）：
oncontextmenu="return false;"，但注意这会影响其他右键操作 - 移除
controls属性，改用自定义控件 —— 这样既避免原生 PiP 按钮出现，又能完全控制交互入口 - 监听
enterpictureinpicture事件并立即退出：document.exitPictureInPicture().catch(() => {})，但注意该操作需用户手势上下文才可靠，否则可能抛NotAllowedError - 不要依赖
leavepictureinpicture做拦截，它只是通知退出完成，不是防御点
为什么你加了 disablepictureinpicture 还是进了画中画
这不是 bug，是设计使然：disablepictureinpicture 本质只是“藏按钮”，不是“关开关”。只要页面里有 JS 主动调用 video.requestPictureInPicture()，就完全绕过该属性限制。
典型触发源包括：
- 第三方播放器 SDK（如 Video.js、hls.js 封装层）内置的 PiP 按钮
- 自定义控制栏里误写的
click回调 - 自动播放后脚本触发的 PiP（比如“播放 5 秒后进入 PiP”这类运营逻辑）
- Shadow DOM 封装的
<video></video>组件未透传该 HTML 属性
真正可靠的防护必须是 HTML 属性 + JS 事件监听 + 退出动作三者共存，且要意识到：它防不住录屏、抓包、下载，金融等高敏场景必须叠加 DRM、动态 Token、水印等后端手段。**前端禁用 PiP 是用户体验层的礼貌，不是安全层的锁。**
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
