video元素启用画中画需显式设置pictureInPictureEnabled="true"属性（HTML中声明），且requestPictureInPicture()必须在用户手势事件回调中同步调用，否则抛NotAllowedError；移动端Safari还要求视频已播放（readyState≥2）；API支持需运行时try/catch检测，不可仅依赖特性探测。
video 元素必须启用 pictureInPictureEnabled
默认情况下，<video></video> 元素的画中画（PiP）是禁用的，即使浏览器支持。必须显式设置 pictureInPictureEnabled="true" 属性，否则调用 requestPictureInPicture() 会直接抛出 NotAllowedError。
注意：该属性只控制「是否允许触发 PiP」，不保证用户一定会看到 PiP 按钮——浏览器 UI 是否显示按钮还取决于上下文（如是否静音、是否自动播放、是否用户手势触发）。
- 必须在 HTML 中写
<video controls pictureinpictureenabled="true"></video>，仅 JS 设置video.pictureInPictureEnabled = true不生效（部分浏览器忽略运行时赋值） - 若视频未设
controls，需手动绑定按钮并调用 JS API，但依然依赖该属性为true - 移动端 Safari（iOS/iPadOS）要求视频已播放过（即
readyState >= 2）且有用户手势上下文，否则拒绝进入 PiP
触发画中画必须由用户手势发起
所有主流浏览器都强制要求 requestPictureInPicture() 必须在用户事件回调中同步调用（如 click、touchend），不能在 setTimeout、Promise.then 或 autoplay 完成后自动触发，否则报错 NotAllowedError: Document not active or user gesture not detected。
常见错误场景包括：广告 SDK 在视频加载完成（loadeddata）后自动调 PiP、或通过轮询 document.visibilityState 切到前台时尝试唤起。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 安全做法：只在显式按钮
onclick或视频控件oncontextmenu（右键菜单）中调用video.requestPictureInPicture() - 不要监听
play事件后立刻调用——即使用户点了播放，play事件可能异步派发，失去手势上下文 - 若需“广告开始即 PiP”，可结合
play()+requestPictureInPicture()在同一个click回调里执行（前提是视频已加载）
广告场景下需处理 PiP 进出时的播放状态与样式
进入画中画后，原页面 <video></video> 仍存在，但视觉上被移出文档流；退出时它会回到原位置，但 DOM 结构和播放状态（currentTime、paused）保持不变。广告系统常在这里出问题：比如退出 PiP 后视频继续播但遮挡了后续广告位，或误判为“广告已结束”而提前加载下一条。
- 监听
enterpictureinpicture和leavepictureinpicture事件，用于暂停/恢复广告计时器、调整容器 visibility、上报曝光数据 - PiP 窗口本身无法通过 CSS 控制大小或位置（由系统管理），但可监听
resize事件判断窗口尺寸变化（如 iPad 分屏时 PiP 可能缩放） - 某些广告联盟禁止 PiP 下播放广告（尤其带跳转的富媒体广告），需在进入 PiP 前检查
document.pictureInPictureElement === video并按策略暂停或替换内容
兼容性与降级方案要覆盖 Safari 和 Android WebView
pictureInPictureEnabled 和 requestPictureInPicture() 在 Chrome 70+、Edge 79+、Safari 14.1+ 支持良好，但 Android WebView（尤其旧版）和 iOS WKWebView 存在差异：部分版本支持 API 但实际调用失败，或仅支持全屏而非 PiP。
不能只靠 'requestPictureInPicture' in HTMLVideoElement.prototype 判断可用性——得真调一次并捕获异常。
- 检测逻辑应为：
if (video.requestPictureInPicture && typeof video.requestPictureInPicture === 'function') { ... }，再加 try/catch - 降级建议：PiP 不可用时，自动 fallback 到
video.webkitEnterFullscreen()（iOS）或video.requestFullscreen()（Android），并更新 UI 提示“点击全屏观看广告” - 特别注意：微信内置浏览器（X5 内核）完全不支持 PiP，且不抛错，
requestPictureInPicture()静默失败，必须用document.pictureInPictureElement的变化来间接判断是否成功
实际部署时，最易被忽略的是「广告素材加载时机」与「用户手势生命周期」的耦合——PiP 不是纯前端开关，它卡在浏览器安全模型里，任何脱离用户操作链路的自动行为都会被拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
