Document Picture-in-Picture API 示例

--- theme: smartblue --- ## Document Picture-in-Picture 介绍今天，我来介绍一个非常酷的前端功能：**文档画中画** (Document Picture-in-Picture, 本文简称 PiP)。你有没有想过，网页上的任何内容能悬浮在桌面上？😏 ### 🎬 视频流媒体的画中画功能你可能已经在视频平台（如`腾讯视频`、`哔哩哔哩`等网页）见过这种效果：视频播放时，可以点击画中画后。无论你切换页面，它都始终显示在屏幕的最上层，非常适合`上班偷偷看电视`💻

在今天的教程中，不仅仅是视频，我将教你如何`将任何 HTML 内容放入画中画`模式，无论是动态内容、文本、图片，还是纯炫酷的 div，统统都能“飞”起来。✨ 一个如此有趣的功能，在网上却很少有详细的教程来介绍这个功能的使用。于是我决定写一篇详细的教程来教大家如何实现画中画 (建议收藏)😁 #### [体验网址：Treasure-Navigation

](https://xionglongbing.github.io/Treasure-Navigation) [github地址](https://github.com/xionglongbing/Treasure-Navigation) *** ## 📖 Document Picture-in-Picture 详细教程 ### 🛠 HTML 基本代码结构首先，我们随便写一个简单的 `HTML 页面`，后续的 JS 和样式都会基于它实现。 ```html Document Picture-in-Picture API 示例

这是一个将要放入画中画的 div 元素！

``` *** ### 1️. 请求 PiP 窗口 `PiP` 的核心方法是 `window.documentPictureInPicture.requestWindow`。它是一个 `异步方法`，返回一个新创建的 `window` 对象。
`PIP 窗口`可以将其看作一个新的网页，但它始终悬浮在屏幕上方。 ```js document.getElementById("clickBtn").addEventListener("click", async function () { // 获取将要放入 PiP 窗口的 DOM 元素 const pipContent = document.getElementById("pipContent"); // 请求创建一个 PiP 窗口 const pipWindow = await window.documentPictureInPicture.requestWindow({ width: 200, // 设置窗口的宽度 height: 300 // 设置窗口的高度 }); // 将原始元素添加到 PiP 窗口中 pipWindow.document.body.appendChild(pipContent); }); ``` #### 演示：

👏 **现在，我们已经成功创建了一个画中画窗口！** 这段代码展示了如何将网页中的元素放入一个新的画中画窗口，并让它悬浮在最上面。非常简单吧
#### 关闭PIP窗口可以直接点右上角关闭PIP窗口，如果我们想在代码中实现关闭，直接调用`window上的api`就可以了 ```js window.documentPictureInPicture.window.close(); ``` *** ### 2️. 检查是否支持 PiP 功能一切不能**兼容浏览器**的功能介绍都是耍流氓，我们需要检查浏览器是否`支持PIIP功能`。实际就是检查documentPictureInPicture属性是否存在于window上 🔧 ```js if ('documentPictureInPicture' in window) { console.log("🚀 浏览器支持 PiP 功能！"); } else { console.warn("⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！"); } ``` 如果是只需要将视频实现画中画功能，`视频画中画 (Picture-in-Picture)` 的兼容性会好一点，但是它只能将`