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

瀏覽器相容性

另見