Skip to content

Commit

Permalink
[zh-cn]: create the translation of documentpictureinpictureevent (m…
Browse files Browse the repository at this point in the history
…dn#23699)

Co-authored-by: A1lo <[email protected]>
  • Loading branch information
2 people authored and sora32127 committed Oct 6, 2024
1 parent 275268c commit 46327e7
Showing 1 changed file with 65 additions and 0 deletions.
65 changes: 65 additions & 0 deletions files/zh-cn/web/api/documentpictureinpictureevent/index.md
Original file line number Diff line number Diff line change
@@ -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")}} 的 {{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")}} 实例,表示触发事件的 `DocumentPictureInPicture` 窗口的浏览上下文。

## 示例

```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")}}
- [使用 Document Picture-in-Picture API](/zh-CN/docs/Web/API/Document_Picture-in-Picture_API/Using)

0 comments on commit 46327e7

Please sign in to comment.