DocumentPictureInPictureEvent

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

DocumentPictureInPictureEvent 接口是 Document Picture-in-Picture API 的一部分,它是 enter 事件的事件对象。当画中画窗口打开时,会触发此事件。

Event DocumentPictureInPictureEvent

构造函数

DocumentPictureInPictureEvent() 实验性

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

实例属性

继承其父级 Event 的属性。

window 只读 实验性

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

实例方法

继承其父级 Event 的方法。

示例

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

浏览器兼容性

另见