最简单可靠的方式是在标签中直接写disablepictureinpicture（全小写、不赋值、不加引号）；该布尔属性仅需存在即生效，驼峰命名或赋值均无效，且动态设置可能失效；它仅隐藏ui入口，不拦截requestpictureinpicture()调用，需配合监听enterpictureinpicture事件并主动退出才能真正阻止。
直接在 <video></video> 标签里写 disablepictureinpicture（全小写、不赋值、不加引号）就能禁用浏览器默认的画中画入口，这是最简单也最可靠的方式。
disablepictureinpicture 属性怎么写才生效
这个属性是布尔型 HTML 属性，只看是否存在，不看值：
- ✅ 正确写法：
<video disablepictureinpicture src="a.mp4"></video> - ❌ 错误写法：
disablePictureInPicture（驼峰命名在 Safari 16.4+ 可能兼容，但 Chrome/Edge 要求全小写） - ❌ 错误写法：
disablepictureinpicture="true"或disablepictureinpicture="false"（只要存在就生效，“false”反而会触发禁用） - ❌ 错误写法：
style="disablepictureinpicture: true"（这不是 CSS 属性，完全无效） - ⚠️ 动态插入时必须随标签一起写入：如果用
innerHTML或框架的v-html渲染，setAttribute('disablepictureinpicture', '')很可能失效
为什么加了 disablepictureinpicture 还能进画中画
它只隐藏 UI 入口，不拦截 JavaScript 调用：
- 右键菜单里的“画中画”选项、控制栏 PiP 按钮、地址栏 PiP 图标都会消失
- 但
video.requestPictureInPicture()仍可成功调用（尤其常见于第三方播放器 SDK 或自定义按钮） - 已打开的画中画窗口不会自动关闭，也不会阻止后续 JS 触发
- 它不是运行时拦截机制，和内容安全无关，也不防录屏或抓流
如何真正阻止所有画中画行为
HTML 属性 + JS 监听是唯一稳妥组合：
- 必须同时设置
disablepictureinpicture属性和监听enterpictureinpicture事件 - 监听器要绑定在
video元素上，不是document（该事件是元素级的） - 立即调用
document.exitPictureInPicture()，并用.catch(() => {})吞掉NotAllowedError - 示例：
const video = document.querySelector('video');<br>video.addEventListener('enterpictureinpicture', () => {<br> document.exitPictureInPicture().catch(() => {});<br>}); - 注意：退出操作需用户手势上下文才能成功；
leavepictureinpicture是退出完成通知，不能用来拦截
真正容易被忽略的是：动态渲染场景下属性必须随初始 HTML 一并写出，以及金融等敏感场景中，disablepictureinpicture 仅是 UI 层开关，离内容防护还差很远——得靠 token 鉴权、HLS 加密、DRM 和水印这些后端+客户端协同手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
