仅靠disablepictureinpicture属性无法彻底禁用画中画，它仅隐藏浏览器ui入口，必须配合enterpictureinpicture事件监听并立即调用document.exitpictureinpicture()才能真正阻止。
video 标签如何禁用画中画（PiP）功能
直接在 <video></video> 标签上加 disablePictureInPicture 属性即可彻底禁用画中画，无需 JavaScript 干预。这是最简单、最可靠的方式。
为什么加了 disablePictureInPicture 还能触发 PiP
常见原因是属性写法错误或浏览器兼容性问题：
-
disablePictureInPicture是布尔属性，**不能写成disablePictureInPicture="false"** —— 只要存在该属性，就禁用；写成="true"或="false"都无效，甚至可能被当作字符串值导致行为异常 - 必须是原生
<video></video>元素，通过document.createElement('video')动态创建后，需在插入 DOM 前设置该属性，否则部分浏览器（如 Safari）可能忽略 - 某些安卓 WebView 或旧版 Chrome（webkit-playsinline 和 JavaScript 拦截
JavaScript 补充拦截 PiP 的实际场景
当需要动态控制（比如用户登录后才允许 PiP），或遇到属性失效的边缘情况时，可监听并取消 enterpictureinpicture 事件：
const video = document.querySelector('video');
video.addEventListener('enterpictureinpicture', (e) => {
e.preventDefault();
video.requestPictureInPicture().catch(() => {});
});
注意：e.preventDefault() 在大多数浏览器中对 enterpictureinpicture 事件无效，真正起作用的是后续调用 video.requestPictureInPicture() 并立即 reject —— 这会中断系统 PiP 流程。但该方法仅适用于已播放过的视频（readyState >= 2），静音或未播放状态下调用会报错 "DOMException: play() can only be initiated by a user gesture"。
移动端 iOS Safari 的特殊处理
iOS Safari 不识别 disablePictureInPicture，且默认无 PiP 图标，但用户仍可通过长按视频呼出系统 PiP 控制面板。唯一有效方式是：
- 添加
playsinline+webkit-playsinline，确保视频内联播放 - 设置
x5-playsinline和x5-video-player-type="h5"（针对微信/QQ 内置浏览器） - 避免使用
controls属性——iOS 下自带控件里的 PiP 按钮无法隐藏，改用自定义控件 - 监听
webkitbeginfullscreen事件并e.preventDefault()，可阻止全屏转 PiP 的连带行为
真正麻烦的是：iOS 上没有 API 能完全禁止用户手动唤出 PiP，只能靠 UI 层规避和体验降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
