disablepictureinpicture属性仅隐藏ui入口，不阻止javascript触发画中画；需结合enterpictureinpicture事件监听与document.exitpictureinpicture()主动退出，并配合服务端鉴权、hls加密、canvas水印等多重防护。
加了 disablePictureInPicture 属性，画中画按钮确实消失了，但用户点一下自定义按钮或刷新页面后仍能进 PiP——这不是你代码写错了，而是这个属性本来就不负责“拦截”，只负责“藏按钮”。
正确写法：HTML 属性必须全小写、不赋值、不引号
浏览器对拼写敏感，尤其 Safari 和旧版 Chrome 会忽略驼峰写法。以下写法才可靠：
-
<video controls disablepictureinpicture src="demo.mp4"></video>✅（推荐） -
<video controls disablepictureinpicture src="demo.mp4"></video>⚠️（Safari 16.4+ 支持，Chrome/Edge 不稳定） -
<video controls disablepictureinpicture="true"></video>❌（带值即失效） -
video.setAttribute('disablepictureinpicture', '')✅（动态添加可行） -
video.disablePictureInPicture = true❌（JS 赋值无效，该属性只读）
为什么按钮没了，还能进画中画？
因为 disablepictureinpicture 只影响浏览器 UI 入口（右键菜单、控制栏 PiP 按钮、地址栏浮层），它不阻止任何 JavaScript 行为。只要页面里有类似下面的代码，用户依然能触发：
- 第三方播放器 SDK 自动调用
video.requestPictureInPicture() - 你写的“一键 PiP”按钮：
btn.addEventListener('click', () => video.requestPictureInPicture()) - 误配的自动逻辑，比如在
play事件里没加判断就调用 PiP
真正禁用：属性 + 事件监听双保险
仅靠 HTML 属性不够，必须监听进入事件并立刻退出。关键点：
- 监听对象是
<video></video>元素本身，不是document - 用
enterpictureinpicture事件，不是leavepictureinpicture（后者只是通知已退出） -
document.exitPictureInPicture()需用户手势上下文，失败时需.catch(() => {})吞掉NotFoundError或NotAllowedError
示例代码：
const video = document.querySelector('video');video.addEventListener('enterpictureinpicture', () => {
document.exitPictureInPicture().catch(() => {});
});
金融/敏感场景下别只靠这个属性
它既不能防录屏，也不能防抓包下载 m3u8 或 ts 片段，更不提供任何权限校验。真实防护要靠：
- 服务端动态 Token 鉴权（每个视频请求带签名+时效）
- HLS 分片 AES-128 加密 + DRM（如 FairPlay / Widevine）
- 前端 Canvas 动态水印（含用户 ID、时间戳）
- 环境检测（调试工具、页面失焦、多屏复制等异常行为）
- 配合
controlslist="nodownload noremoteplayback"隐藏下载和投屏按钮
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
