BOM中如何开启画中画功能？

前往漫画官网入口并下载

想在网页中实现画中画（Picture-in-Picture, PiP）功能？本文将深入讲解如何利用浏览器BOM中的HTMLVideoElement接口，通过`requestPictureInPicture()`方法进入PiP模式，并使用`exitPictureInPicture()`退出。了解如何通过用户手势触发PiP，监听`enterpictureinpicture`和`leavepictureinpicture`事件处理状态变化，以及掌握各主流浏览器（Chrome、Edge、Firefox、Safari）在桌面端和移动端的兼容性差异。本文还将分享画中画在多任务处理、在线教育、视频会议等实际应用场景，助你轻松打造更强大的视频播放体验，提升用户效率。掌握这些技巧，让你的网页视频也能拥有悬浮播放的便捷性！

操作浏览器画中画功能的核心在于使用HTMLVideoElement的requestPictureInPicture()方法进入PiP模式，以及document.exitPictureInPicture()退出；1. 进入PiP需调用videoElement.requestPictureInPicture()，并处理Promise成功或失败情况；2. 退出PiP可通过document.exitPictureInPicture()实现；3. requestPictureInPicture()必须由用户手势触发，不能自动执行；4. 可通过监听enterpictureinpicture和leavepictureinpicture事件处理状态变化；5. 兼容性方面，桌面端Chrome/Edge/Firefox/Safari支持较好，移动端iOS依赖系统级PiP，Android支持较完善；6. 实际应用包括多任务处理、在线教育、视频会议、实时监控等场景。

要在浏览器BOM（Browser Object Model）中操作画中画（Picture-in-Picture, PiP）功能，核心在于使用HTMLVideoElement接口提供的requestPictureInPicture()方法来进入画中画模式，以及通过文档对象上的exitPictureInPicture()方法来退出。这让开发者能够程序化地控制视频内容的浮动播放体验。

操作浏览器的画中画功能，主要围绕着HTML 元素进行。当你需要让一个视频进入画中画模式时，最直接的方式是调用该视频元素的 requestPictureInPicture() 方法。这个方法返回一个 Promise，成功时会进入画中画模式，失败则会捕获错误，比如用户拒绝、或视频元素不符合PiP条件（例如没有用户交互触发、视频没有播放等）。

一个典型的流程会是这样： 首先，你需要获取到你的视频元素： const videoElement = document.querySelector('video');

然后，当用户点击某个按钮或满足特定条件时，触发PiP请求：

document.getElementById('enterPipButton').addEventListener('click', async () => {
  if (videoElement) {
    try {
      // 检查浏览器是否支持画中画
      if (document.pictureInPictureEnabled) {
        // 如果当前有元素处于PiP模式，先退出，再进入新的
        if (document.pictureInPictureElement) {
          await document.exitPictureInPicture();
        }
        await videoElement.requestPictureInPicture();
        console.log('视频已进入画中画模式');
      } else {
        console.warn('当前浏览器不支持画中画功能。');
      }
    } catch (error) {
      console.error('进入画中画模式失败:', error);
      // 常见错误：用户未交互、视频未播放、视频元素被隐藏等
    }
  }
});

退出画中画模式则相对简单，直接调用 document.exitPictureInPicture() 即可。这个方法同样返回一个 Promise，用于处理成功或失败的情况。通常，用户会直接通过画中画窗口的UI来退出，但如果你想提供一个程序化的退出按钮：

document.getElementById('exitPipButton').addEventListener('click', async () => {
  if (document.pictureInPictureElement) { // 检查是否有元素处于PiP模式
    try {
      await document.exitPictureInPicture();
      console.log('已退出画中画模式');
    } catch (error) {
      console.error('退出画中画模式失败:', error);
    }
  }
});

值得注意的是，requestPictureInPicture() 必须由用户手势（如点击事件）触发，不能在页面加载时自动调用。这是浏览器出于用户体验和安全考虑的限制。我个人觉得这个限制非常合理，否则那些烦人的广告视频可能无休止地跳出来。

浏览器画中画功能有哪些实际应用场景？

说实话，画中画这玩意儿，一开始我只觉得是个看视频的“小把戏”，但用久了发现它确实能解决不少多任务处理的痛点。最直接的，当然是边看视频边做其他事。比如，我写代码的时候，可能需要同时看一个技术教程视频，或者听个播客，这时候PiP就太方便了，视频浮在屏幕一角，不遮挡我的IDE，又能随时瞟一眼。

除了这种个人消费场景，它在一些专业应用里也很有潜力。想象一下，一个在线会议系统，演讲者在分享屏幕，但你又想看到发言人的表情，这时候就可以把发言人的视频流开个PiP窗口。或者，在实时监控的场景，比如多个摄像头画面，把某个重点区域的监控流拉出来做PiP，同时主界面还能显示其他数据。再比如，在线教育，老师的讲解视频可以PiP，学生的主屏幕用来做笔记或练习。甚至在电子商务里，展示商品细节的视频，用户可以在浏览其他商品的同时，把某个商品的介绍视频保持播放。它打破了传统浏览器标签页的死板，让内容有了更自由的浮动空间，提升了用户在多任务环境下的效率。我甚至想过，如果能把一些实时数据图表也PiP出来，那分析师的工作流会更流畅。

如何监听和处理画中画模式的事件？

要让你的应用更好地与画中画模式协同工作，监听其状态变化是必不可少的。浏览器提供了一些事件，让你能知道视频何时进入或退出PiP模式。

最主要的两个事件是：

1. enterpictureinpicture：当视频成功进入画中画模式时，会在视频元素上触发。
2. leavepictureinpicture：当视频退出画中画模式时，同样在视频元素上触发。

你可以像监听其他DOM事件一样来监听它们：

videoElement.addEventListener('enterpictureinpicture', () => {
  console.log('视频已进入画中画模式，可以调整UI或暂停主页面的播放。');
  // 比如，隐藏主页面上的视频播放器控件，因为PiP窗口有自己的控件
  // 或者调整主页面的布局，给PiP窗口腾出空间
});

videoElement.addEventListener('leavepictureinpicture', () => {
  console.log('视频已退出画中画模式，可以恢复主页面的播放或UI。');
  // 比如，显示主页面上的视频播放器控件
  // 确保视频回到主页面后，播放状态是正确的
  if (videoElement.paused) {
    videoElement.play(); // 个人习惯，退出PiP后如果暂停了就让它继续播放
  }
});

此外，还有一个 onresize 事件，当PiP窗口的大小改变时，会触发一个 resize 事件。这个事件在 PictureInPictureWindow 对象上触发。你可以通过 requestPictureInPicture() 返回的 Promise 解析到的 PictureInPictureWindow 对象来监听它：

// 当进入PiP时
await videoElement.requestPictureInPicture().then(pictureInPictureWindow => {
  pictureInPictureWindow.addEventListener('resize', () => {
    console.log(`PiP窗口大小改变了: 宽度 ${pictureInPictureWindow.width}, 高度 ${pictureInPictureWindow.height}`);
    // 你可能需要根据PiP窗口大小调整一些逻辑，虽然这不常见
  });
});

通过这些事件，你可以灵活地调整你的页面UI和逻辑，确保用户在不同模式下的体验都是流畅且符合预期的。比如，当视频进入PiP时，你可能想在主页面上显示一个“视频正在画中画中播放”的提示，或者禁用某些与视频相关的操作，避免冲突。

在不同浏览器中画中画功能兼容性如何？

兼容性这块，说实话，前端开发永远的痛。画中画功能虽然已经比较普及了，但不同浏览器之间的支持程度和一些细节行为还是存在差异的。

主流桌面浏览器：

• Chrome/Edge (基于Chromium)：对PiP的支持是最好的，也是最先广泛推广的。API实现得非常完善，用户体验也比较稳定。
• Firefox：也提供了很好的支持，API基本与Chrome保持一致。
• Safari (macOS)：Safari在macOS上也有自己的PiP实现，但其API接口与W3C的Picture-in-Picture API略有不同，它主要是通过Webkit的私有属性和方法来控制，或者依赖于macOS系统层级的PiP功能。不过，现代Safari也逐渐在向标准靠拢。
• Opera：由于也是基于Chromium，其表现与Chrome类似。

移动端浏览器： 移动端的情况就比较复杂了。虽然许多移动操作系统（如iOS和Android）本身支持系统级的画中画功能，但浏览器内置的PiP API在移动端浏览器上的支持程度不如桌面端那么统一和完善。

• iOS Safari：通常依赖于iOS系统自带的画中画功能，而不是浏览器层面的API。这意味着你可能无法通过JS完全控制PiP的进入和退出，更多的是由用户手势触发或系统自动判断。
• Android Chrome/Edge：在Android上，这些浏览器通常能很好地支持W3C的PiP API，体验接近桌面端。

兼容性检查： 在实际开发中，始终建议在使用PiP功能前进行能力检测。最简单的就是检查 document.pictureInPictureEnabled 属性和 videoElement.requestPictureInPicture 方法是否存在。

if ('pictureInPictureEnabled' in document && videoElement.requestPictureInPicture) {
  // 浏览器支持PiP
  // 你的PiP逻辑
} else {
  console.warn('当前浏览器或环境不支持画中画功能。');
  // 提供备用方案或隐藏相关UI
}

即便API存在，也可能因为各种原因（如用户权限、视频属性、页面状态等）导致 requestPictureInPicture() 失败。所以，Promise 的错误处理是必不可少的。我经常遇到的是，视频还没开始播放就尝试PiP，或者视频尺寸太小，这些都会导致失败。总的来说，虽然有差异，但通过能力检测和适当的错误处理，大部分场景下还是能提供一个不错的PiP体验的。就我个人经验而言，桌面端的PiP体验已经相当成熟，移动端则需要更多地考虑系统层面的集成和用户习惯。

以上就是《BOM中如何开启画中画功能？》的详细内容，更多关于的资料请关注golang学习网公众号！