DocumentPictureInPicture

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

安全上下文: 此功能僅在安全上下文(HTTPS)中可用,且支援此功能的瀏覽器數量有限。

DocumentPictureInPicture 介面是 Document Picture-in-Picture API 的入口點,用於建立和管理畫中畫視窗。

可以透過 Window.documentPictureInPicture 屬性訪問它。

EventTarget DocumentPictureInPicture

例項屬性

繼承其父級 EventTarget 的屬性。

window 只讀 實驗性

返回一個 Window 例項,代表畫中畫視窗內的瀏覽上下文。

例項方法

繼承其父級 EventTarget 的方法。

requestWindow() 實驗性

開啟當前主瀏覽上下文的畫中畫視窗。返回一個 Promise,該 Promise 會以一個 Window 例項 fulfilled,該例項代表畫中畫視窗內的瀏覽上下文。

事件

繼承其父級 EventTarget 的事件。

enter 實驗性

畫中畫視窗成功開啟時觸發。

示例

js
const videoPlayer = document.getElementById("player");

// …

// Open a Picture-in-Picture window.
const pipWindow = await window.documentPictureInPicture.requestWindow({
  width: videoPlayer.clientWidth,
  height: videoPlayer.clientHeight,
});

// …

有關完整的可用演示,請參閱 Document Picture-in-Picture API 示例(也可檢視完整的 原始碼)。

規範

規範
文件畫中畫規範
# documentpictureinpicture

瀏覽器相容性

另見