video元素需同时声明playsinline和webkit-playsinline属性，否则iOS Safari等强制全屏且requestPictureInPicture()失败；调用该API必须在用户手势事件中同步执行，并确保已加载元数据；Chrome 116+支持自定义画中画DOM，需adoptNode并用postMessage通信；退出PiP后须监听pictureinpicturechange手动恢复播放并校准状态。
video 元素必须显式声明 playsinline 和 webkit-playsinline
不加这两个属性，iOS Safari 和部分 Android WebView 会强制全屏播放，requestPictureInPicture() 直接抛错或静默失败。错误现象通常是点击按钮没反应，控制台也无报错，但 document.pictureInPictureElement 始终为 null。
正确写法示例：
<video id="myVideo" controls playsinline webkit-playsinline> <source src="1.mp4" type="video/mp4"> </video>
-
playsinline是标准属性，Chrome / Edge / 新版 Safari 都认 -
webkit-playsinline是 iOS Safari 必需的兼容补丁，缺一不可 - 即使页面只在桌面端运行，也建议统一加上——避免未来跨端时踩坑
调用 requestPictureInPicture() 前必须满足用户手势触发条件
浏览器策略强制要求：该 API 只能在用户直接交互（如 click、touchend）的事件处理函数中同步调用。异步延迟（比如 setTimeout）、Promise 回调、input 事件里调用都会被拒绝，并抛出 NotAllowedError。
常见错误写法：
立即学习“前端免费学习笔记（深入）”；
button.addEventListener('click', () => {
setTimeout(() => video.requestPictureInPicture(), 0); // ❌ 拒绝
});
正确做法是立即调用，且确保 video 已加载元数据：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
loadedmetadata后再绑定按钮事件 - 按钮点击回调内直接调用
video.requestPictureInPicture() - 捕获并处理可能的异常：
catch(e => console.warn('PiP failed:', e.name))
小窗内容不止能放 <video>：用 documentPictureInPicture API 自定义小窗 DOM
Chrome 116+ 支持把任意 HTML 内容（不只是 <video>）塞进画中画窗口，靠的是 document.pictureInPictureWindow 和 documentPictureInPicture 对象。这意味着你可以放进度条、弹幕层、自定义按钮，甚至整个轻量级播放器 UI。
关键点：
- 必须先调用
document.adoptNode()把节点从主文档移入小窗文档上下文 - 小窗与主页面共享 JS 执行环境，但 DOM 是隔离的——不能直接操作主页面元素
- 通信靠
postMessage+message事件，主页面监听document.pictureInPictureWindow的message - 小窗关闭时会触发
pictureinpicturechange事件，可用来清理状态
退出画中画后，video 播放状态容易丢失
用户手动关闭 PiP 小窗或切回主页面时，video 不一定会自动恢复播放，尤其当它原本处于暂停态、或因网络卡顿未就绪。更隐蔽的问题是：PiP 窗口关闭后，video.currentTime 可能滞后于实际播放位置（因小窗内时间独立演进）。
稳妥做法是在 pictureinpicturechange 事件中主动同步：
video.addEventListener('pictureinpicturechange', () => {
if (!document.pictureInPictureElement) {
// 退出 PiP，手动恢复播放逻辑
if (video.paused && !video.ended) video.play().catch(() => {});
}
});
真正难处理的是音视频不同步风险——小窗关闭瞬间若正在 seek 或缓冲，主页面 video 的 currentTime 和 paused 状态需要结合 canplay、timeupdate 二次校准，这点常被忽略。
