[zh-CN]: add translation for DocumentPictureInPicture (#23700)

Co-authored-by: A1lo <[email protected]>

files/zh-cn/web/api/document_picture-in-picture_api/index.md

@@ -2,7 +2,7 @@
 title: Document Picture-in-Picture API
 slug: Web/API/Document_Picture-in-Picture_API
 l10n:
-  sourceCommit: ac80d4deda2b072a4fc7e866b5edb14a91226319
+  sourceCommit: 26aaa0b6f92933d915563b1d1210cc46f4ec0e09
 ---
 
 {{SeeCompatTable}}{{DefaultAPISidebar("Document Picture-in-Picture API")}}{{securecontext_header}}
@@ -60,7 +60,7 @@ l10n:
 
 ## 示例
 
-请参阅 [Document Picture-in-Picture API 示例](https://mdn.github.io/dom-examples/document-picture-in-picture/)获取完整的可运行演示（另请参阅完整的[源代码](https://github.com/chrisdavidmills/dom-examples/tree/main/document-picture-in-picture)）。
+请参阅 [Document Picture-in-Picture API 示例](https://mdn.github.io/dom-examples/document-picture-in-picture/)获取完整的可运行演示（另请参阅完整的[源代码](https://github.com/mdn/dom-examples/tree/main/document-picture-in-picture)）。
 
 ## 规范
 

files/zh-cn/web/api/documentpictureinpicture/index.md

@@ -0,0 +1,66 @@
+---
+title: DocumentPictureInPicture
+slug: Web/API/DocumentPictureInPicture
+l10n:
+  sourceCommit: 26aaa0b6f92933d915563b1d1210cc46f4ec0e09
+---
+
+{{APIRef("Document Picture-in-Picture API")}}{{SeeCompatTable}}{{securecontext_header}}
+
+{{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} 的 **`DocumentPictureInPicture`** 接口是创建和处理文档画中画窗口的入口点。
+
+它是通过 {{domxref("Window.documentPictureInPicture")}} 属性访问的。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_从其父接口 {{DOMxRef("EventTarget")}} 继承属性。_
+
+- {{domxref("DocumentPictureInPicture.window", "window")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : 返回一个 {{domxref("Window")}} 实例，代表画中画窗口内的浏览上下文。
+
+## 实例方法
+
+_从其父接口 {{DOMxRef("EventTarget")}} 继承方法。_
+
+- {{domxref("DocumentPictureInPicture.requestWindow", "requestWindow()")}} {{Experimental_Inline}}
+  - : 为当前主浏览环境打开画中画窗口。返回一个 {{jsxref("Promise")}}，其兑现一个 {{domxref("Window")}} 实例，代表画中画窗口内的浏览环境。
+
+## 事件
+
+_从其父接口 {{DOMxRef("EventTarget")}} 继承事件。_
+
+- {{domxref("DocumentPictureInPicture/enter_event", "enter")}} {{Experimental_Inline}}
+  - : 当画中画窗口成功打开时触发。
+
+## 示例
+
+```js
+const videoPlayer = document.getElementById("player");
+
+// ...
+
+// 打开画中画窗口。
+const pipWindow = await window.documentPictureInPicture.requestWindow({
+  width: videoPlayer.clientWidth,
+  height: videoPlayer.clientHeight,
+});
+
+// ...
+```
+
+请参阅 [Document Picture-in-Picture API 示例](https://mdn.github.io/dom-examples/document-picture-in-picture/)获取完整的可运行演示（另请参阅完整的[源代码](https://github.com/mdn/dom-examples/tree/main/document-picture-in-picture)）。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}}
+- [使用 Document Picture-in-Picture API](/zh-CN/docs/Web/API/Document_Picture-in-Picture_API/Using)