HTML5中需在用户手势事件中调用requestPictureInPicture()开启画中画，前提为视频已加载可播放且未禁用；关闭可用document.exitPictureInPicture()或监听pictureinpicturechange事件判断状态，注意跨iframe需设置allow="picture-in-picture"属性。

HTML5 中通过 JavaScript 调用 requestPictureInPicture() 方法可开启画中画（PiP），调用 document.exitPictureInPicture() 可关闭。关键前提是视频元素已加载、可播放，且用户交互触发（如点击事件），否则浏览器会拒绝执行。

开启画中画的条件与写法

必须在用户手势（如 click、touchend）回调中调用 requestPictureInPicture()，且视频需处于“可播放”状态（readyState >= 2 或已播放过）。建议加错误捕获：

• 检查 videoElement.disablePictureInPicture 是否为 false（若设为 true 则禁用 PiP）
• 确认浏览器支持：document.pictureInPictureElement !== undefined 且 videoElement.requestPictureInPicture 存在
• 示例代码：

  button.addEventListener('click', async () => {
    try {
      await video.requestPictureInPicture();
    } catch (err) {
      console.warn('无法进入画中画：', err.message);
    }
  });

关闭画中画的两种方式

用户可手动点击 PiP 窗口的关闭按钮退出；程序也可主动退出：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 调用 document.exitPictureInPicture()（返回 Promise）
• 监听 document.onpictureinpicturechange 事件，判断当前是否退出 PiP 状态：
  if (!document.pictureInPictureElement) { /* 已退出 */ }
• 注意：该 API 只能由同源页面调用，跨 iframe 需确保 allow="picture-in-picture" 属性已设置

实用状态监听与 UI 同步

画中画状态变化需实时响应，例如切换按钮图标或文字：

立即学习“Java免费学习笔记（深入）”；

• 监听全局事件：document.addEventListener('pictureinpicturechange', () => { ... })
• 在回调中检查：document.pictureInPictureElement === video 判断是否是当前视频处于 PiP
• 避免重复调用：开启前检查 !document.pictureInPictureElement，关闭前检查 document.pictureInPictureElement

兼容性与常见问题

Chrome 70+、Edge 79+、Safari 14.1+（macOS/iOS）支持，Firefox 尚未默认启用（需手动开启 media.videocontrols.picture-in-picture.enabled）。

• 移动端（iOS Safari）仅支持 <video> 元素，且需添加 playsinline 属性才能正常触发 PiP
• 如果视频正在加载，requestPictureInPicture() 会抛出 InvalidStateError，应等待 canplay 或 loadeddata 事件后再绑定按钮
• 自动播放被限制时，先调用 video.play().catch(...) 激活媒体上下文，再触发 PiP 更稳妥