From 5eb693a6806132263cdadb78b3997e7b854b120d Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 20 Sep 2024 08:29:47 +0800 Subject: [PATCH 1/3] [zh-cn]: create the translation of `documentpictureinpictureevent` --- .../documentpictureinpictureevent/index.md | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 files/zh-cn/web/api/documentpictureinpictureevent/index.md diff --git a/files/zh-cn/web/api/documentpictureinpictureevent/index.md b/files/zh-cn/web/api/documentpictureinpictureevent/index.md new file mode 100644 index 00000000000000..ee3070c189b336 --- /dev/null +++ b/files/zh-cn/web/api/documentpictureinpictureevent/index.md @@ -0,0 +1,65 @@ +--- +title: DocumentPictureInPictureEvent +slug: Web/API/DocumentPictureInPictureEvent +l10n: + sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e +--- + +{{APIRef("Document Picture-in-Picture API")}}{{SeeCompatTable}}{{SecureContext_Header}} + +**`DocumentPictureInPictureEvent`** 接口是 {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} 的事件对象，表示当画中画（Picture-in-Picture）窗口打开时触发的 {{domxref("DocumentPictureInPicture/enter_event", "enter")}} 事件。 + +{{InheritanceDiagram}} + +## 构造函数 + +- {{domxref("DocumentPictureInPictureEvent.DocumentPictureInPictureEvent", "DocumentPictureInPictureEvent()")}} {{Experimental_Inline}} + - : 创建一个新的 `DocumentPictureInPictureEvent` 对象实例。 + +## 实例方法 + +_继承自其父类 {{DOMxRef("Event")}} 的方法。_ + +## 实例属性 + +_继承自其父类 {{DOMxRef("Event")}} 的属性。_ + +- {{domxref("DocumentPictureInPictureEvent.window", "window")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 返回一个 {{domxref("Window")}} 实例，表示事件触发时的画中画窗口的浏览上下文。 + +## 示例 + +```js +documentPictureInPicture.addEventListener("enter", (event) => { + const pipWindow = event.window; + console.log("视频播放器已进入画中画窗口"); + + const pipMuteButton = pipWindow.document.createElement("button"); + pipMuteButton.textContent = "静音"; + pipMuteButton.addEventListener("click", () => { + const pipVideo = pipWindow.document.querySelector("#video"); + if (!pipVideo.muted) { + pipVideo.muted = true; + pipMuteButton.textContent = "取消静音"; + } else { + pipVideo.muted = false; + pipMuteButton.textContent = "静音"; + } + }); + + pipWindow.document.body.append(pipMuteButton); +}); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} +- [使用文档画中画 API](/zh-CN/docs/Web/API/Document_Picture-in-Picture_API/Using) From dd7338e2db2efaa5d67f3ddfa9881bb7ed5ce251 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Fri, 20 Sep 2024 19:39:01 +0800 Subject: [PATCH 2/3] Update files/zh-cn/web/api/documentpictureinpictureevent/index.md --- files/zh-cn/web/api/documentpictureinpictureevent/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/documentpictureinpictureevent/index.md b/files/zh-cn/web/api/documentpictureinpictureevent/index.md index ee3070c189b336..d69d89e0a37008 100644 --- a/files/zh-cn/web/api/documentpictureinpictureevent/index.md +++ b/files/zh-cn/web/api/documentpictureinpictureevent/index.md @@ -62,4 +62,4 @@ documentPictureInPicture.addEventListener("enter", (event) => { ## 参见 - {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} -- [使用文档画中画 API](/zh-CN/docs/Web/API/Document_Picture-in-Picture_API/Using) +- [使用 DocumentPictureInPictureEvent API](/zh-CN/docs/Web/API/Document_Picture-in-Picture_API/Using) From 82806437a94f72fae694255292d2a20342bae4cf Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Tue, 24 Sep 2024 09:40:42 +0800 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: A1lo --- .../web/api/documentpictureinpictureevent/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/web/api/documentpictureinpictureevent/index.md b/files/zh-cn/web/api/documentpictureinpictureevent/index.md index d69d89e0a37008..d3246906c00900 100644 --- a/files/zh-cn/web/api/documentpictureinpictureevent/index.md +++ b/files/zh-cn/web/api/documentpictureinpictureevent/index.md @@ -7,7 +7,7 @@ l10n: {{APIRef("Document Picture-in-Picture API")}}{{SeeCompatTable}}{{SecureContext_Header}} -**`DocumentPictureInPictureEvent`** 接口是 {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} 的事件对象，表示当画中画（Picture-in-Picture）窗口打开时触发的 {{domxref("DocumentPictureInPicture/enter_event", "enter")}} 事件。 +**`DocumentPictureInPictureEvent`** 接口是 {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} 的 {{domxref("DocumentPictureInPicture/enter_event", "enter")}} 事件（会在画中画窗口打开时触发）的对象。 {{InheritanceDiagram}} @@ -18,14 +18,14 @@ l10n: ## 实例方法 -_继承自其父类 {{DOMxRef("Event")}} 的方法。_ +_继承其父接口 {{DOMxRef("Event")}} 的方法。_ ## 实例属性 -_继承自其父类 {{DOMxRef("Event")}} 的属性。_ +_继承其父接口 {{DOMxRef("Event")}} 的属性。_ - {{domxref("DocumentPictureInPictureEvent.window", "window")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : 返回一个 {{domxref("Window")}} 实例，表示事件触发时的画中画窗口的浏览上下文。 + - : 返回一个 {{domxref("Window")}} 实例，表示触发事件的 `DocumentPictureInPicture` 窗口的浏览上下文。 ## 示例 @@ -62,4 +62,4 @@ documentPictureInPicture.addEventListener("enter", (event) => { ## 参见 - {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} -- [使用 DocumentPictureInPictureEvent API](/zh-CN/docs/Web/API/Document_Picture-in-Picture_API/Using) +- [使用 Document Picture-in-Picture API](/zh-CN/docs/Web/API/Document_Picture-in-Picture_API/Using)