disablePictureInPicture 是 HTML5 video 标签的布尔属性，用于禁用浏览器 UI 中的画中画入口；它不阻止 JavaScript 调用 requestPictureInPicture()，需配合 enterpictureinpicture 事件监听与 exitPictureInPicture() 实现完全禁用。
在 HTML5 的 标签中，disablePictureInPicture 是一个布尔属性，用于禁止用户通过浏览器 UI（如右键菜单或地址栏按钮）进入画中画（Picture-in-Picture, PiP）模式。
如何启用 disablePictureInPicture 属性
只需在 元素上添加 disablepictureinpicture 属性（不区分大小写，但推荐小写），浏览器便会禁用该视频的画中画入口：
注意：这个属性是“被动禁用”，即它只隐藏画中画触发控件（如右键菜单中的“画中画”选项、视频播放器右下角的 PiP 按钮等），**不会影响已通过 JavaScript 主动调用 requestPictureInPicture() 启动的画中画窗口**（除非同时配合 JS 拦截）。
与 JavaScript 配合实现完全禁用
仅靠 HTML 属性无法阻止脚本调用画中画。若需彻底禁用（包括 JS 触发），建议监听 enterpictureinpicture 事件并立即退出：
- 为
添加disablepictureinpicture属性 - 在 JS 中监听
enterpictureinpicture并调用document.exitPictureInPicture() - 可选：监听
leavepictureinpicture做清理，或屏蔽requestPictureInPicture()调用
示例：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const video = document.querySelector('video');
video.addEventListener('enterpictureinpicture', () => {
document.exitPictureInPicture().catch(() => {});
});
浏览器兼容性注意事项
disablepictureinpicture 属性目前在 Chrome 71+、Edge 79+、Safari 16.4+ 和 Firefox 111+ 中支持。旧版浏览器会忽略该属性，但不会报错。
若需兼容更老环境，可结合以下方式增强控制：
- 移除
controls属性，自定义控件时不提供 PiP 按钮 - 对
video元素设置oncontextmenu="return false;"（仅限禁用右键菜单，非根本方案） - 检测
document.pictureInPictureElement并主动干预
常见误区提醒
这个属性不是 CSS 样式，不能通过 style 或类名控制；也不是 JS 属性（如 video.disablePictureInPicture = true 不生效），必须作为 HTML 属性存在或用 video.setAttribute('disablepictureinpicture', '') 动态添加。
另外，禁用画中画不影响全屏（webkitRequestFullScreen 等）或音频后台播放能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
