HTML视频画中画（PiP）依赖浏览器原生PiP API，需在<video>标签添加allowpictureinpicture属性并配合controls、playsinline等；JavaScript通过requestPictureInPicture()主动触发，须在用户手势中同步调用；支持Chrome 70+、Edge 79+、Safari 14.1+，但Firefox移动端基本不支持。
HTML视频标签实现画中画（Picture-in-Picture，PiP）模式，核心是浏览器原生支持的 PiP API，不是靠 CSS 或自定义浮层模拟——它会真正弹出一个系统级悬浮窗口，独立于网页，可跨标签页甚至跨应用保持播放。
基础启用：HTML 层加属性
只需在 <video> 标签中添加 allowpictureinpicture 属性，浏览器就会自动在右键菜单或控制栏（如 Chrome）中提供“画中画”选项：
- 必须搭配
controls属性，否则用户无法通过界面触发（部分浏览器仍支持右键，但体验不一致） - 移动端尤其 iOS Safari，还需同时声明
playsinline和webkit-playsinline，否则视频会强制全屏，导致 PiP 调用直接失败 - 示例写法：
<video id="myVideo" controls playsinline webkit-playsinline allowpictureinpicture><br> <source src="video.mp4" type="video/mp4"><br></video>
主动触发：JavaScript 调用 requestPictureInPicture()
用户点击按钮等手势操作时，调用视频元素的 requestPictureInPicture() 方法即可进入 PiP 模式：
- 必须在用户手势事件（如
click、touchend）的同步回调中立即调用，不能包裹在setTimeout、Promise.then 或异步函数里，否则被浏览器拒绝 - 推荐使用
async/await处理 Promise，并捕获异常（如NotAllowedError表示触发条件不满足，NotFoundError表示视频未加载元数据） - 调用前建议检查
document.pictureInPictureElement === null，避免重复触发
状态监听与退出控制
PiP 进入和退出是可感知、可响应的：
立即学习“前端免费学习笔记（深入）”；
- 监听
enterpictureinpicture和leavepictureinpicture事件，用于更新 UI 状态（如切换按钮文字、暂停主页面其他逻辑） - 开发者可主动退出：调用
document.exitPictureInPicture()（需同源环境） - 退出后，原视频元素不会自动恢复播放，如需继续播放，应在
leavepictureinpicture回调中手动调用video.play()
兼容性与常见陷阱
不是所有浏览器都开箱即用：
- 支持：Chrome 70+、Edge 79+、Safari 14.1+（macOS/iOS），Firefox 桌面版需手动开启
media.videocontrols.picture-in-picture.enabled，移动端基本不支持 - 跨域视频必须服务端返回
Access-Control-Allow-Origin响应头，否则静默失败 - 视频必须已加载元数据（可监听
loadedmetadata事件后再绑定 PiP 按钮）且至少播放过一次（哪怕 1ms），否则 Safari 等可能拒绝 - 无法用 CSS 控制 PiP 小窗的尺寸、位置或样式——那是系统行为；
:picture-in-picture伪类只作用于原页面中处于 PiP 状态的<video>元素，可用于隐藏或灰化它
