Document PictureInPicture API

Document Picture-in-Picture API Classi エンジニアLT会 前川昌幸 2025.01.31

Picture-In-Picture

Picture-In-Picture

Picture-In-Picture

2種類のPicture-In-Picture API • Picture-In-Picture API • https://developer.mozilla.org/en-US/docs/Web/API/Picture-inPicture_API • 浮動動画ウィンドウ • Document Picture-In-Picture API • https://developer.mozilla.org/en-US/docs/Web/API/ Document_Picture-in-Picture_API • Google Meetで利用されているのはこちら

• https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API
• https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API

2種類のPicture-In-Picture API • Picture-In-Picture API • Firefox以外は利用できる • Document Picture-In-Picture API • デスクトップのChromium系のみ

2種類のPicture-In-Picture API • Picture-In-Picture API • Firefox以外は利用できる • Document Picture-In-Picture API • デスクトップのChromium系のみ

Document Picture-In-Picture API • HTMLを入れるなど、window.openで開くポップアップ的な利用ができる • 軽く動作デモ • https://gist.github.com/maepon/ 85e6dbc9a86adc2e10183ab8c2786bf4

• https://gist.github.com/maepon/85e6dbc9a86adc2e10183ab8c2786bf4

Document Picture-In-Picture API

async function openPip(){
// Picture-In-Pictureを開く
pipWindow = await window.documentPictureInPicture.requestWindow({
width: 300,
height: 200,
});
// Picture-In-PictureにHTMLを挿入
pipWindow.document.body.append(box1);
// 閉じる動作（HTMLを元に戻す）
pipWindow.addEventListener('pagehide', (event) => {
const pinBox = event.target.querySelector('#box-1');
wrapBox.append(pinBox);
});
}

window.addEventListener('blur',windowBlur)
window.addEventListener('focus',windowFocus)
function windowBlur() {
if (!pipWindow || pipWindow.closed){
openPip();
}
}
function windowFocus() {
if (pipWindow || !pipWindow.closed){
closePip();
}
}

Chromeではクリックなどの明示的動作
がない場合は開かないので、左記のコードは
許可をする必要がある。
（Edgeは必要無く開く）

自分で開けないとき
// Picture-In-Pictureを開く
pipWindow = await window.documentPictureInPicture.requestWindow({
width: 300,
height: 200,
});

という感じで受けられない場合

自分で開けないとき
window.documentPictureInPicture.addEventListener('enter', event => {
const pipTarget = event.target;
// ウィンドウへの操作は event.target.window
pipTarget.window.close();
// bodyへの追加などは event.window.document.body
pipTarget.window.document.body.append(foo);
})

イベントの起動もOK

これを調べている理由は……

ここのチャットをなんとかしたくて！

格闘中

ありがとうございました！