DocumentPictureInPicture：进入事件

有限可用性

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

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

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

当画中画窗口成功打开时，DocumentPictureInPicture 接口的 enter 事件将被触发。

语法

在像 addEventListener() 这样的方法中使用事件名称，或者设置事件处理程序属性。

js
addEventListener("enter", (event) => {});

onenter = (event) => {};

事件类型

一个 DocumentPictureInPictureEvent.

示例

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);
});

规范

规范
Document Picture-in-Picture
# dom-documentpictureinpicture-onenter

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见