はじめに
みなさんは、ピクチャーインピクチャーをご存じですか？
動画やビデオ通話系のサービスやアプリではよくみますが、他の用途ではあまりみませんよね！
それもそのはずで、今までのピクチャーインピクチャーは、<video> 要素でのみ使うことができました。
ですが、Chrome 111 以降では、documentPictureInPictureを使うことで、<video> 要素以外の任意の要素をピクチャーインピクチャーさせることができるようになります。
今までできなかった <audio> や <img>のような要素をピクチャーインピクチャーさせることができるようになるので、CDジャケットを表示させながら音楽を再生させたりでき、webサイト上でできることが広がります。
そのためこの記事では、そんな documentPictureInPictureを使ったピクチャーインピクチャーについて紹介します。
ピクチャーインピクチャー（PiP）とは？
現在ピクチャーインピクチャーは、モバイルデバイス等で他のアプリを使用しながら、小さなプレーヤーで動画を視聴できる機能です。
私は、youtubeを見ながら、X(Twitter)を見たり、Qiita記事を読んだり、
Prime Videoを見ながら、俳優・女優について調べたりしています。
動画以外にも、ビデオ通話やZoom会議等においても使われていることがあります。
ピクチャーインピクチャーの実装
今回使う、任意の要素をピクチャーインピクチャーは、以下のフラグを有効化してから確認してください。
chrome://flags/#document-picture-in-picture-api
documentPictureInPicture
まずは、今回実装に使う documentPictureInPicture について解説していきます。
○プロパティ
-
documentPictureInPicture.window- ピクチャーインピクチャーのウィンドウにアクセスするためのプロパティです。
- ウィンドウがなければ
nullを返します。
○メソット
-
documentPictureInPicture.requestWindow(options)- ピクチャーインピクチャーのウィンドウを表示する時に使うメソットです。
- optionsには以下の要素を渡すことができます
-
initialAspectRatio：ウィンドウの縦横比 -
whidth：ウィンドウの幅 -
height：ウィンドウの高さ -
copyStyleSheets： trueを渡すことで、１度だけスタイルを渡すことができる
-
○イベント
-
documentPictureInPicture.onenter- ピクチャーインピクチャーのウィンドウが表示された時のイベント
実装方法
では早速、任意の要素をピクチャーインピクチャーさせていきましょう。
01. HTMLを記載する
<button id="openButton">ピクチャーインピクチャー表示する</button>
<div id="container">
<div id="player">
<!--ピクチャーインピクチャーのウィンドウに入れたい要素を記述する-->
</div>
</div>
id="openButton"は、クリックイベントを取得するために使います。id="container"は、ピクチャーインピクチャーのウィンドウを閉じた時に要素を戻すために使います。id="player"は、ピクチャーインピクチャーのウィンドウに入れる要素です。
02. CSSを記載する
/*ピクチャーインピクチャーのウィンドウに表示させる要素のスタイルを 記載します。*/
#player {
background-color: red;
height: 100px;
width: 100px;
}
※ スタイルが渡っていることがわかるようなにスタイルを調整
03. ピクチャーインピクチャーのウインドウを表示させる
// 1. #openButtonを取得
const OpenButton = window.document.getElementById('openButton')
// 1. クリックイベントを使う
OpenButton.addEventListener('click', async () => {
const player = document.querySelector("#player");
// 2. ピクチャーインピクチャーのウインドウの定義
const pipWindow = await documentPictureInPicture.requestWindow({
width: player.clientWidth,
height: player.clientHeight,
copyStyleSheets: true,
});
// 3. ウインドウに`#player`を追加
pipWindow.document.body.append(player);
});
#openButtonを取得して、クリックされた時のイベントを使います。- ピクチャーインピクチャーのウインドウを定義します
- ウインドウに
#playerを追加します。
04. ピクチャーインピクチャーのウインドウを閉じた時にもとに戻す
const OpenButton = window.document.getElementById('openButton')
OpenButton.addEventListener('click', async () => {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture.requestWindow({
width: player.clientWidth,
height: player.clientHeight,
copyStyleSheets: true,
});
pipWindow.document.body.append(player);
// 以下追加
pipWindow.addEventListener("unload", (event) => {
const playerContainer = document.querySelector("#container");
const pipPlayer = event.target.querySelector("#player");
playerContainer.append(pipPlayer);
});
});
ピクチャーインピクチャーのウインドウがunloadされた時に、#player要素を#container要素に追加する処理を記載する
05. 完成
このようにHTML・CSS・JavaScriptを記載することで、ピクチャーインピクチャーに任意の要素を記入することができます。
See the Pen picture in picture by でぐぅー | Qiita (@sp_degu) on CodePen.
サンプル
どんな要素でも入れることができそうだったので、モンスターボールでも、表示させようかなということで、サンプルを作成しました。
任意の要素をピクチャーインピクチャーに表示させるには、以下のフラグを有効化してから確認してください。
chrome://flags/#document-picture-in-picture-api
See the Pen picture in picture by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、、<video>以外の任意の要素をピクチャーインピクチャーさせることができるようになる方法を紹介しました。
この方法は、まだ、Chrome 111 以降でのみの検証のため、実際に業務等で使えるものではありません。
ですが、このやり方が使えるようになった暁には、ピクチャーインピクチャーをwebサービスやアプリなどがちょこちょこ出てくるでしょう。
楽しみですね...
動画、音楽、ビデオ通話以外の実用的な使い方がまだいまいちわかっていないので、
いいアイディアを思いついたよという方は、ぜひコメントください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。