playsinline是ios safari等浏览器中控制视频内联播放的布尔属性，不提供画中画功能；它与pip存在兼容性冲突，ios上需动态移除playsinline和webkit-playsinline后才能调用requestpictureinpicture()。
playsinline 是什么，它和画中画（PiP）冲突吗？
playsinline 是 iOS Safari 和部分 Android WebView 中控制视频是否「内联播放」的布尔属性。加了它，<video></video> 就不会自动全屏（比如点击播放时弹出原生全屏控件），而是留在页面内渲染——这是实现「网页内视频交互」的前提。
但要注意：playsinline 本身**不提供画中画功能**，它只是让视频「能留在页面里」；而画中画（Picture-in-Picture）是另一套独立能力，需要用户主动触发（如点击 PiP 按钮）或通过 JS 调用 requestPictureInPicture() 启动。两者目标不同，也存在兼容性冲突：iOS 上开启 playsinline 后，requestPictureInPicture() 会直接失败并抛出 NotSupportedError。
iOS 上怎么同时支持内联播放 + 画中画？
根本矛盾在于：iOS Safari 不允许同一个 <video></video> 元素既启用 playsinline 又调用 PiP API。解决方案是「动态切换」——初始加载时启用 playsinline 保证内联播放，等用户明确想进 PiP 时，临时移除该属性再调用 API。
- 必须用
webkit-playsinline（iOS 10+）和playsinline（iOS 12+）双写，仅写一个可能失效 - 调用
requestPictureInPicture()前，先执行video.removeAttribute('playsinline')和video.removeAttribute('webkit-playsinline') - PiP 退出后，如果还想继续内联播放，需手动重新 setAttribute 并重载（
load()或重置src） - 监听
leavepictureinpicture事件来恢复内联状态，否则视频会卡在 PiP 退出后的空白状态
Android 和桌面 Chrome 怎么处理？
Chrome（Android & Desktop）对 playsinline 支持较宽松，且 PiP API 稳定可用，但仍有细节差异：
- Android Chrome 需要
playsinline+muted（或用户已与页面交互过）才能自动播放，否则静音是硬性要求 - 桌面 Chrome 的 PiP 默认只对
video元素生效，且要求controls属性存在或用户已点击过播放按钮（防止滥用） - 调用
requestPictureInPicture()前无需移除playsinline，但若视频处于暂停状态，需先play()（否则报InvalidStateError） - 注意 PiP 窗口尺寸不可控，
width/height样式无效，只能靠object-fit控制内容裁剪
如何判断当前环境是否支持 PiP？
不能只靠 UA 判断，得实测 API 存在性和可用性：
- 检查
'pictureInPictureElement' in document（表示 PiP 已激活） - 检查
'requestPictureInPicture' in HTMLVideoElement.prototype（表示 API 可用） - 尝试调用
video.requestPictureInPicture()并捕获 Promise rejection，常见错误：NotSupportedError（iOS 冲突）、InvalidStateError（未播放/未就绪）、SecurityError（未用户手势触发） - 特别注意：Safari 16.4+ 才支持
enterpictureinpicture和leavepictureinpicture事件，旧版只能靠轮询document.pictureInPictureElement
实际部署时，PiP 的入口按钮最好默认隐藏，仅在检测到可用 API 且视频已就绪后才显示。iOS 用户看到的 PiP 按钮，背后其实是「先退出内联、再进 PiP」的两步操作——这点容易被忽略，导致点击无响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
