disablepictureinpicture 属性必须全小写直接写在 标签中才生效，如 ；它仅隐藏 UI 入口，不阻止 JS 调用 requestPictureInPicture()，需配合事件监听与 exitPictureInPicture() 拦截，并注意 iOS Safari 等兼容性问题及内容安全须依赖后端防护。
disablePictureInPicture 属性怎么写才生效
必须作为布尔属性直接写在 <video></video> 标签里，不赋值、不加引号、不驼峰——正确写法是 disablepictureinpicture（全小写），浏览器会自动识别。写成 disablePictureInPicture="true" 或 disablepictureinpicture="false" 都无效，后者甚至会让属性“意外启用”（因为只要存在就禁用）。
常见错误写法包括：
-
disablePictureInPicture（驼峰命名 → Safari 16.4+ 支持，但 Chrome/Edge 要求全小写） -
video.disablePictureInPicture = true（JS 赋值不生效，该属性只读） -
style="disablepictureinpicture: true"（不是 CSS 属性，完全无效）
推荐统一用：<video controls disablepictureinpicture src="demo.mp4"></video>
为什么加了 disablepictureinpicture 还能进画中画
这个属性只屏蔽 UI 入口，不拦截 JavaScript 主动调用。用户仍可通过 video.requestPictureInPicture() 进入画中画，尤其当页面有自定义按钮或第三方播放器 SDK 时极易触发。
彻底禁用需配合 JS 监听与退出：
- 监听
enterpictureinpicture事件，立即调用document.exitPictureInPicture() - 注意：该退出操作需用户手势上下文才能成功，否则
catch掉NotAllowedError - 不要依赖
leavepictureinpicture做防御，它只是通知退出完成，不是拦截点
示例代码：
const video = document.querySelector('video');
video.addEventListener('enterpictureinpicture', () => {
document.exitPictureInPicture().catch(() => {});
});
移动端和 Safari 的兼容性陷阱
Chrome 71+、Edge 79+、Firefox 111+ 和 Safari 16.4+ 支持 disablepictureinpicture，但行为不一致：
- iOS Safari（即使 16.4+）可能忽略该属性，尤其在
playsinline缺失时，视频默认全屏，PiP 控制项压根不出现，导致属性“形同虚设” - Android Chrome 中，若视频跨域且服务端未返回
Access-Control-Allow-Origin，requestPictureInPicture()会静默失败，但disablepictureinpicture仍有效 - 旧版浏览器（如 Firefox
稳妥做法是组合使用：controlsList="nodownload noremoteplayback disablepictureinpicture"，并检查 video.requestPictureInPicture 是否存在来判断是否支持 PiP。
金融/教育类场景下，光靠 disablepictureinpicture 不够
它只隐藏右键菜单和控制栏按钮，对录屏、抓包、m3u8 下载、Canvas 截帧完全无效。真实内容防护必须靠后端手段：
- 动态 Token 鉴权（每个分片 URL 带时效 JWT）
- HLS AES-128 加密或 DRM（Widevine/FairPlay）
- 前端 Canvas 动态水印 + 后端硬编码水印
- 环境检测（
navigator.permissions.query({name:'camera'})、document.hidden、调试工具痕迹）
把 disablepictureinpicture 当作 UI 层“防误触”开关即可，别把它当成安全边界。真正敏感的内容，浏览器里没有银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
