HTML5视频标签中正确禁用画中画功能应使用驼峰命名的布尔属性disablePictureInPicture，直接写在video标签内且不赋值；该属性为只读，JS仅能检测不能启用，需结合CSS隐藏按钮作降级处理。
HTML5 视频标签中没有 disablepictureinpicture 属性，正确写法是 disablePictureInPicture（驼峰命名），且它是一个布尔属性，用于禁用视频的“画中画”（PiP）功能。
如何正确使用 disablePictureInPicture
该属性需直接写在 <video> 标签中，无需赋值（如 disablePictureInPicture="true" 是错误写法），存在即生效：
<source src="video.mp4" type="video/mp4">
</video>
与 JavaScript 配合动态控制 PiP
若需运行时开关画中画，应配合 video.disablePictureInPicture 属性（JS 属性名同 HTML 属性名）和 video.requestPictureInPicture() 方法：
- 设置
video.disablePictureInPicture = true后，调用requestPictureInPicture()会抛出NotAllowedError - 该 JS 属性为只读，不能通过 JS “启用” PiP；HTML 属性才是源头控制，JS 只能禁用，不能反向开启
- 常见做法：初始化时加 HTML 属性，再用 JS 检查是否已禁用：
if (video.disablePictureInPicture) { /* 不支持或已被禁 */ }
浏览器兼容性与注意事项
该属性在主流现代浏览器中支持良好（Chrome 70+、Edge 79+、Safari 16.4+、Firefox 91+），但需注意：
立即学习“前端免费学习笔记（深入）”；
- 仅对具有
controls属性或用户可交互触发的视频生效；无 controls 的视频本就不会显示 PiP 按钮 - Safari 中还需确保视频满足 PiP 条件（如非静音、已播放、非跨域等），否则即使未禁用也无法进入 PiP
- 部分安卓 WebView 或旧版浏览器可能忽略该属性，建议结合 CSS 隐藏 PiP 按钮作为降级方案：
video::-webkit-media-controls-picture-in-picture-button { display: none; }
替代方案：完全移除 PiP 按钮
如果目标是视觉上隐藏按钮而非仅禁用功能，可组合使用：
- HTML 属性
disablePictureInPicture阻止行为 - CSS 隐藏按钮（针对 WebKit 内核）：
video::-webkit-media-controls-picture-in-picture-button { display: none; } - 对于 Firefox，PiP 按钮默认不显示在原生控件中，无需额外处理
