JavaScript控制画中画模式需调用videoElement.requestPictureInPicture()启用、document.exitPictureInPicture()退出，配合enterpictureinpicture/leavepictureinpicture事件监听状态，且须用户手势触发、视频已加载元数据，同时检测API兼容性并做降级处理。
JavaScript中控制Picture-in-Picture（画中画）模式，核心是通过
的
和
方法，配合
与
、
事件实现状态监听与响应。
启用画中画模式
调用
可请求进入画中画。该方法返回一个Promise，成功时进入画中画，失败时拒绝（例如用户未交互触发、视频未加载、或浏览器不支持）。
必须由用户手势（如click、touchend）触发，否则会被浏览器阻止
视频需已加载元数据（
），建议监听
后再绑定按钮事件
部分浏览器（如Safari）要求
属性存在且视频处于播放状态
退出画中画模式
调用
可主动退出画中画。注意该方法作用于整个文档，而非某个特定视频元素。
退出成功后会触发
上的
事件
若当前未处于画中画状态，调用不会报错，但Promise会以
resolve
可在UI按钮中统一管理：进入时显示“退出画中画”，退出时恢复为“开启画中画”
监听画中画状态变化
推荐使用
和
，语义清晰且与对应元素绑定紧密。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
Java免费学习笔记（深入）
”；
在成功进入后触发，此时
在退出后触发，可用于重置UI或恢复播放行为
也可监听
，但需手动判断
是否为当前元素
兼容性与降级处理
画中画目前在Chrome、Edge、Firefox（桌面）、Safari（macOS/iOS 16.4+）中支持，移动端支持有限。使用前应检测API可用性：
不支持时隐藏或禁用相关按钮，避免误操作
可结合
禁用右键菜单中的画中画选项
注意iOS Safari需额外设置
和
属性，并确保视频已播放（自动播放受限）
HTMLVideoElementrequestPictureInPicture()exitPictureInPicture()pictureinpicturechangeenterpictureinpictureleavepictureinpicturevideoElement.requestPictureInPicture()readyState >= HTMLMediaElement.HAVE_METADATAloadedmetadataplaysinlinedocument.exitPictureInPicture()documentleavepictureinpictureundefinedvideoElement.addEventListener('enterpictureinpicture', ...)videoElement.addEventListener('leavepictureinpicture', ...)enterpictureinpicturedocument.pictureInPictureElement === videoElementleavepictureinpicturevideoElement.onpictureinpicturechangedocument.pictureInPictureElementif ('pictureInPictureElement' in document && 'requestPictureInPicture' in HTMLVideoElement.prototype) { /* 支持 */ }videoElement.disablePictureInPicture = truewebkit-playsinlineplaysinline