HTML5视频画中画需满足：已加载元数据、用户手势触发、有有效src或MediaSource、HTTPS/localhost环境且浏览器支持；调用requestPictureInPicture()进入，exitPictureInPicture()退出，支持enter/leave事件监听。
HTML5 视频的画中画（Picture-in-Picture，PiP）模式可通过 requestPictureInPicture() 方法触发，但需满足明确的用户交互前提和环境限制。
启用 PiP 的基本条件
不是所有视频都能直接调用 PiP，必须同时满足：
- 视频元素已加载元数据（
loadedmetadata或canplay事件后） - 调用必须由用户手势（如
click、tap）触发，不能在异步回调（如setTimeout、fetch后）中直接调用 - 视频需有
src或通过MediaSource正确附加媒体流 - 浏览器支持且未被策略禁用（如 Chrome 要求页面为 HTTPS 或 localhost，且用户未手动关闭 PiP 权限）
标准调用方式（推荐）
在用户点击按钮时安全调用：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
const video = document.querySelector('#myVideo');
<p>// 确保已可播放
video.addEventListener('canplay', () => {
const pipBtn = document.querySelector('#pipBtn');
pipBtn.addEventListener('click', async () => {
try {
await video.requestPictureInPicture();
console.log('已进入画中画模式');
} catch (err) {
console.warn('无法启用画中画：', err.name || err.message);
// 常见错误：NotAllowedError（非用户手势）、NotSupportedError（不支持）、SecurityError（跨域或策略限制）
}
});
});监听 PiP 状态变化
可通过 enterpictureinpicture 和 leavepictureinpicture 事件响应状态切换：
立即学习“前端免费学习笔记（深入）”；
video.addEventListener('enterpictureinpicture', () => { /* 进入 PiP */ })video.addEventListener('leavepictureinpicture', () => { /* 退出 PiP，可恢复 UI 或暂停逻辑 */ })- 注意：退出 PiP 后，视频仍保持播放状态，需自行控制是否暂停
退出画中画（主动关闭）
调用 document.exitPictureInPicture() 可退出当前 PiP 窗口（需在同源页面上下文中）：
- 该方法返回 Promise，成功时 resolve，无 PiP 窗口时会 reject
NotFoundError - 也可监听
pictureinpicturewindow的resize或focus事件做自定义交互 - 移动端（如 iOS Safari）暂不支持 API 控制 PiP，仅支持系统级手势唤起/关闭
