Frontend Weekly 2023-08-15 Chrome 116

2023-08-15

Tech

Frontend weekly

/

Chrome

Document Picture-in-Picture API#

Document Picture-in-Picture API は、video 要素のみに適用できる Picture-in-Picture API と異なり、任意の要素を小窓で表示することが出来ます。

1
const button = document.querySelector("#open-button");
2

3
button.addEventListener("click", async () => {
4
  const player = document.querySelector("#player");
5

6
  const pipWindow = await documentPictureInPicture.requestWindow({
7
    // initialAspectRatio: 1,
8
    width: player.width,
9
    height: player.height,
10
  });
11

12
  pipWindow.document.body.append(player);
13
});

Picture-in-Picture API#

Picture-in-Picture API は、video 要素を小窓で表示するための API です。

1
const button = document.querySelector("#open-button");
2
const video = document.querySelector("#video");
3

4
button.addEventListener("click", () => {
5
  video.requestPictureInPicture();
6
});

Picture-in-Picture API との比較#

Document Picture-in-Picture API は、Picture-in-Picture API の拡張ではなく似たような異なる API です。

	Document Picture-in-Picture API	Picture-in-Picture API
対象となる要素	任意の要素	video 要素
Picture-in-Picture を開くメソッド	documentPictureInPicture.requestWindow()	video.requestPictureInPicture()
実行にクリックなどユーザー行動が必須か	必須	必須
iframe 内での実行	不可	不可
同時に開ける数	1 個。個数は Picture-in-Picture API と共有	1 個。個数は Document Picture-in-Picture API と共有
Picture-in-Picture した要素の状態	要素が消える。Picture-in-Picture を閉じても要素は戻らない。	要素は消えず代替表示がされる。picture-in-picture 擬似クラスでスタイルを制御できる。

Document Picture-in-Picture API は、任意の要素ではなく新たな Document を Picture-in-Picture していると考えると理解しやすいと思います。

Document Picture-in-Picture API では勝手に要素が復帰しない#

Picture-in-Picture API の場合と異なり、Document Picture-in-Picture API では Picture-in-Picture された要素は、勝手には戻りません。

次のように Picture-in-Picture の Window の unload イベントをトリガーにして、その Window にある表示した要素を取得し戻すようなコードを書く必要があります。

1
button.addEventListener("click", async () => {
2
  const playerContainer = document.querySelector("#playerContainer");
3
  const player = document.querySelector("#player");
4

5
  const pipWindow = await documentPictureInPicture.requestWindow({
6
    width: player.width,
7
    height: player.height,
8
  });
9

10
  pipWindow.document.body.append(player);
11

12
  pipWindow.addEventListener("unload", (event) => {
13
    const pipPlayer = event.target.querySelector("#player");
14
    playerContainer.append(pipPlayer);
15
  });
16
});

Picture-in-Picture 内に CSS を適用する#

実験的な機能として導入されたときは存在していた copyStyleSheets オプションは削除されています。そのため、手軽に CSS をコピーして持っていくような方法は存在しません。

https://github.com/WICG/document-picture-in-picture/issues/12

削除された copyStyleSheets オプションの挙動を真似したい場合。

1
// const pipWindow = await documentPictureInPicture.requestWindow({
2
//   width: player.width,
3
//   height: player.height,
4
// });
5

6
[...document.styleSheets].forEach((styleSheet) => {
7
  try {
8
    const cssRules = [...styleSheet.cssRules]
9
      .map((rule) => rule.cssText)
10
      .join("");
11
    const style = document.createElement("style");
12

13
    style.textContent = cssRules;
14
    pipWindow.document.head.appendChild(style);
15
  } catch (e) {
16
    const link = document.createElement("link");
17

18
    link.rel = "stylesheet";
19
    link.type = styleSheet.type;
20
    link.media = styleSheet.media;
21
    link.href = styleSheet.href;
22
    pipWindow.document.head.appendChild(link);
23
  }
24
});
25

26
// pipWindow.document.body.append(player);

特に言及されていませんが、個人的には Picture-in-Picture 用のスタイルを別途用意してあげた方が、無駄なスタイルを大量に渡さなく済むため良いように思います。

実装例#

https://stackblitz.com/edit/js-mrokk8?file=index.js

CSS Animation で display と content-visibility が適用可能に#

今までは display や content-visibility を keyframe に書いても適用されず、次のようなコードでは透明になるだけでしたが、これからは display が適用されるようになったため 100%になった段階で要素が消えます。段階的に display や content-visibility が変化するわけではありません。

1
@keyframes fade-out {
2
  100% {
3
    display: none;
4
    opacity: 0;
5
  }
6
}
7
.target {
8
  display: block;
9
  animation: fade-out 2s forwards;
10
}