JavaScript控制画中画模式需调用videoElement.requestPictureInPicture()启用、document.exitPictureInPicture()退出，配合enterpictureinpicture/leavepictureinpicture事件监听状态，且须用户手势触发、视频已加载元数据，同时检测API兼容性并做降级处理。
JavaScript中控制Picture-in-Picture（画中画）模式，核心是通过HTMLVideoElement的requestPictureInPicture()和exitPictureInPicture()方法，配合pictureinpicturechange与enterpictureinpicture、leavepictureinpicture事件实现状态监听与响应。
启用画中画模式
调用videoElement.requestPictureInPicture()可请求进入画中画。该方法返回一个Promise，成功时进入画中画，失败时拒绝（例如用户未交互触发、视频未加载、或浏览器不支持）。
- 必须由用户手势（如click、touchend）触发，否则会被浏览器阻止
- 视频需已加载元数据（
readyState >= HTMLMediaElement.HAVE_METADATA），建议监听loadedmetadata后再绑定按钮事件 - 部分浏览器（如Safari）要求
playsinline属性存在且视频处于播放状态
退出画中画模式
调用document.exitPictureInPicture()可主动退出画中画。注意该方法作用于整个文档，而非某个特定视频元素。
- 退出成功后会触发
document上的leavepictureinpicture事件 - 若当前未处于画中画状态，调用不会报错，但Promise会以
undefinedresolve - 可在UI按钮中统一管理：进入时显示“退出画中画”，退出时恢复为“开启画中画”
监听画中画状态变化
推荐使用videoElement.addEventListener('enterpictureinpicture', ...)和videoElement.addEventListener('leavepictureinpicture', ...)，语义清晰且与对应元素绑定紧密。
立即学习“Java免费学习笔记（深入）”；
-
enterpictureinpicture在成功进入后触发，此时document.pictureInPictureElement === videoElement -
leavepictureinpicture在退出后触发，可用于重置UI或恢复播放行为 - 也可监听
videoElement.onpictureinpicturechange，但需手动判断document.pictureInPictureElement是否为当前元素
兼容性与降级处理
画中画目前在Chrome、Edge、Firefox（桌面）、Safari（macOS/iOS 16.4+）中支持，移动端支持有限。使用前应检测API可用性：
if ('pictureInPictureElement' in document && 'requestPictureInPicture' in HTMLVideoElement.prototype) { /* 支持 */ }
- 不支持时隐藏或禁用相关按钮，避免误操作
- 可结合
videoElement.disablePictureInPicture = true禁用右键菜单中的画中画选项 - 注意iOS Safari需额外设置
webkit-playsinline和playsinline属性，并确保视频已播放（自动播放受限）
