Document Picture-in-Picture API を試してみる
目次
概要
任意のHTMLコンテンツを別窓で最前面に配置できる Document Picture-in-Picture API を試してみた。
Document Picture-in-Picture API とは
Document Picture-in-Picture API を使用すると、任意の HTML コンテンツを配置できる常に最前面のウィンドウを開くことができます。これは、HTML の
<video>要素のみをピクチャー イン ピクチャー ウィンドウに配置できるようにする既存の<video>用 Picture-in-Picture API を拡張します。
馴染みのある例としては、Google Meet の通話中に別タブに切り替えた際に配置される画面ですね。
対応ブラウザは Chrome, Edge です。
Can I use…
デモ
所感など
- デモでは動画と見出し、テキストをピクチャーインピクチャーに配置してみた
- スタイルシートのコピーなど結構泥臭くやるんだなという印象
- ピクチャーインピクチャーのみ適用するスタイルは
@media all and (display-mode: picture-in-picture) {}で定義できる - これといって使い所は思いつかないが、Meetで使われているAPIがどのような感じかはざっくり知れた