PictureInPictureWindow

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

PictureInPictureWindow インターフェイスは、プログラムにより浮動動画ウィンドウの width、height、resize イベントを取得できるオブジェクトを表します。

このインターフェイスを持つオブジェクトは、 HTMLVideoElement.requestPictureInPicture() のプロミスの返値を使用して取得します。

インスタンスプロパティ

PictureInPictureWindow インターフェイスはプロパティを継承していません。

PictureInPictureWindow.width 読取専用: 浮動動画ウィンドウの幅を指定します。
PictureInPictureWindow.height 読取専用: 浮動動画ウィンドウの高さを指定します。

インスタンスメソッド

PictureInPictureWindow インターフェイスはメソッドを継承していません。

イベント

PictureInPictureWindow インターフェイスはイベントを継承していません。

resize: 浮動動画ウィンドウのサイズ変更時に PictureInPictureWindow に送られます。

例

<button> と <video> が指定されており、ボタンをクリックすると動画がピクチャインピクチャモードになります。次に、浮動動画ウィンドウの寸法をコンソールに出力するイベントを取り付けます。

const button = document.querySelector("button"); const video = document.querySelector("video"); function printPipWindowDimensions(evt) { const pipWindow = evt.target; console.log( `浮動動画ウィンドウの大きさ: ${pipWindow.width}x${pipWindow.height}px`, ); // 表示例: // 浮動動画ウィンドウの大きさ: 640x360px } button.onclick = () => { video.requestPictureInPicture().then((pictureInPictureWindow) => { pictureInPictureWindow.onresize = printPipWindowDimensions; }); };