文書ピクチャインピクチャ API の使用

<div id="container">
  <p class="in-pip-message">
    動画プレイヤーは、現在独立したピクチャインピクチャウィンドウで実行されています。
  </p>
  <div id="player">
    <video
      src="assets/bigbuckbunny.mp4"
      id="video"
      controls
      width="320"></video>

    <div id="credits">
      <a href="https://peach.blender.org/download/" target="_blank">
        Video by Blender </a
      >;
      <a href="https://peach.blender.org/about/" target="_blank">
        licensed CC-BY 3.0
      </a>
    </div>

    <div id="control-bar">
      <p class="no-picture-in-picture">
        文書ピクチャインピクチャ API は利用できません
      </p>

      <p></p>
    </div>
  </div>
</div>

if ("documentPictureInPicture" in window) {
  document.querySelector(".no-picture-in-picture").remove();

  const togglePipButton = document.createElement("button");
  togglePipButton.textContent = "Toggle Picture-in-Picture";
  togglePipButton.addEventListener("click", togglePictureInPicture);

  document.getElementById("control-bar").appendChild(togglePipButton);
}

async function togglePictureInPicture() {
  // 既に開いているピクチャインピクチャウィンドウがあれば、すぐに戻る
  if (window.documentPictureInPicture.window) {
    return;
  }

  // ピクチャインピクチャウィンドウを開く
  const pipWindow = await window.documentPictureInPicture.requestWindow({
    width: videoPlayer.clientWidth,
    height: videoPlayer.clientHeight,
  });

  // …

  // プレイヤーをピクチャインピクチャウィンドウへ移動する
  pipWindow.document.body.append(videoPlayer);

  // 移動された旨を伝えるメッセージを表示
  inPipMessage.style.display = "block";
}

// …

// プレイヤーが同じ見た目になるよう、初期文書からスタイルシートをコピー
[...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);
  }
});

// …

@media (display-mode: picture-in-picture) {
  body {
    background: red;
  }
}

@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
  body {
    background: antiquewhite;
  }
}

@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
  body {
    background: #333333;
  }

  a {
    color: antiquewhite;
  }
}

inPipMessage.style.display = "none";
playerContainer.append(videoPlayer);
window.documentPictureInPicture.window.close();

pipWindow.addEventListener("pagehide", (event) => {
  inPipMessage.style.display = "none";
  playerContainer.append(videoPlayer);
});

documentPictureInPicture.addEventListener("enter", (event) => {
  const pipWindow = event.window;
  console.log("動画プレーヤーが PIP ウィンドウに入りました");

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

const pipWindow = window.documentPictureInPicture.window;
if (pipWindow) {
  // ピクチャインピクチャウィンドウで再生中の動画の音声をミュート
  const pipVideo = pipWindow.document.querySelector("#video");
  pipVideo.muted = true;
}