disablePictureInPicture是HTML5中禁用视频画中画模式的布尔属性，直接添加于video标签即可生效，支持Chrome、Edge、Firefox（119+）、Safari（16.4+），但各浏览器行为略有差异。
在 HTML5 中，disablePictureInPicture 是一个布尔属性，用于禁止视频元素启用画中画（Picture-in-Picture）模式。它直接作用于 元素，无需 JavaScript 即可生效。
直接在 HTML 中设置 disablePictureInPicture
只需在 标签中添加该属性即可禁用画中画功能：
<video controls disablepictureinpicture><source src="example.mp4" type="video/mp4"></source></video>
浏览器会自动隐藏画中画按钮（如 Chrome 地址栏右侧的 PiP 图标），且调用 video.requestPictureInPicture() 也会失败。
通过 JavaScript 动态控制
你也可以用 JS 设置或移除该属性，实现运行时开关：
- 禁用：
video.setAttribute('disablePictureInPicture', '')或video.disablePictureInPicture = true - 启用：
video.removeAttribute('disablePictureInPicture')或video.disablePictureInPicture = false
注意：设为 false 并不自动启用 PiP，只是解除限制；用户仍需手动点击按钮或调用 API 触发。
兼容性与注意事项
该属性目前在 Chrome、Edge、Firefox（119+）、Safari（16.4+）中支持，但行为略有差异：
- Chrome/Edge：隐藏 PiP 按钮，阻止 API 调用
- Firefox：仅禁用 API，控件按钮可能仍显示（但点击无效）
- Safari：完全隐藏按钮并拒绝请求
若需更精细控制（如仅对特定视频禁用），建议配合 webkit-playsinline 和 playsinline 属性使用，尤其在 iOS 上避免全屏跳转干扰。
不复杂但容易忽略：这个属性必须写在 标签上，不能通过 CSS 或父容器控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
