Document Picture-in-Picture仅支持Chromium系浏览器（Chrome 113+等），且必须由用户手势触发video.requestPictureInPicture()，视频需有有效src、处于安全环境、已播放；状态监听须用document.addEventListener('enterpictureinpicture')和'leavepictureinpicture'，退出应调用document.exitPictureInPicture()。
Document Picture-in-Picture（PiP）目前仅在 Chromium 系统（Chrome 113+、Edge 113+、Opera 99+）中受支持，且必须满足严格条件才能调用和；它不能用于任意 DOM 元素，仅限于或元素，并且该媒体元素必须已播放过（即触发过事件或用户手势后自动播放成功）。
如何正确触发进入 PiP 模式
调用
是唯一入口，但失败非常常见。关键不是“有没有写这行代码”，而是前置状态是否达标：
视频必须有
或通过
设置了有效媒体源（空
或 404 资源会静默失败）
页面上下文需为“安全环境”（
或
），
非本地域名直接拒绝
调用必须由用户手势（如
、
）直接触发，不能包裹在
或 Promise 回调里
若视频设置了
且无音轨，部分版本 Chrome 要求显式设置
属性
示例正确写法：
如何监听 PiP 状态变化
不能依赖
这类事件——它根本不存在。PiP 状态只能通过全局
上的两个事件捕获：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
：触发后
即为当前 PiP 元素（通常是
）
：触发后
变为
注意：这两个事件不冒泡，且只在
上监听才有效。不要绑定到 video 元素本身。
退出 PiP 的三种方式及兼容性差异
用户可点击 PiP 窗口右上角 × 关闭，也可由脚本控制退出。但退出方式影响行为一致性：
调用
：最可靠，返回 Promise，可 await 确认退出完成
调用
：Chrome 117+ 支持，旧版不识别，不推荐
直接移除 video 元素或设
：会强制退出 PiP，但可能触发异常或残留 UI，应避免
退出前建议检查状态，防止重复调用报错：
PiP 窗口本身不可自定义样式或添加控件，它是浏览器原生浮层；想实现“类 PiP 效果”（如可拖拽、带按钮的浮动面板），得用 CSS + JS 手动模拟，别试图 hack
——它只读且无子节点访问权限。
document.pictureInPictureElementdocument.exitPictureInPicture()playvideoElement.requestPictureInPicture()srcMediaStreamsrchttps://localhosthttp://clickkeydownsetTimeoutmutedplaysinlineconst video = document.querySelector('video');
button.addEventListener('click', async () => {
try {
await video.requestPictureInPicture();
} catch (err) {
console.error('PiP enter failed:', err.name); // 常见：NotAllowedError、SecurityError
}
});videoElement.onenterpictureinpicturedocumententerpictureinpicturedocument.pictureInPictureElementleavepictureinpicturedocument.pictureInPictureElementnulldocumentdocument.addEventListener('enterpictureinpicture', () => {
console.log('Now in PiP:', document.pictureInPictureElement);
});
document.addEventListener('leavepictureinpicture', () => {
console.log('Left PiP');
});document.exitPictureInPicture()videoElement.exitPictureInPicture()src = ""if (document.pictureInPictureElement) {
await document.exitPictureInPicture();
}pictureInPictureElement