このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
PictureInPictureWindow
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
PictureInPictureWindow インターフェイスは、プログラムにより 浮動動画ウィンドウの width、height、resize イベントを取得できるオブジェクトを表します。
このインターフェイスを持つオブジェクトは、 HTMLVideoElement.requestPictureInPicture() のプロミスの返値を使用して取得します。
インスタンスプロパティ
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;
});
};
仕様書
| 仕様書 |
|---|
| Picture-in-Picture # interface-picture-in-picture-window |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。