Picture-in-Picture画中画功能首次亮相是在年的macOS发布会上。该功能可以使用户弹出一个小浮动的视频播放器窗口，该窗口位于所有其他窗口之上，可以让用户在做其他事情的同时继续观看视频，就像看电视一样，在网上浏览时候时，继续收看视频不耽搁。
安卓在8.0发布中也包括了通过本机API的画中画支持。即使适用于安卓的Chrome浏览器，可以通过此API以画中画模式播放视频。
W3C起草了针对画中画WebAPI标准，使网站可以启动和控制此行为。
至今，谷歌Chrome（版本70+）和微软Edge（版本76+）已经支持此标准。而Firefox，Safari和Opera均使用自有的API来实现。目前各大浏览器对画中画功能的支持见下图（图中数字表示浏览器版本）：
使用画中画API
画中画功能使用非常简单，使用video标签添加一个画中画视频到页面：
videocontrolssrc=video.mp4/video
在Chrome浏览器中，直接支持该功能，打开页面后，就有一个进入和退出画中画模式的开关。
Firefox浏览器则需要启动配置，打开Firefox配置页面about：config，启用media.videocontrols.picture-in-picture.enabled标志，
然后在窗口右边就能看到画中画按钮。
我们可以使用画中画WebAPI用我们自己的方法替换在浏览器中进入画中画模式的默认方法。
例如，让我们添加一个按钮，单击该按钮即可启用它：
buttonid=pipButtonclass=hiddendisabled启用画中画模式
/button
然后通过JavaScript中选择视频和按钮：
constvideo=document.getElementById(video);
constpipButton=document.getElementById(pipButton);
默认情况下，该按钮是隐藏和禁用的，因为在显示按钮之前，需要知道用户的浏览器是否支持并启用了画中画API。这是一种逐步增强的形式，有助于避免在不支持该功能的浏览器中出现不良的体验。
检查API是否受支持，并启用按钮，脚本如下：
if(pictureInPictureEnabledindocument){
pipButton.classList.remove(hidden)
pipButton.disabled=false;
}
进入画中画模式
假设JavaScript确定浏览器已启用画中画支持。当单击带有#pipButton的按钮时，让我们在视频元素上调用requestPictureInPicture()。该方法返回的一个断言，在解析后默认情况下会将视频放置在屏幕右下角的小窗口中，用户可以用鼠标任意拖动它的位置。
if(pictureInPictureEnabledindocument){
pipButton.classList.remove(hidden)
pipButton.disabled=false;
pipButton.addEventListener(click,()={
video.requestPictureInPicture();
});
}
由于requestPictureInPicture()方法返回一个断言，如果尚未加载视频元数据或视频上存在disablePictureInPicture属性，则可能会拒绝该断言。
我们添加一个catch块来捕获此潜在错误，并让用户知道发生了什么：
pipButton.addEventListener(click,()={
video
.requestPictureInPicture()
.catch(error={
//Errorhandling
});
});
退出画中画模式
浏览器会画中画窗口上提供一个关闭按钮，使单击时可以关闭该窗口。我们也可以通过自己写代码退出画中画模式的方法。例如，可以单击#pipButton关闭任何活动的画中画窗口。
pipButton.addEventListener(click,()={
if(document.pictureInPictureElement){
document
.exitPictureInPicture()
.catch(error={
})
}else{
}
});
当视频进入全屏模式时，要关闭画中画窗口的。Chrome会自动执行此操作，而无需执行编写任何代码。
画中画模式下的行为
浏览器使能够检测视频何时进入画中画模式或离开画中画模式。由于可以进入或退出画中画模式，因此可以依靠事件检测来更新媒体控件。
这些事件分别为enterpictureinpicture和leavepictureinpicture，这两个事件的名称分别在视频进入或退出画中画模式时触发。
下面示例中，我们需要根据视频当前是否处于画中画模式来更新#pipButton标签：
video.addEventListener(enterpictureinpicture,()={
pipButton.textContent=ExitPicture-in-Picturemode;
});
video.addEventListener(leavepictureinpicture,()={
pipButton.textContent=EnterPicture-in-Picturemode;
});
自定义画中画窗口
默认情况下，浏览器在画中画窗口中显示播放/暂停按钮，除非视频正在播放MediaStream对象（由虚拟视频源（如相机，视频记录设备，屏幕共享服务或其他硬件）产生）来源）。
我们可以子添加直接从画中画窗口转到上一个或下一个的控件：
navigator.mediaSession.setActionHandler(previoustrack,()={
});
navigator.mediaSession.setActionHandler(nexttrack,()={
});
以网络摄像头为视频来源
当用户在应用程序和其他浏览器选项卡或窗口之间来回切换时，将视频会议Web应用程序设置为画中画模式可受益于此。
禁用画中画
如果不希望视频在画中画窗口中弹出，则可以向其添加
disablePictureInPicture属性，如下所示：
videodisablePictureInPicturecontrolssrc=spacex.mp4/video
总结
本文我们介绍了画中画Web接口的常见功能。目前，API仅支持在video标签下使用，预计将来可以扩展到其他元素。画中画功能是一个很有用的功能，可以有效的改善用户体验，虫虫已经在很多网站上见到过该功能，希望大家使用他来增强自己网站上的视频体验。