DocumentPictureInPictureEvent

可用性有限

此功能并非基线功能，因为它在一些最广泛使用的浏览器中无法正常工作。

实验性： 这是一个 实验性技术
在生产环境中使用此功能前，请仔细查看 浏览器兼容性表格。

安全上下文：此功能仅在 安全上下文（HTTPS）中可用，并且在某些或所有 支持的浏览器 中可用。

DocumentPictureInPictureEvent 接口是 文档画中画 API 的事件对象，用于 enter 事件，该事件在打开画中画窗口时触发。

Event DocumentPictureInPictureEvent

构造函数

DocumentPictureInPictureEvent()

创建一个新的 DocumentPictureInPictureEvent 对象实例。

实例方法

继承其父级 Event 的方法。

实例属性

继承其父级 Event 的属性。

window 只读

返回一个 Window 实例，表示触发事件的 DocumentPictureInPicture 窗口内的浏览上下文。

示例

js
documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
  console.log("Video player has entered the pip window");

  const pipMuteButton = pipWindow.document.createElement("button");
  pipMuteButton.textContent = "Mute";
  pipMuteButton.addEventListener("click", () => {
    const pipVideo = pipWindow.document.querySelector("#video");
    if (!pipVideo.muted) {
      pipVideo.muted = true;
      pipMuteButton.textContent = "Unmute";
    } else {
      pipVideo.muted = false;
      pipMuteButton.textContent = "Mute";
    }
  });

  pipWindow.document.body.append(pipMuteButton);
});

规范

规范
文档画中画
# documentpictureinpictureevent

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅