HTMLVideoElement: requestPictureInPicture() メソッド

Limited availability

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

HTMLVideoElement の requestPictureInPicture() メソッドは、動画をピクチャインピクチャモードで表示するための非同期のリクエストを発行します。

動画がピクチャインピクチャになることは保証されていません。そのモードに入る権限が与えられている場合、返された Promise は解決され、動画は enterpictureinpicture イベントを受け取り、これでピクチャインピクチャになったことを知らせます。

構文

js
requestPictureInPicture()

引数

なし。

返値

Promise で、ユーザーがその浮動ウィンドウのサイズを変更するときに使用することができる PictureInPictureWindow オブジェクトに解決します。

例外

NotSupportedError DOMException

Tこの機能に対応してない場合（ユーザー設定で無効になっている場合や、プラットフォームの制限により無効になっている場合など）に発生します。

SecurityError DOMException

この機能の使用が権限ポリシーによってブロックされた場合。

InvalidStateError DOMException

video 要素の readState が HAVE_NOTHING の場合、video 要素に動画トラックが存在しない場合、または video 要素の disablePictureInPicture 属性が true の場合に発生します。

NotAllowedError DOMException

document.pictureInPictureElement が null で、かつ文書の一時的な有効化がない場合に発生します。

セキュリティ

ユーザーによる一時的な有効化が必要です。この機能が動作するには、ユーザーがページまたは UI 要素を操作する必要があります。

例

この例では、動画がピクチャインピクチャモードになるようにリクエストされ、浮動ウィンドウのリサイズを処理するためのイベントリスナーを設定します。

js
function enterPictureInPicture() {
  videoElement.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.addEventListener(
      "resize",
      () => onPipWindowResize(),
      false,
    );
  });
}

仕様書

Specification
Picture-in-Picture
# request-pip

ブラウザーの互換性

BCD tables only load in the browser

関連情報