直接在<video>标签添加disablepictureinpicture属性即可禁用画中画，该原生布尔属性兼容主流浏览器、优先级高于JS方案、能彻底隐藏入口且不影响其他功能。
video 标签如何禁用画中画（Picture-in-Picture）
直接在 <video> 标签上加 disablepictureinpicture 属性即可禁用画中画功能，这是最简单也最可靠的方案。
为什么 disablepictureinpicture 是首选
这个布尔属性由浏览器原生支持，无需 JS 干预，兼容性好（Chrome 71+、Edge 79+、Safari 16.4+、Firefox 111+），且优先级高于 JS 调用的 document.exitPictureInPicture() 或监听事件拦截。
常见错误是试图用 JS 移除 webkitEnterFullscreen 或监听 enterpictureinpicture 后再退出——这只能“事后补救”，用户仍能看到画中画入口或短暂触发状态。
-
disablepictureinpicture会直接隐藏右键菜单里的“画中画”选项，也禁用video.requestPictureInPicture()调用 - 它不影响全屏、下载、音量等其他控制项
- 不需要配合
controls属性，即使关闭 controls 也生效
与 playsinline 的区别别搞混
playsinline 解决的是 iOS Safari 默认强制全屏播放的问题，和画中画无关。两者常被一起写，但作用独立：
立即学习“前端免费学习笔记（深入）”；
<video disablepictureinpicture playsinline></video>
如果你只想要禁用画中画，playsinline 不是必需的；但若同时面向 iOS 用户，建议一并加上，避免行为不一致。
JS 动态禁用画中画的局限性
如果必须用 JS 控制（比如根据用户权限动态开关），可通过设置 video.disablePictureInPicture = true，但它有明显限制：
- 必须在
video元素插入 DOM 后、且尚未触发任何播放前设置才稳定生效 - 某些浏览器（如旧版 Safari）可能忽略该属性赋值，仍显示画中画按钮
- 无法阻止用户通过地址栏 PiP 按钮（Chrome 116+）或系统级快捷键触发
所以生产环境强烈推荐用 HTML 属性声明式禁用，而非依赖 JS。
真正要留意的是：如果 video 是动态插入（比如通过 innerHTML 或框架 v-html 渲染），需确保 disablepictureinpicture 属性随标签一起写入，而不是靠 JS 补上——后者大概率失效。
