<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
<button id="pipButton">Open Picture-in-Picture window</button>
開啟子母畫面視窗
當使用者點選按鈕開啟空白的 Picture-in-Picture 視窗時，以下 JavaScript 會呼叫 documentPictureInPicture.requestWindow()。傳回的 promise 會以 Picture-in-Picture 視窗 JavaScript 物件解析。使用 append() 將影片播放器移至該視窗。
pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");
  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();
  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
設定子母畫面視窗的大小
如要設定子母畫面視窗的大小，請將 documentPictureInPicture.requestWindow() 的 width 和 height 選項設為所需的子母畫面視窗大小。如果選項值過大或過小，無法符合使用者友善的視窗大小，Chrome 可能會進行夾持。
pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");
  // Open a Picture-in-Picture window whose size is
  // the same as the player's.
  const pipWindow = await documentPictureInPicture.requestWindow({
    width: player.clientWidth,
    height: player.clientHeight,
  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
隱藏子母畫面視窗的「返回分頁」按鈕
如要隱藏讓使用者返回開啟分頁的按鈕，請將 documentPictureInPicture.requestWindow() 的 disallowReturnToOpener 選項設為 true。
pipButton.addEventListener("click", async () => {
  // Open a Picture-in-Picture window which hides the "back to tab" button.
  const pipWindow = await documentPictureInPicture.requestWindow({
    disallowReturnToOpener: true,
以預設位置和大小開啟子母畫面視窗
如要避免重複使用先前子母畫面視窗的位置或大小，請將 documentPictureInPicture.requestWindow() 的 preferInitialWindowPlacement 選項設為 true。
pipButton.addEventListener("click", async () => {
  // Open a Picture-in-Picture window in its default position / size.
  const pipWindow = await documentPictureInPicture.requestWindow({
    preferInitialWindowPlacement: true,
將樣式表複製到子母畫面視窗
如要從來源視窗複製所有 CSS 樣式表，請循環處理 styleSheets 明確連結至或嵌入文件的內容，並附加至子母畫面視窗。請注意，這是一次性備份。
pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");
  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();
  // Copy style sheets over from the initial document




    

  // so that the player looks the same.
  [...document.styleSheets].forEach((styleSheet) => {
    try {
      const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
      const style = document.createElement('style');
      style.textContent = cssRules;
      pipWindow.document.head.appendChild(style);
    } catch (e) {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.type = styleSheet.type;
      link.media = styleSheet.media;
      link.href = styleSheet.href;
      pipWindow.document.head.appendChild(link);
  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
處理子母畫面視窗關閉時的情況
監聽視窗 "pagehide" 事件，瞭解子母畫面視窗何時關閉 (可能是網站啟動或使用者手動關閉)。事件處理常式是將元素從子母畫面視窗中取出的理想位置，如下所示。
pipButton.addEventListener("click", async () => {
  const player = document.querySelector("#player");
  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();
  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
  // Move the player back when the Picture-in-Picture window closes.
  pipWindow.addEventListener("pagehide", (event) => {
    const playerContainer = document.querySelector("#playerContainer");
    const pipPlayer = event.target.querySelector("#player");
    playerContainer.append(pipPlayer);
使用 close() 方法，以程式輔助方式關閉子母畫面視窗。
// Close the Picture-in-Picture window programmatically. 
// The "pagehide" event will fire normally.
pipWindow.close();
偵測網站進入子母畫面模式
監聽 documentPictureInPicture 上的 "enter" 事件，瞭解何時開啟子母畫面視窗。此事件包含 window 物件，可存取子母畫面視窗。
documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
存取子母畫面視窗中的元素
您可以透過 documentPictureInPicture.requestWindow() 傳回的物件，或使用 documentPictureInPicture.window 存取子母畫面視窗中的元素，如以下所示。
const pipWindow = documentPictureInPicture.window;
if (pipWindow) {
  // Mute video playing in the Picture-in-Picture window.
  const pipVideo = pipWindow.document.querySelector("#video");
  pipVideo.muted = true;
處理子母畫面視窗的事件
建立按鈕和控制項，並回應使用者的輸入事件 (例如 "click")，就像在 JavaScript 中通常會做的那樣。
// Add a "mute" button to the Picture-in-Picture window.
const pipMuteButton = pipWindow.document.createElement("button");
pipMuteButton.textContent = "Mute";
pipMuteButton.addEventListener("click", () => { 
  const pipVideo = pipWindow.document.querySelector("#video");
  pipVideo.muted = true;
pipWindow.document.body.append(pipMuteButton);
調整子母畫面視窗大小
使用 resizeBy() 和 resizeTo() 視窗方法，調整子母畫面視窗的大小。這兩種方法都需要使用者手勢。
const resizeButton = pipWindow.document.createElement('button');
resizeButton.textContent = 'Resize';
resizeButton.addEventListener('click', () => {
  // Expand the Picture-in-Picture window's width by 20px and height by 30px.
  pipWindow.resizeBy(20, 30);
pipWindow.document.body.append(resizeButton);

將焦點移至開啟者視窗
使用 focus() 視窗方法，從子母畫面視窗聚焦開啟者視窗。這個方法需要使用者手勢。
const returnToTabButton = pipWindow.document.createElement("button");
returnToTabButton.textContent = "Return to opener tab";
returnToTabButton.addEventListener("click", () => {
  window.focus();
pipWindow.document.body.append(returnToTabButton);

CSS 子母畫面顯示模式
使用 CSS picture-in-picture 顯示模式編寫特定 CSS 規則，這些規則只會在 (部分) 網頁應用程式以分割畫面模式顯示時套用。
@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  h1 {
    font-size: 0.8em;

如要檢查是否支援 Document Picture-in-Picture API，請使用：
if ('documentPictureInPicture' in window) {
  // The Document Picture-in-Picture API is supported.
VideoJS 播放器
您可以試用 Document Picture-in-Picture API VideoJS 播放器示範。請務必查看原始碼。
  
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
  
上次更新時間：2024-09-10 (世界標準時間)。
      [[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2024-09-10 (世界標準時間)。"],[],[]]