initial commit

1 files changed, 86 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/pictureinpicturewindow/index.html b/files/zh-cn/web/api/pictureinpicturewindow/index.html
new file mode 100644
index 0000000000..a67dcf8a15
--- /dev/null
+++ b/files/zh-cn/web/api/pictureinpicturewindow/index.html
@@ -0,0 +1,86 @@
+---
+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>