---
title: PictureInPictureWindow
slug: Web/API/PictureInPictureWindow
translation_of: Web/API/PictureInPictureWindow
---
<div>{{APIRef("Picture-in-Picture API")}}</div>

<p><code><strong>PictureInPictureWindow</strong></code>接口是一个对象，它可以通过编程的方式获得浮动视频窗口的宽度和高度，并调整浮动视频窗口的大小。</p>

<p>使用{{domxref("HTMLVideoElement.requestPictureInPicture()")}}返回一个具有此接口的promise值</p>

<h2 id="属性">属性</h2>

<p><em> <code>PictureInPictureWindow</code> 接口不继承任何属性。</em></p>

<dl>
 <dt>{{domxref("PictureInPictureWindow.width")}} {{ReadOnlyInline}}</dt>
 <dd>获取浮动视频窗宽度。</dd>
 <dt>{{domxref("PictureInPictureWindow.height")}} {{ReadOnlyInline}}</dt>
 <dd>获取浮动视频窗高度。</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>The <code>PictureInPictureWindow</code> interface doesn't inherit any methods.</em></p>

<h2 id="Events">Events</h2>

<p><em><em>The <code>PictureInPictureWindow</code> interface doesn't inherit any events.</em></em></p>

<dl>
 <dt>{{domxref("PictureInPictureWindow.resize_event", "PictureInPictureWindow.resize")}}</dt>
 <dd>Sent to a {{DOMxRef("PictureInPictureWindow")}} when the floating video window is resized. The associated event handler is {{domxref("PictureInPictureWindow.onresize")}}.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>Given a <code>&lt;button&gt;</code> and a <code>&lt;video&gt;</code>, clicking the button will make the video enter the picture-in-picture mode; we then attach an event to print the floating video window dimensions to the console.</p>

<pre class="brush: js notranslate">const button = document.querySelector("button");
const video = document.querySelector("video");

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(`The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`);
  // will print:
  // The floating window dimensions are: 640x360px
}

button.onclick = function() {
  video.requestPictureInPicture().then(pictureInPictureWindow =&gt; {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Picture-in-Picture', '#pictureinpicturewindow')}}</td>
   <td>{{Spec2('Picture-in-Picture')}}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.PictureInPictureWindow")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{DOMxRef("Picture-in-Picture_API")}}</li>
</ul>