Picture in Picture — 画中画Picture-in-picture （画中画）功能允许用户在一个小的叠

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 14 天，点击查看活动详情

Picture-in-picture （画中画）功能允许用户在一个小的叠加窗口中弹出网页中播放的视频，用于在浮动窗口上显示内容。它允许用户在与背景页面和其他网站交互时继续查看内容。

Picture in Picture 支持情况

实现画中画

一个 video 标签和一个切换画中画功能的按钮。

<video id="video" src="video.mp4" controls autoplay />
<button id="toggle">toggle</button>

JS 只需要调用 video 元素的 requestPictureInPicture 方法即可进入画中画，然后再调用 document 对象下的 exitPictureInPicture 方法就可以关闭画中画功能了。

另外，document 对象下的 pictureInPictureElement 指向画中画功能生效的那个 video 元素，如果没有开启画中画，那么返回值是 null。

// 进入画中画
video.requestPictureInPicture()
// 退出画中画
document.exitPictureInPicture()
// 画中画生效的 video 元素
document.pictureInPictureElement

requestPictureInPicture 和 exitPictureInPicture 都是异步 API，返回 Promise。

我们可以检查 API 是否受支持，如下所示：

const hasSupport = () => Boolean('pictureInPictureEnabled' in document)

画中画活动

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

事件分别为 enterpictureinpicture 和 leavepictureinpicture，它们在视频进入或退出画中画模式时触发。

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

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

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

自定义画中画窗口

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

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

navigator.mediaSession.setActionHandler('previoustrack', () => {
  // Go to previous track
})

navigator.mediaSession.setActionHandler('nexttrack', () => {
  // Go to next track
})

禁用视频中的画中画

video 的 disablePictureInPicture 属性可以禁用画中画：

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

为了减少代码占用太篇幅，没有提供完整的示例，点击此处 👉 查看完整示例。

进一步阅读

本文首发 blog，如果喜欢或者有所启发，欢迎 Star，对作者也是一种鼓励。