From c12421c1c9361801db03e6c2b6a7a134abe47b04 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Fri, 20 Sep 2024 11:42:58 +0800 Subject: [PATCH 1/5] add --- .../web/api/documentpictureinpicture/index.md | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 files/zh-cn/web/api/documentpictureinpicture/index.md diff --git a/files/zh-cn/web/api/documentpictureinpicture/index.md b/files/zh-cn/web/api/documentpictureinpicture/index.md new file mode 100644 index 00000000000000..7a6b95632dd298 --- /dev/null +++ b/files/zh-cn/web/api/documentpictureinpicture/index.md @@ -0,0 +1,66 @@ +--- +title: DocumentPictureInPicture +slug: Web/API/DocumentPictureInPicture +l10n: + sourceCommit: 4bb7edfa824ee4790abe60637b7876acd3eb827d +--- + +{{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/chrisdavidmills/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) From 4a0beca9245ec40b1d680b19b9cb817e0b63b0fb Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Tue, 8 Oct 2024 23:25:03 +0800 Subject: [PATCH 2/5] Apply suggestions from code review --- files/zh-cn/web/api/documentpictureinpicture/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/zh-cn/web/api/documentpictureinpicture/index.md b/files/zh-cn/web/api/documentpictureinpicture/index.md index 7a6b95632dd298..c388cbd83038a2 100644 --- a/files/zh-cn/web/api/documentpictureinpicture/index.md +++ b/files/zh-cn/web/api/documentpictureinpicture/index.md @@ -2,7 +2,7 @@ title: DocumentPictureInPicture slug: Web/API/DocumentPictureInPicture l10n: - sourceCommit: 4bb7edfa824ee4790abe60637b7876acd3eb827d + sourceCommit: bac20b9ed34bf5b6427ba9274c99c1737dc309ff --- {{APIRef("Document Picture-in-Picture API")}}{{SeeCompatTable}}{{securecontext_header}} @@ -15,21 +15,21 @@ l10n: ## 实例属性 -_从其父级 {{DOMxRef("EventTarget")}} 继承属性。_ +_从其父接口 {{DOMxRef("EventTarget")}} 继承属性。_ - {{domxref("DocumentPictureInPicture.window", "window")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : 返回一个 {{domxref("Window")}} 实例，代表画中画窗口内的浏览上下文。 ## 实例方法 -_从其父级 {{DOMxRef("EventTarget")}} 继承方法。_ +_从其父接口 {{DOMxRef("EventTarget")}} 继承方法。_ - {{domxref("DocumentPictureInPicture.requestWindow", "requestWindow()")}} {{Experimental_Inline}} - : 为当前主浏览环境打开画中画窗口。返回一个 {{jsxref("Promise")}}，其兑现一个 {{domxref("Window")}} 实例，代表画中画窗口内的浏览环境。 ## 事件 -_从其父级 {{DOMxRef("EventTarget")}} 继承事件。_ +_从其父接口 {{DOMxRef("EventTarget")}} 继承事件。_ - {{domxref("DocumentPictureInPicture/enter_event", "enter")}} {{Experimental_Inline}} - : 当画中画窗口成功打开时触发。 From 59b788606ce8aee7bfaed365e71fc4b379b0fb55 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 9 Oct 2024 15:10:28 +0800 Subject: [PATCH 3/5] update --- files/zh-cn/web/api/document_picture-in-picture_api/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/web/api/document_picture-in-picture_api/index.md b/files/zh-cn/web/api/document_picture-in-picture_api/index.md index f5a4a9d27f6990..8d41ed63b5e9c3 100644 --- a/files/zh-cn/web/api/document_picture-in-picture_api/index.md +++ b/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)）。 ## 规范 From 8b4fae7001676c66e306e9a70203fa845aec3ffd Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 9 Oct 2024 15:10:45 +0800 Subject: [PATCH 4/5] Update files/zh-cn/web/api/documentpictureinpicture/index.md Co-authored-by: A1lo --- files/zh-cn/web/api/documentpictureinpicture/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/documentpictureinpicture/index.md b/files/zh-cn/web/api/documentpictureinpicture/index.md index c388cbd83038a2..fdeb3faddb4410 100644 --- a/files/zh-cn/web/api/documentpictureinpicture/index.md +++ b/files/zh-cn/web/api/documentpictureinpicture/index.md @@ -2,7 +2,7 @@ title: DocumentPictureInPicture slug: Web/API/DocumentPictureInPicture l10n: - sourceCommit: bac20b9ed34bf5b6427ba9274c99c1737dc309ff + sourceCommit: 26aaa0b6f92933d915563b1d1210cc46f4ec0e09 --- {{APIRef("Document Picture-in-Picture API")}}{{SeeCompatTable}}{{securecontext_header}} From 5364287ea9375fe733128c217a0a609fa4365c3c Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 9 Oct 2024 15:10:51 +0800 Subject: [PATCH 5/5] Update files/zh-cn/web/api/documentpictureinpicture/index.md Co-authored-by: A1lo --- files/zh-cn/web/api/documentpictureinpicture/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/documentpictureinpicture/index.md b/files/zh-cn/web/api/documentpictureinpicture/index.md index fdeb3faddb4410..11a99b3b0a0f2b 100644 --- a/files/zh-cn/web/api/documentpictureinpicture/index.md +++ b/files/zh-cn/web/api/documentpictureinpicture/index.md @@ -50,7 +50,7 @@ const pipWindow = await window.documentPictureInPicture.requestWindow({ // ... ``` -请参阅 [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)）。 ## 规范