web api 新特性--画中画-CSDN博客

本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/147317176

本文作者系360奇舞团前端开发工程师

window.documentPictureInPicture.requestWindow 是 Picture-in-Picture (PiP) API 中的一个方法，用于请求将视频元素切换到画中画模式。画中画模式允许用户在浏览器中将视频流从一个页面或标签页分离出来，缩小为一个浮动的独立窗口，这个窗口可以在桌面上悬浮并且随时查看，即使切换到其他应用程序或浏览器标签页。

1. 画中画模式 (PiP)

画中画模式 (Picture-in-Picture, PiP) 是一种多任务处理模式，允许在浏览器中播放视频内容时，用户仍然可以继续进行其他操作。该模式通常被应用于视频播放器，例如 YouTube 或视频通话工具等。

2. `documentPictureInPicture.requestWindow` 的概念

documentPictureInPicture.requestWindow 方法是 Web Platform API 提供的用于请求将网页中的视频元素或整个文档转换为画中画窗口的方法。这个 API 让浏览器将页面中的视频从其原本的位置移动到一个浮动的窗口中，用户可以自由拖动、调整窗口大小，并且该窗口总是保持在桌面或浏览器窗口之上。

不过，这个方法属于实验性 API 目前并没有普遍支持，因此在实际开发中使用时需要注意兼容性。

3. 画中画的实现步骤

基本步骤：

创建视频元素：首先你需要一个视频元素。这个视频可以是 HTML 中的 <video> 标签，也可以是通过 JavaScript 动态生成的元素。
请求画中画：通过调用 requestPictureInPicture() 方法，将视频内容转换为画中画窗口。
退出画中画：用户可以手动退出画中画模式，或者在 JavaScript 中通过相关方法控制退出。

4. 使用画中画 API

示例代码：

<video id="video" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<button id="pipBtn">开启画中画</button>

<script>
  const video = document.getElementById('video');
const pipBtn = document.getElementById('pipBtn');

  pipBtn.addEventListener('click', () => {
    if (document.pictureInPictureEnabled) {
      video.requestPictureInPicture()
        .then(() => {
          console.log('画中画模式已开启');
        })
        .catch((err) => {
          console.error('无法开启画中画模式:', err);
        });
    } else {
      console.log('该浏览器不支持画中画功能');
    }
  });
</script>

在这个示例中，当用户点击按钮时，视频元素将会进入画中画模式。如果浏览器不支持画中画功能，它会输出一条错误消息。

5. 画中画模式的功能和交互

在画中画模式中，视频窗口会被最小化并浮动在浏览器窗口上，用户可以：

调整大小：用户可以调整视频窗口的大小。
移动窗口：用户可以将视频窗口拖动到屏幕上的任意位置。
暂停/播放控制：视频的播放控制会被保留，用户可以控制视频的播放状态。
关闭画中画：用户可以通过点击画中画窗口上的关闭按钮退出画中画模式。

6. 监听事件

可以监听与画中画相关的事件，如进入画中画、退出画中画等：

const video = document.querySelector('video');

// 监听进入画中画模式
video.addEventListener('enterpictureinpicture', () => {
  console.log('视频已进入画中画模式');
});

// 监听退出画中画模式
video.addEventListener('leavepictureinpicture', () => {
  console.log('视频已退出画中画模式');
});

7. 兼容性

画中画 API 的兼容性：

Chrome、Edge、Firefox 等现代浏览器支持画中画 API。
Safari 也支持，但需要在 macOS 上使用 HTTPS。
Internet Explorer 不支持此功能。

开发者在使用时应检查浏览器是否支持 requestPictureInPicture() 或相关的画中画 API。

8. 使用场景

视频会议：在视频通话应用中，用户可以在浏览器中观看视频并同时进行其他操作。
媒体播放：例如观看直播、学习视频等，可以通过画中画模式将视频播放固定在屏幕的某个位置。
实时监控：视频监控应用可以让用户在浏览器中实时查看摄像头的画面，并继续使用其他功能。

总结

window.documentPictureInPicture.requestWindow 是一个新的、尚未普及的实验性API，而 requestPictureInPicture() 是目前主流浏览器支持的实现画中画功能的 API。通过这个 API，开发者可以为视频元素启用画中画功能，让视频可以浮动在屏幕上，用户可以继续查看其他内容。使用时需要考虑兼容性问题，并合理处理浏览器的安全策略和权限。