disablepictureinpicture 是 html5 video 标签的布尔属性，用于禁用浏览器 ui 中的画中画入口；它不阻止 javascript 调用 requestpictureinpicture()，需配合 enterpictureinpicture 事件监听与 exitpictureinpicture() 实现完全禁用。
在 HTML5 的 <video></video> 标签中，disablePictureInPicture 是一个布尔属性，用于禁止用户通过浏览器 UI（如右键菜单或地址栏按钮）进入画中画（Picture-in-Picture, PiP）模式。
如何启用 disablePictureInPicture 属性
只需在 <video></video> 元素上添加 disablepictureinpicture 属性（不区分大小写，但推荐小写），浏览器便会禁用该视频的画中画入口：
注意：这个属性是“被动禁用”，即它只隐藏画中画触发控件（如右键菜单中的“画中画”选项、视频播放器右下角的 PiP 按钮等），**不会影响已通过 JavaScript 主动调用 requestPictureInPicture() 启动的画中画窗口**（除非同时配合 JS 拦截）。
与 JavaScript 配合实现完全禁用
仅靠 HTML 属性无法阻止脚本调用画中画。若需彻底禁用（包括 JS 触发），建议监听 enterpictureinpicture 事件并立即退出：
- 为
<video></video>添加disablepictureinpicture属性 - 在 JS 中监听
enterpictureinpicture并调用document.exitPictureInPicture() - 可选：监听
leavepictureinpicture做清理，或屏蔽requestPictureInPicture()调用
示例：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
