HTML5 Picture-in-Picture API支持点击切换画中画模式，需在用户手势下调用requestPictureInPicture()或exitPictureInPicture()，仅适用于已就绪的video元素，且需兼容各浏览器特性与降级处理。
HTML5 的 Picture-in-Picture（画中画）API 允许用户将视频以浮动窗口形式悬浮在其他页面或应用之上，提升多任务体验。实现“点击切换”画中画模式，核心是监听用户操作、判断当前状态，并调用 videoElement.requestPictureInPicture() 或 document.exitPictureInPicture()。
确保浏览器支持与基础准备
画中画 API 目前在 Chrome、Edge、Safari（macOS/iOS 14.3+）、Firefox（需启用 media.videocontrols.picture-in-picture.enabled）中支持。需注意：
- 必须在用户手势（如 click、tap）触发下调用
requestPictureInPicture()，不能在异步回调（如 setTimeout、fetch.then）中直接调用 - 仅适用于
<video></video>元素，且该元素需有src或已加载有效媒体（readyState >= 2） - 移动端 Safari 要求视频带有
playsinline属性，否则无法进入画中画
添加点击切换按钮并绑定逻辑
在 HTML 中为视频添加一个控制按钮（可复用同一按钮），通过 JS 判断当前是否处于画中画状态：
<video id="myVideo" controls playsinline> <source src="example.mp4" type="video/mp4"> </video> <button id="pipBtn">进入画中画</button>
JS 部分示例：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const video = document.getElementById('myVideo');
const pipBtn = document.getElementById('pipBtn');
pipBtn.addEventListener('click', async () => {
if (document.pictureInPictureElement === video) {
// 当前已在画中画，退出
try {
await document.exitPictureInPicture();
pipBtn.textContent = '进入画中画';
} catch (err) {
console.warn('退出画中画失败:', err);
}
} else {
// 尝试进入画中画
try {
await video.requestPictureInPicture();
pipBtn.textContent = '退出画中画';
} catch (err) {
console.warn('进入画中画失败:', err);
// 常见原因：未用户手势触发、视频未就绪、不支持等
if (err.name === 'NotAllowedError') {
alert('请先播放视频，再点击切换');
}
}
}
});
监听画中画状态变化（可选但推荐）
使用 enterpictureinpicture 和 leavepictureinpicture 事件，可同步 UI 状态或执行副作用（如暂停主页面其他视频）：
video.addEventListener('enterpictureinpicture', () => {
pipBtn.textContent = '退出画中画';
});
video.addEventListener('leavepictureinpicture', () => {
pipBtn.textContent = '进入画中画';
});
注意：这两个事件不会在调用失败时触发，仅在成功进入/退出后触发。
处理兼容性与降级提示
可通过 'pictureInPictureEnabled' in document 判断浏览器是否支持画中画：
if (!('pictureInPictureEnabled' in document)) {
pipBtn.disabled = true;
pipBtn.textContent = '当前浏览器不支持画中画';
}
对不支持的环境，可隐藏按钮或替换为其他功能（如最小化到侧边栏的模拟方案）。
