disablepictureinpicture属性必须显式设为true才生效，即写为disablepictureinpicture="true"；仅写disablepictureinpicture或disablepictureinpicture="false"均无效，且firefox完全不支持该属性。
video 标签如何正确设置 disablePictureInPicture 属性
直接在 <video></video> 标签里写 disablePictureInPicture 是无效的——这个属性必须是布尔属性（boolean attribute），但它的行为和 controls 不同：**仅写属性名不等于禁用，必须显式设为 true 才生效**。
常见错误是只写 disablePictureInPicture 或 disablePictureInPicture="false"，这两种写法都会让画中画保持启用状态。
-
disablePictureInPicture（无值）→ 浏览器视为true，画中画被禁用 ✅ -
disablePictureInPicture="true"→ 显式声明，同样禁用 ✅ -
disablePictureInPicture="false"→ 无效，浏览器仍启用画中画 ❌ - 完全不写该属性 → 默认启用画中画 ❌
JavaScript 动态控制 disablePictureInPicture 的坑
用 JS 设置时不能直接赋值字符串，必须用 setAttribute 或操作 DOM 属性。更关键的是：**该属性只在 video 元素已插入 DOM 后才可生效**，在 document.createElement('video') 后立刻设置可能被忽略。
推荐做法是等元素挂载后再设置：
<video id="myVideo" src="demo.mp4"></video><script>
const video = document.getElementById('myVideo');
// ✅ 正确：用 setAttribute
video.setAttribute('disablePictureInPicture', 'true');
<p>// ❌ 错误：video.disablePictureInPicture = true 不起作用（不是标准 DOM 属性）
// ❌ 错误：setAttribute('disablepictureinpicture', 'true') 拼写必须全小写且连字符保留
</script>
disablePictureInPicture 在不同浏览器中的兼容性表现
Chrome 70+、Edge 79+、Safari 16.4+ 支持该属性；Firefox **完全不支持** disablePictureInPicture，即使写了也无效。如果你需要在 Firefox 下禁用画中画，只能靠 CSS 隐藏右键菜单里的“画中画”项 + 监听 enterpictureinpicture 事件并调用 document.exitPictureInPicture() 强制退出。
- Chrome / Edge：写
disablePictureInPicture即可隐藏按钮并阻止触发 - Safari：需同时加
webkit-playsinline和playsinline，否则画中画按钮可能仍显示 - Firefox：该属性被忽略，需额外防御逻辑
为什么加了 disablePictureInPicture 还能进画中画？
最常被忽略的一点：**该属性只影响用户主动触发的画中画（如点击按钮、右键菜单），不影响通过 JavaScript 主动调用 video.requestPictureInPicture() 的行为**。也就是说，它只是 UI 层面的屏蔽，不是能力封锁。
如果你发现按钮没了但代码还能进画中画，检查是否在其他地方调用了：
-
video.requestPictureInPicture()—— 这个调用不受disablePictureInPicture限制 - 页面有多个
<video></video>，只给其中一个加了属性 - 视频是动态插入的（比如 Vue/React 渲染），属性没同步到真实 DOM 节点上
真正可靠的禁用方式，是结合属性声明 + 监听 enterpictureinpicture 事件并立即退出，尤其在跨浏览器场景下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
