视频视口粘性需用IntersectionObserver结合intersectionRatio阈值（≥0.3进PIP、
要让视频在滚动时具备“视口粘性”感知（即：进入视口后自动启用画中画，离开视口时自动退出），关键不是简单触发播放/暂停，而是结合 IntersectionObserver 的交叉状态与 document.pictureInPictureElement 状态做双向同步控制。它比普通懒加载更进一步——不仅响应可见性，还响应“是否应以小窗形式持续存在”。
核心逻辑：用 intersectionRatio 判断“是否值得固定”
单纯靠 isIntersecting 开关画中画容易误判：比如视频只露出 5%（如顶部刚进屏），此时强推画中画会突兀；而完全移出（intersectionRatio === 0）才退出，又可能错过用户已切走的时机。更合理的是设定一个“粘性阈值”：
- ≥ 0.3：认为用户有意观看，可尝试进入画中画（若支持且未在画中画中）
- ：明确离开可视区域，主动调用
document.exitPictureInPicture() - 0.1 ~ 0.3 之间：保持当前状态，不干预（避免抖动）
HTML 结构需预留控制能力
视频元素必须是原生 <video></video>（iframe 不支持直接调用画中画 API），且需启用对应权限：
- 添加
allow="picture-in-picture"属性（对 iframe 也有效，但仅限支持 PIP 的嵌入平台，如 YouTube） - 原生 video 标签建议设
controls和playsinline，兼顾移动端兼容 - 禁用
autoplay，由 JS 主动控制，避免策略拦截
<video class="pip-video" width="640" height="360" playsinline controls> <source src="demo.mp4" type="video/mp4"> </video>
JavaScript 实现要点
观察器回调中需区分三种状态，并处理浏览器兼容性：
- 检查
navigator.mediaSession和document.pictureInPictureElement是否可用 - 进入高可见区间时，先
video.play()，再video.requestPictureInPicture()（注意 Promise 捕获拒绝） - 退出低可见区间时，仅当
document.pictureInPictureElement === video才调用exitPictureInPicture() - 监听
leavepictureinpicture事件，防止用户手动退出后状态不同步
防抖与降级策略不可少
画中画操作本身有浏览器策略限制（如需用户手势触发、部分安卓 WebView 不支持），因此：
- 首次进入高可见区时，可加一个
setTimeout延迟 300ms 再尝试 PIP，避开滚动惯性干扰 - 若
requestPictureInPicture()抛错（如NotAllowedError），记录日志并降级为静音自动播放 + 弹层提示“点击开启画中画” - 对不支持 PIP 的旧浏览器（如 Safari
