Picture-in-Picture画中画功能首次亮相是在2016年的macOS发布会上。该功能可以使用户弹出一个小浮动的视频播放器窗口，该窗口位于所有其他窗口之上，可以让用户在做其他事情的同时继续观看视频，就像看电视一样，在网上浏览时候时，继续收看视频不耽搁。

安卓在8.0发布中也包括了通过本机API的画中画支持。即使适用于安卓的Chrome浏览器，可以通过此API以画中画模式播放视频。

W3C起草了针对画中画Web API标准，使网站可以启动和控制此行为。

至今，谷歌Chrome（版本70+）和微软Edge（版本76+）已经支持此标准。而 Firefox，Safari和Opera均使用自有的API来实现。目前各大浏览器对画中画功能的支持见下图（图中数字表示浏览器版本）：

使用画中画API

画中画功能使用非常简单，使用video标签添加一个画中画视频到页面：

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

在Chrome浏览器中，直接支持该功能，打开页面后，就有一个进入和退出画中画模式的开关。

Firefox浏览器则需要启动配置，打开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()。该方法返回的一个断言，在解析后默认情况下会将视频放置在屏幕右下角的小窗口中，用户可以用鼠标任意拖动它的位置。

if ('pictureInPictureEnabled' in document) {

pipButton.classList.remove('hidden')

pipButton.disabled = false;

pipButton.addEventListener('click', () => {

video.requestPictureInPicture();

});

}

由于requestPictureInPicture()方法返回一个断言，如果尚未加载视频元数据或视频上存在disablePictureInPicture属性，则可能会拒绝该断言。

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

pipButton.addEventListener('click', () => {

video

.requestPictureInPicture()

.catch(error => {

// Error handling

});

});

退出画中画模式

浏览器会画中画窗口上提供一个关闭按钮，使单击时可以关闭该窗口。我们也可以通过自己写代码退出画中画模式的方法。例如，可以单击#pipButton关闭任何活动的画中画窗口。

pipButton.addEventListener('click', () => {

if (document.pictureInPictureElement) {

document

.exitPictureInPicture()

.catch(error => {

})

} else {

}

});

当视频进入全屏模式时，要关闭画中画窗口的。Chrome会自动执行此操作，而无需执行编写任何代码。

画中画模式下的行为

浏览器使能够检测视频何时进入画中画模式或离开画中画模式。由于可以进入或退出画中画模式，因此可以依靠事件检测来更新媒体控件。

这些事件分别为enterpictureinpicture 和 leavepictureinpicture，这两个事件的名称分别在视频进入或退出画中画模式时触发。

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

video.addEventListener('enterpictureinpicture', () => {

pipButton.textContent = 'Exit Picture-in-Picture mode';

});

video.addEventListener('leavepictureinpicture', () => {

pipButton.textContent = 'Enter Picture-in-Picture mode';

});

自定义画中画窗口

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

我们可以自添加直接从画中画窗口转到上一个或下一个的控件：

navigator.mediaSession.setActionHandler('previoustrack', () => {

});

navigator.mediaSession.setActionHandler('nexttrack', () => {

});

以网络摄像头为视频来源

当用户在应用程序和其他浏览器选项卡或窗口之间来回切换时，将视频会议Web应用程序设置为画中画模式可受益于此。

禁用画中画

如果不希望视频在画中画窗口中弹出，则可以向其添加

disablePictureInPicture属性，如下所示：

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

总结

本文我们介绍了画中画Web接口的常见功能。目前，API仅支持在<video>标签下使用，预计将来可以扩展到其他元素。画中画功能是一个很有用的功能，可以有效的改善用户体验，虫虫已经在很多网站上见到过该功能，希望大家使用他来增强自己网站上的视频体验。