-
- 视频播放器当前位于单独的画中画窗口中。
-
+
视频播放器当前位于单独的画中画窗口中。
```
-## 特征检测
+## 特性检测
要检查是否支持 Document Picture-in-Picture API，你可以测试 `window` 上的 `documentPictureInPicture` 属性是否可用：
@@ -105,7 +105,7 @@ async function togglePictureInPicture() {
仅当以画中画模式显示时，此代码片段才会将文档 `` 的背景变为红色。
-在[我们的演示](https://mdn.github.io/dom-examples/document-picture-in-picture/)中，我们将 `display-mode: picture-in-picture` 值与 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} 媒体功能相结合，以根据用户的配色方案偏好创建仅当应用以画中画模式显示时才应用的明暗配色方案。
+在[我们的演示](https://mdn.github.io/dom-examples/document-picture-in-picture/)中，我们将 `display-mode: picture-in-picture` 值与 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} 媒体特性相结合，以根据用户的配色方案偏好创建仅当应用以画中画模式显示时才应用的明暗配色方案。
```css
@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
@@ -146,7 +146,7 @@ pipWindow.addEventListener("pagehide", (event) => {
});
```
-## 当网站进入画中画模式时监听
+## 监听网站何时进入画中画模式
监听 `DocumentPictureInPicture` 实例上的 {{domxref("DocumentPictureInPicture.enter_event", "enter")}} 事件，了解画中画窗口何时打开。
@@ -155,18 +155,18 @@ pipWindow.addEventListener("pagehide", (event) => {
```js
documentPictureInPicture.addEventListener("enter", (event) => {
const pipWindow = event.window;
- console.log("视频播放器已进入 pip 窗口");
+ console.log("视频播放器已进入画中画窗口");
const pipMuteButton = pipWindow.document.createElement("button");
- pipMuteButton.textContent = "已静音";
+ pipMuteButton.textContent = "静音";
pipMuteButton.addEventListener("click", () => {
const pipVideo = pipWindow.document.querySelector("#video");
if (!pipVideo.muted) {
pipVideo.muted = true;
- pipMuteButton.textContent = "未静音";
+ pipMuteButton.textContent = "取消静音";
} else {
pipVideo.muted = false;
- pipMuteButton.textContent = "已静音";
+ pipMuteButton.textContent = "静音";
}
});
From 855753dd8f87f4f8d3127cc5640a5e47fa12ee51 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Date: Mon, 30 Sep 2024 11:35:34 +0800
Subject: [PATCH 5/5] sync
---
.../using/index.md | 34 +++++++++++++++++++
1 file changed, 34 insertions(+)
diff --git a/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md b/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md
index 47c96f3408cea9..7408b10474b270 100644
--- a/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md
+++ b/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md
@@ -73,6 +73,40 @@ if ("documentPictureInPicture" in window) {
```js
async function togglePictureInPicture() {
+ // 如果已经打开画中画窗口，则提前返回
+ if (window.documentPictureInPicture.window) {
+ return;
+ }
+
+ // 打开画中画窗口。
+ const pipWindow = await window.documentPictureInPicture.requestWindow({
+ width: videoPlayer.clientWidth,
+ height: videoPlayer.clientHeight,
+ });
+
+ // ...
+
+ // 将播放器移至画中画窗口。
+ pipWindow.document.body.append(videoPlayer);
+
+ // 显示一条消息表明它已被移动
+ inPipMessage.style.display = "block";
+}
+```
+
+## 将样式表复制到画中画窗口
+
+要从原始窗口复制所有 CSS 样式表，请循环遍历文档中明确链接或嵌入的所有样式表（通过 {{domxref("Document.styleSheets")}}），然后将其附加到画中画窗口。请注意，这是一次性复制。
+
+```js
+// ...
+
+// 从初始文档复制样式表，以便播放器看起来相同。
+[...document.styleSheets].forEach((styleSheet) => {
+ try {
+ const cssRules = [...styleSheet.cssRules]
+ .map((rule) => rule.cssText)
+ .join("");
const style = document.createElement("style");
style.textContent = cssRules;