disablepictureinpicture是html5 video标签的布尔属性，仅隐藏浏览器ui画中画入口（如右键菜单、地址栏按钮），无法阻止js调用requestpictureinpicture()或系统级快捷键触发pip；必须全小写直接写在标签中才生效，动态js设置常失效。
disablePictureInPicture 是什么属性？它真能禁用小窗吗
disablePictureInPicture 是 <video></video> 标签的布尔属性，作用是告诉浏览器「这个视频不允许进入画中画（PiP）模式」。但它只影响浏览器原生的 PiP 触发入口——比如右键菜单里的「画中画」选项、地址栏 PiP 按钮、或 document.exitPictureInPicture() 之后的自动恢复行为。
注意：它不阻止 JS 主动调用 video.requestPictureInPicture()，也不影响系统级 PiP（如 macOS 的全局快捷键 Cmd+Shift+P），更不干预第三方插件或外挂实现的小窗。
怎么写才真正生效
必须同时满足两个条件，disablePictureInPicture 才会被浏览器识别并起效：
- 属性名拼写完全正确（不能写成
disablepip、disable-pip或disablePictureInpicture） - 元素必须已插入 DOM，且在用户交互（如点击、触摸）之前设置好该属性——动态添加属性（比如用
el.setAttribute('disablePictureInPicture', '')）在部分浏览器（尤其是 Safari）中可能被忽略
推荐写法：
<video disablepictureinpicture controls></video>或通过 JS 在创建元素时直接设置：
const v = document.createElement('video');<br>v.disablePictureInPicture = true;
为什么加了属性还是能进小窗
常见原因有三个：
- 用户用了系统级快捷键（如 macOS 的
Cmd+Shift+P），这个绕过 HTML 属性控制 - 视频正在播放且未加
controls属性，导致右键菜单不可见，但地址栏 PiP 按钮仍存在；加上controls才能让浏览器明确知道这是可交互媒体元素 - 某些安卓 WebView 或旧版 Chrome（disablePictureInPicture 支持不完整，需配合
playsinline和webkit-playsinline一起用
兼容性兜底建议：
<video disablepictureinpicture playsinline webkit-playsinline controls></video>
想彻底禁用 PiP，还得配合 JS 干点啥
仅靠 HTML 属性不够稳健，尤其要防 JS 主动触发。最可靠的做法是监听 enterpictureinpicture 事件并立即退出：
video.addEventListener('enterpictureinpicture', (e) => {<br> e.preventDefault();<br> video.exitPictureInPicture().catch(() => {});<br>});
同时建议禁用 requestPictureInPicture() 调用：
Object.defineProperty(HTMLVideoElement.prototype, 'requestPictureInPicture', {<br> value: () => Promise.reject(new Error('PiP disabled'))<br>});
不过这个会干扰调试，生产环境慎用。
真正麻烦的是那些不走标准 API 的场景——比如用户装了 PiP 扩展、或用录屏工具模拟小窗。这种层面，HTML 属性和 JS 都无能为力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
