Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

Picture-in-picture (video)

exitPictureInPicture() は Document インターフェイスのメソッドで、この文書に含まれ、現在浮動している動画をピクチャインピクチャモードから外し、画面の前回状態に戻すようリクエストします。これは通常、 HTMLVideoElement.requestPictureInPicture() を前回呼び出したときの効果を逆転させます。

埋め込み

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:picture-in-picture
110
110
13.1
110
13.4
HTML 属性
disablepictureinpicture
69
79
122
13.1
105
13.4
DOM API
exitPictureInPicture

exitPictureInPicture() は Document インターフェイスのメソッドで、この文書に含まれ、現在浮動している動画をピクチャインピクチャモードから外し、画面の前回状態に戻すようリクエストします。これは通常、 HTMLVideoElement.requestPictureInPicture() を前回呼び出したときの効果を逆転させます。
69
79
13.1
105
13.4
pictureInPictureElement

pictureInPictureElement は Document インターフェイスの読み取り専用プロパティで、 この文書内のピクチャインピクチャモードで現在表示されている を返します。ピクチャインピクチャモードが現在使用されていない場合は null を返します。
69
79
13.1
105
13.4
pictureInPictureEnabled

pictureInPictureEnabled は Document インターフェイスの読み取り専用プロパティで、ピクチャインピクチャモードが利用できるかどうかを示します。
69
79
13.1
105
13.4
disablePictureInPicture

HTMLVideoElement の disablePictureInPicture プロパティは HTML の属性を反映し、現在の要素でピクチャインピクチャ機能が無効になっているかどうかを示します。
69
79
122
13.1
105
13.4
enterpictureinpicture_event

enterpictureinpicture イベントは、HTMLVideoElement がピクチャインピクチャモードに入ることに成功した場合に発行されます。
69
79
13.1
105
13.4
leavepictureinpicture_event

leavepictureinpicture イベントは、HTMLVideoElement がピクチャインピクチャモードを終了することに成功した場合に発行されます。
69
79
13.1
105
13.4
requestPictureInPicture

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

PictureInPictureEvent インターフェイスはピクチャインピクチャに関するイベント、例えば HTMLVideoElement/enterpictureinpictureevent、HTMLVideoElement/leavepictureinpictureevent、PictureInPictureWindow/resize_event を表します。
85
85
16
105
16
PictureInPictureEvent

PictureInPictureEvent() コンストラクターは、新しい PictureInPictureEvent オブジェクトをオプションの EventTarget と共に作成して返します。 イベントに入力と出力の両方がある場合、relatedTarget 値には他にも対象とするものを設定する必要があります。
85
85
16
105
16
pictureInPictureWindow

PictureInPictureEvent インターフェースの読み取り専用の pictureInPictureWindow プロパティは、イベントが関連する PictureInPictureWindow を返します。
69
79
13.1
105
13.4
PictureInPictureWindow

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

PictureInPictureWindow の読み取り専用プロパティである height は、浮動動画ウィンドウの高さをピクセル単位で返します。
69
79
13.1
105
13.4
resize_event

resize イベントは、浮動動画ウィンドウのサイズが変更されたときに発行されます。
69
79
13.1
105
13.4
width

PictureInPictureWindow の読み取り専用プロパティである width は、浮動動画ウィンドウの幅をピクセル単位で返します。
69
79
13.1
105
13.4
pictureInPictureElement

pictureInPictureElement は ShadowRoot インターフェイスの読み取り専用プロパティで、このシャドウツリー内で現在、ピクチャインピクチャモードで表示されている要素 (Element) を返します。現在、ピクチャインピクチャモードが使用されていない場合は null を返します。
69
79
13.1
105
13.4
CSS @ ルール
display-mode.picture-in-picture
実験的

ピクチャー・イン・ピクチャー`値
123
123
Preview
その他
html.elements.iframe.allow.picture-in-picture
実験的
69
79
105
http.headers.Permissions-Policy.picture-in-picture
実験的

HTTP の Permissions-Policy ヘッダーにおける picture-in-picture ディレクティブは、現在の文書で動画をPicture-in-Picture APIモードで再生することを許可するかどうかを制御します。
88
88
105
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • この属性が設定されると、ピクチャー イン ピクチャー (PiP) を無効にするオーバーレイ ボタンが非表示になりますが、ユーザーは PiP を有効にできます。
削除済み
  • このバージョンで機能が削除されました (122)
注釈 4件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • このプロパティが `true` に設定されている場合、ピクチャー・イン・ピクチャー（PiP）を無効にするオーバーレイ・ボタンは非表示になりますが、ユーザーはPiPを有効にすることができます。
  • このプロパティは未定義であるが、値が設定されている場合は効果がある。
削除済み
  • このバージョンで機能が削除されました (122)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (85)
対応条件
  • 以前は別名で対応していました: EnterPictureInPictureEvent (69)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (85)
対応条件
  • 以前は別名で対応していました: EnterPictureInPictureEvent (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: EnterPictureInPictureEvent (13.1)
注釈 1件
対応条件
  • 以前は別名で対応していました: EnterPictureInPictureEvent (13.4)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (85)
対応条件
  • 以前は別名で対応していました: EnterPictureInPictureEvent (69)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (85)
対応条件
  • 以前は別名で対応していました: EnterPictureInPictureEvent (79)
注釈 1件
対応条件
  • 以前は別名で対応していました: EnterPictureInPictureEvent (13.1)
注釈 1件
対応条件
  • 以前は別名で対応していました: EnterPictureInPictureEvent (13.4)

基本構文

JAVASCRIPT 
const video = document.querySelector('video');
// Start PiP mode
await video.requestPictureInPicture();
// End PiP mode
await document.exitPictureInPicture();

実務での使いどころ

  • Picture-in-picture (video) の活用

    exitPictureInPicture() は Document インターフェイスのメソッドで、この文書に含まれ、現在浮動している動画をピクチャインピクチャモードから外し、画面の前回状態に戻すようリクエストします。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク