disablepictureinpicture属性必须全小写、无等号无值地写在HTML video标签中，仅隐藏默认PiP入口，无法阻止JS调用requestPictureInPicture()；真正禁用需配合监听enterpictureinpicture事件并立即调用exitPictureInPicture()。
disablepictureinpicture 属性写法必须全小写且不赋值
这个属性不是 CSS，也不是 JS 可赋值变量，它只在 HTML 标签中以布尔属性形式存在才生效。正确写法是 disablepictureinpicture（全小写、无等号、无引号、无值），例如：<video controls disablepictureinpicture src="demo.mp4"></video>。常见错误包括：disablePictureInPicture="true"（驼峰+赋值）、video.disablePictureInPicture = true（JS 赋值无效，该属性只读）、style="disablepictureinpicture: true"（CSS 里根本不存在这个属性）。
为什么加了 disablepictureinpicture 还能进画中画
它只是隐藏浏览器默认 UI 入口（右键菜单项、控制栏 PiP 按钮），不拦截 JavaScript 主动调用 requestPictureInPicture()。只要页面里有如下任一情况，用户仍可进入画中画：
- 自定义播放器控件里绑定了
video.requestPictureInPicture() - 第三方 SDK（如阿里云播放器、腾讯云 WebPlayer）内部自动触发 PiP
- Shadow DOM 封装的
<video>导致属性未透传到真实元素 - 视频跨域且服务端未返回
Access-Control-Allow-Origin: *，Chrome 等可能绕过 UI 限制
真正禁用画中画需监听 enterpictureinpicture 并立即退出
仅靠 HTML 属性不够，必须配合事件监听和主动退出逻辑。关键点：
- 监听器必须绑定在
<video>元素上，不是document——enterpictureinpicture是元素级事件 - 回调中调用
document.exitPictureInPicture()，并用.catch(() => {})吞掉NotFoundError（比如用户快速进出 PiP） - 该逻辑需在
disablepictureinpicture属性已设置的前提下运行，否则监听可能被绕过
示例代码：
const video = document.querySelector('video');<br>video.addEventListener('enterpictureinpicture', () => {<br> document.exitPictureInPicture().catch(() => {});<br>});
立即学习“前端免费学习笔记（深入）”；
Safari 和移动端兼容性容易被忽略
这个属性在 Safari 16.4 之前完全不支持，会静默忽略；iOS Safari 默认不显示 PiP 按钮（因强制全屏），所以 disablepictureinpicture 在那里基本没 UI 表现，但 JS 仍可成功调用 requestPictureInPicture()。另外，移动端 Chrome/Edge 需确保视频加了 playsinline 才能正常触发 PiP，而禁用逻辑同样要适配——如果用户从全屏切回 inline 再进 PiP，监听器必须早已挂载好，不能依赖 DOMContentLoaded 延迟绑定。
