disablepictureinpicture 属性必须作为布尔属性直接写在 标签内，不赋值、不加引号、全小写；它仅隐藏 ui 入口，不阻止 requestpictureinpicture() 调用，需配合事件监听与退出逻辑才能真正禁用画中画。
disablepictureinpicture 属性怎么写才生效
必须作为布尔属性直接写在 <video></video> 标签里，不赋值、不加引号、全小写——正确写法是 disablepictureinpicture。写成 disablePictureInPicture（驼峰）在 Safari 16.4+ 可能勉强工作，但 Chrome/Edge 要求严格小写，否则无效。
常见错误写法包括：
-
disablePictureInPicture="true"（驼峰 + 赋值 → 大部分浏览器忽略） -
disablepictureinpicture="false"（只要属性存在就禁用，“false”反而触发禁用） -
video.disablePictureInPicture = true（JS 属性只读，赋值无效） -
style="disablepictureinpicture: true"（不是 CSS 属性，完全无意义）
推荐写法：<video controls disablepictureinpicture src="demo.mp4"></video>
为什么加了 disablepictureinpicture 还能进画中画
这个属性只隐藏浏览器 UI 入口（右键菜单、“控件栏 PiP 按钮”、地址栏 PiP 图标），不拦截 JavaScript 主动调用 requestPictureInPicture()。只要页面里有类似下面的代码，用户仍可进入画中画：
video.requestPictureInPicture();
尤其容易出现在：
- 第三方播放器 SDK（如 video.js、hls.js 插件）自带 PiP 按钮
- 自定义控制栏中误加了 PiP 触发逻辑
- 自动播放后被脚本悄悄调用
它也不影响已打开的画中画窗口——刷新页面后，PiP 窗口依然存在。
如何真正阻止所有画中画行为
HTML 属性 + JS 监听缺一不可。关键是在 enterpictureinpicture 事件触发后立刻退出，且必须绑定到 <video></video> 元素本身（不是 document）：
const video = document.querySelector('video');
video.addEventListener('enterpictureinpicture', () => {
document.exitPictureInPicture().catch(() => {});
});
注意几点：
- 该退出操作需用户手势上下文才能成功；若不在合法上下文中（比如异步回调里），会抛
NotAllowedError，所以要用.catch(() => {})吞掉 - 不能依赖
leavepictureinpicture做拦截——它只是通知退出完成，不是拦截点 - 动态插入的
<video></video>（如通过innerHTML或框架v-html渲染），必须确保disablepictureinpicture属性随标签一起写入，JS 补上大概率失效
金融/敏感场景下 disablepictureinpicture 有什么用
几乎没用——它既不防录屏，也不防抓流、下载或调试器扒 URL。在金融类视频（合规培训、投研报告）中，disablepictureinpicture 唯一价值是减少用户误触 PiP 导致的体验干扰，但绝不等于内容安全。
真正需要的是：
- 服务端动态 Token 鉴权（每个请求带设备指纹+时效 JWT）
- HLS/DASH 分片加密（AES-128 或 CENC）
- DRM（Widevine/FairPlay）配合硬件输出保护
- 前端 Canvas 动态水印 + 后端不可移除水印
- 播放环境检测（如
document.hidden、调试工具痕迹）
把 disablepictureinpicture 当成防盗门锁芯，而忘了窗没关、墙是纸糊的——它只是整个防护链里最表层的一环，漏掉任意一环，内容就可能外泄。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
