ピクチャーインピクチャー (PIP)
ピクチャーインピクチャー (PIP)は、ブラウザ上で小窓で動画視聴できる仕組みです。
例えば、YouTube上で右クリックして、『ピクチャー イン ピクチャー』を選択すると
次のように小窓で動画を再生してくれます。
他のタブを表示したり、ウィンドウを最小化しても再生され続けるため、作業しながらの視聴時に大変助かります。
Document Picture-in-Picture
現在の『ピクチャー イン ピクチャー』はHTMLVideoElementでしか行なえません。そのためYouTubeのプレイヤー操作(シークバー操作やショートカットキーによる早送り/巻き戻し)は出来ません。
現在 任意のHTMLElements を『ピクチャー イン ピクチャー』可能にする「Document Picture-in-Picture Explained」の議論がされいます。
Chrome Canaryですでに動くので試します。
YouTubeで動画を再生しながら、次のスクリプトをデベロッパーツールから実行します。
const player = document.querySelector("#player");
const pipOptions = {
initialAspectRatio: player.clientWidth / player.clientHeight,
copyStyleSheets: true,
};
pipWindow = await documentPictureInPicture.requestWindow(pipOptions);
const playerContainer = document.querySelector("#player");
playerContainer.classList.add("pip-mode");
pipWindow.document.body.append(player);
プレーヤーが『ピクチャー イン ピクチャー』できた (スクショは、タブは切り替えた様子)
