video元素默认不显示画中画按钮，需显式设置controls属性并配置playsinline等兼容性属性，且必须在用户手势上下文中调用requestpictureinpicture()，同时确保视频已播放、未静音、源支持range请求。
video 元素默认不显示画中画按钮，必须显式启用
浏览器不会自动给 <video></video> 加画中画（PiP）按钮，哪怕用户右键菜单里有“画中画”，网页上也不会出现对应 UI。必须手动设置 controls 属性，并且添加 webkit-playsinline（iOS Safari 必需）和 playsinline（部分安卓浏览器需要），同时确保视频源支持播放——否则按钮即使渲染出来也点击无效。
-
controls是前提：没它，所有内置按钮（包括 PiP）都不显示 - iOS Safari 要求
webkit-playsinline+playsinline，否则会全屏跳转，PiP 按钮不可用 - 某些安卓 WebView（如微信内置）需额外配置
android:usesCleartextTraffic="true"（仅限 HTTP 视频源） - 自托管视频需支持
Range请求头，否则 Chrome 可能禁用 PiP 按钮（报错Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': The video element has no source）
手动触发 requestPictureInPicture() 时常见报错及修复
调用 video.requestPictureInPicture() 失败，多数不是代码写错，而是被浏览器策略拦截。最典型的是：不在用户手势上下文中调用、视频未播放、或处于静音状态（尤其 iOS）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须在
click、touchend等用户主动触发的事件回调里调用，不能在setTimeout或loadedmetadata里直接调 - Chrome 要求视频至少已
play()过一次（哪怕只播 1ms），且未被pause()后长时间闲置 - iOS Safari 强制要求视频已解除静音（
video.muted = false且video.volume > 0），否则抛NotAllowedError - 若视频是
autoplay但被浏览器阻止，requestPictureInPicture()会静默失败，建议改用用户点击后play()+requestPictureInPicture()串联调用
监听画中画进入/退出状态要用 document.pictureInPictureElement
没有专用事件监听 PiP 开关，只能轮询或监听 enterpictureinpicture/leavepictureinpicture 事件（仅 Chrome/Edge 支持），更通用的方式是检查 document.pictureInPictureElement 是否等于当前 video 元素。
-
video.addEventListener('enterpictureinpicture', () => { ... })和video.addEventListener('leavepictureinpicture', () => { ... })在 Firefox 不触发，在 Safari 完全不支持 - 可靠做法：用
setInterval每 200ms 检查document.pictureInPictureElement === video，配合visibilitychange事件清理定时器 - 退出 PiP 后，视频元素不会自动
pause()，需手动处理暂停逻辑（比如在检测到document.pictureInPictureElement !== video时调用video.pause()）
CSS 控制画中画窗口尺寸与位置效果有限
一旦进入画中画模式，页面 CSS 对 PiP 窗口本身完全失效。你能控制的只有：视频源是否带字幕轨道、是否启用 poster 图、以及退出 PiP 后页面内视频元素的样式。PiP 窗口大小由系统决定（通常最小 200×150px），拖拽位置也无法通过 JS 干预。
-
video::-webkit-media-controls-picture-in-picture-button可隐藏原生按钮（但需配合appearance: none和display: none） - 想自定义 PiP 入口按钮？用普通
<button></button>绑定click事件调requestPictureInPicture()即可，样式完全自由 - PiP 窗口关闭后，
video元素不会重置currentTime，但可能因系统资源回收导致短暂卡顿，建议监听leavepictureinpicture后做video.load()或video.play()恢复
muted 和 playsinline 组合，以及误以为 PiP 按钮是默认开启的。真正在意体验的话，得把“用户点了按钮但 PiP 没弹出”当成常态来处理——加 fallback 提示，而不是只写成功路径。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
