使用 Document Picture-in-Picture API 的令人兴奋的应用场景

Document Picture-in-Picture API（简称 Document PiP API）是一项强大的新功能，它允许 Web 应用程序打开一个浮动的、始终置顶的窗口（即画中画窗口），并在其中显示任意 HTML 内容。这一功能基于传统 <video> 元素的画中画 API 扩展而来，不仅支持视频播放，还能展示更多丰富的内容，从而解锁许多令人兴奋的新应用场景。

浏览器支持与渐进式增强

目前，Document PiP API 的浏览器支持范围仍然有限。然而，这并不意味着我们无法利用它。通过渐进式增强（Progressive Enhancement）或优雅降级（Graceful Degradation）的方式，我们可以在支持该 API 的环境中提供更好的用户体验，同时在不支持的环境中提供替代方案。

在规划使用场景时，应将 Document PiP API 视为一种增强功能，而非基础特性。以下内容将展示如何通过优雅降级的方式实现这一功能。

使用 Document PiP API 改善学习者的用户体验

以下是一个典型的应用场景：一个学习平台的界面分为两列，左侧是代码编辑器，右侧是选项卡式布局。默认情况下，用户可以查看挑战说明，也可以切换到“浏览器”选项卡查看实时预览。

作为学习者，有时可能希望最大化浏览器预览窗口以便更清晰地查看内容。这时，Document PiP API 就能派上用场。

检查浏览器支持

在实现功能之前，首先需要检查浏览器是否支持 Document PiP API。以下代码展示了如何检测支持情况，并在支持的情况下打开一个 Document PiP 窗口：

if ('documentPictureInPicture' in window) {
  // 打开 Document PiP 窗口
  documentPictureInPicture.requestWindow();
}

定制窗口内容

根据具体需求，可以为窗口设置宽度和高度，甚至匹配特定的元素或文档内容。以下是一个简单的实现步骤：

检测支持情况并打开 PiP 窗口。
在窗口中填充所需的 HTML 内容。
如果涉及样式，还需要同步 CSS。

通过这些步骤，您可以为用户提供一个独立的 PiP 窗口，方便最大化浏览器预览内容。此外，如果用户有外接显示器，还可以将 PiP 窗口移动到其他屏幕，进一步提升多任务处理的效率。

提供优雅降级的回退方案

由于 Document PiP API 的支持范围有限，在不支持该 API 的浏览器中，需要提供替代方案。例如，当用户点击“最大化”按钮时，可以让浏览器预览区域占据当前 Web 应用程序的所有剩余空间，而不是打开一个独立的 PiP 窗口。

您可以通过以下链接测试不同浏览器中的回退行为：测试链接

工具提示的细节优化

在实现过程中，不要忽略工具提示的细节。例如：

当 isPipSupported 为 true 时，工具提示可以在“进入画中画模式”和“退出画中画模式”之间切换。
当 isPipSupported 为 false 时，工具提示可以显示为“最大化”和“最小化”。

通过这些细节优化，可以进一步提升用户体验。

总结

Document PiP API 为 Web 应用程序带来了许多创新的可能性。尽管目前的浏览器支持范围有限，但通过渐进式增强和优雅降级的方式，我们依然可以为用户提供出色的体验。

不要因为支持范围有限而放弃尝试，同时也不要忘记为不支持的环境提供合理的回退方案。更多关于 Document PiP API 的示例和用例，请参考官方文档。

原文链接: https://developer.chrome.com/blog/document-pip-use-case