blob: a67dcf8a15f30904a9ab9a0e96f1bb321ae2eb88 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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><button></code> and a <code><video></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 => {
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>
|
