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

メモ: 実際に動作するデモについては、Document Picture-in-Picture API Example の例をご覧ください(ソースコードの全文も参照してください)。

<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.requestWindow() を呼び出してピクチャインピクチャウィンドウを開く際、オプションオブジェクト内で disallowReturnToOpener ヒントを true に設定することで、ブラウザーが提供する UI の閉じるボタンを非表示にすることができます。

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

メモ: DocumentPictureInPictureEvent イベントオブジェクトには、ピクチャインピクチャウィンドウにアクセスするための window プロパティが含まれています。

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

MDN の改良に協力

このページは MDN の貢献者によって 2026年6月20日 に最終更新されました。