图片中的图片网络API简介

2016年，Safari浏览器随macOS Sierra发布，首次引入了画中画功能。这项功能允许用户将视频弹出到一个小型的浮动窗口中，该窗口始终位于其他窗口之上，方便用户在执行其他操作的同时继续观看视频。这一创意源于电视，例如，用户可能希望在浏览节目单或其他频道时继续观看热门体育赛事。

不久之后，Android 8.0发布，通过原生API支持画中画功能。尽管Chrome桌面版尚不支持此功能，但Android版Chrome却能够通过此API以画中画模式播放视频。

这促使了标准画中画Web API的制定，使网站能够启动和控制此行为。

在撰写本文时，只有Chrome（70版及以上）和Edge（76版及以上）支持此功能。Firefox、Safari和Opera都使用专有的API来实现其功能。

此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持此功能。

桌面端

移动端/平板电脑

如何使用画中画API

让我们从向网页添加视频开始。

<video controls="" src="video.mp4"></video>

在Chrome中，已经存在用于进入和退出画中画模式的切换按钮。

要测试Firefox的实现，您需要首先在about:config中启用media.videocontrols.picture-in-picture.enabled标志，然后右键单击视频以查找画中画选项。

虽然这有效，但在许多情况下，您希望您的视频控件在不同浏览器中保持一致，并且您可能希望控制哪些视频可以进入画中画模式，哪些视频不能。

我们可以使用画中画Web API用我们自己的方法替换浏览器中进入画中画模式的默认方法。例如，让我们添加一个按钮，单击该按钮即可启用它：

<button id="pipButton" class="hidden" disabled>进入画中画模式</button>

然后在JavaScript中选择视频和按钮：

const video = document.getElementById('video');
const pipButton = document.getElementById('pipButton');

默认情况下，按钮是隐藏且禁用的，因为我们需要知道在用户的浏览器中是否支持和启用了画中画API，然后再显示它。这是一种渐进增强形式，有助于避免在不支持此功能的浏览器中出现损坏的体验。

我们可以检查API是否受支持并启用按钮，如下所示：

if ('pictureInPictureEnabled' in document) {
  pipButton.classList.remove('hidden')
  pipButton.disabled = false;
}

进入画中画模式

假设我们的JavaScript已确定浏览器启用了画中画支持。当单击带有#pipButton的按钮时，让我们在视频元素上调用requestPictureInPicture()。此方法返回一个promise，默认情况下，在解析时，该promise将视频放置在屏幕右下角的一个迷你窗口中，尽管用户可以将其移动。

if ('pictureInPictureEnabled' in document) {
  pipButton.classList.remove('hidden')
  pipButton.disabled = false;

  pipButton.addEventListener('click', () => {
    video.requestPictureInPicture();
  });
}

我们不能按原样保留上面的代码，因为requestPictureInPicture()返回一个promise，并且如果例如视频元数据尚未加载或视频上存在disablePictureInPicture属性，则promise可能会被拒绝。

让我们添加一个catch块来捕获此潜在错误并让用户知道发生了什么：

pipButton.addEventListener('click', () => {
  video
    .requestPictureInPicture()
    .catch(error => {
      // 错误处理
    });
});

退出画中画模式

浏览器贴心地在画中画窗口中提供了一个关闭按钮，单击该按钮可以关闭窗口。但是，我们也可以提供另一种退出画中画模式的方法。例如，我们可以使单击我们的#pipButton关闭任何活动的画中画窗口。

pipButton.addEventListener('click', () => {
  if (document.pictureInPictureElement) {
    document
      .exitPictureInPicture()
      .catch(error => {
      // 错误处理
    })
  } else {
    // 请求画中画
  }
});

您可能希望关闭画中画窗口的另一种情况是视频进入全屏模式时。Chrome已经自动执行此操作，无需编写任何代码。

画中画事件

浏览器允许我们检测视频何时进入或离开画中画模式。由于画中画模式有很多进入或退出的方式，因此最好依赖事件检测来更新媒体控件。

这些事件是enterpictureinpicture和leavepictureinpicture，顾名思义，它们分别在视频进入或退出画中画模式时触发。

在我们的示例中，我们需要根据视频当前是否处于画中画模式来更新#pipButton标签。

以下是帮助我们实现此目标的代码：

video.addEventListener('enterpictureinpicture', () => {
  pipButton.textContent = '退出画中画模式';
});

video.addEventListener('leavepictureinpicture', () => {
  pipButton.textContent = '进入画中画模式';
});

这是一个演示：

自定义画中画窗口

浏览器默认情况下会在画中画窗口中显示播放/暂停按钮，除非视频正在播放MediaStream对象（由虚拟视频源产生，例如摄像头、视频录制设备、屏幕共享服务或其他硬件源）。

还可以添加直接从画中画窗口转到上一曲目或下一曲目的控件：

navigator.mediaSession.setActionHandler('previoustrack', () => {
  // 转到上一曲目
});

navigator.mediaSession.setActionHandler('nexttrack', () => {
  // 转到下一曲目
});

在画中画窗口中显示网络摄像头馈送

视频会议Web应用程序可以从在用户在应用程序和其他浏览器选项卡或窗口之间切换时将网络摄像头馈送置于画中画模式中受益。

这是一个示例：

禁用视频上的画中画

如果您不希望视频在画中画窗口中弹出，可以向其添加disablePictureInPicture属性，如下所示：

<video controls="" disablepictureinpicture="" src="video.mp4"></video>

总结

目前，这就是您现在需要了解的关于画中画Web API的所有内容！目前，API仅支持<video></video>元素，但它也旨在扩展到其他元素。

尽管浏览器支持现在参差不齐，但您仍然可以使用它作为渐进增强网站视频体验的一种方式。

进一步阅读

• 画中画API规范
• 使用画中画观看视频
• 画中画示例（GitHub上的Google Chrome）

The output maintains the original image and its format. The text has been paraphrased and reorganized for improved flow and clarity while retaining the original meaning. Technical terms are kept consistent.

以上是图片中的图片网络API简介的详细内容。更多信息请关注PHP中文网其他相关文章！