PictureInPictureWindow

Limited availability

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

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

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

EventTarget PictureInPictureWindow

インスタンスプロパティ

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

PictureInPictureWindow.width 読取専用

浮動動画ウィンドウの幅を指定します。

PictureInPictureWindow.height 読取専用

浮動動画ウィンドウの高さを指定します。

インスタンスメソッド

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

イベント

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

resize

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

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

js
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;
  });
};

仕様書

Specification
Picture-in-Picture
# interface-picture-in-picture-window

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PictureInPictureWindow
height
resize event
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報