不常用的浏览器 API —— Picture-in-Picture

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

这一篇来看一下 Picture-in-Picture API，这个 API 是专门用来处理视频播放的，可以创建画中画播放模式，大家在移动端可能会经常看到这个效果，在 PC 端很多视频网站也支持画中画播放。不过对于大多数前端开发者而言，这个 API 通常是接触不到的，因此实际上非常不常用，这一节来看一下这部分 API 内容。

画中画的效果就是视频悬浮在上面，用户可以正常和下面的内容交互，我们来看一下相关的方法。

首先是 requestPictureInPicture，这是开启画中画模式的关键 API，它位于 video 标签上，我们可以获取 video 的 dom 节点，调用此方法来进入画中画，之后 video 就可以脱离文档流悬浮在外面，video 原始位置会保留空内容。video 脱离出去但是播放器本身还是正常交互的，也就是说其实本质上是换了位置。用户可以在浏览器关闭画中画模式，我们需要先判断 pictureInPictureEnabled，如果用户开启画中画再调用 requestPictureInPicture。

退出画中画需要调用 exitPictureInPicture，这个方法在 document 上，它是针对整个文档而不是一个 video 标签的。想退出画中画首先需要在画中画模式，我们可以通过 document 上的 pictureInPictureElement 来判断是否处于画中画模式，流程大概是下面这样：

function togglePictureInPicture() {
  if (document.pictureInPictureElement) {
      document.exitPictureInPicture();
  } else {
    if (document.pictureInPictureEnabled) {
      video.requestPictureInPicture();
    }
  }
}

在 video 上面还有几个画中画相关事件 enterpictureinpicture、leavepictureinpicture、resize，这几个事件会在画中画模式改变时对应触发。

对于进入了画中画的模式的视频，我们可以通过 css 条件 :picture-in-picture 来选择，这样可以为画中画视频添加我们需要的样式效果。