-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
84 lines (54 loc) · 2 KB
/
index.md
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
---
title: "HTMLVideoElement: enterpictureinpicture event"
short-title: enterpictureinpicture
slug: Web/API/HTMLVideoElement/enterpictureinpicture_event
page-type: web-api-event
browser-compat: api.HTMLVideoElement.enterpictureinpicture_event
---
{{APIRef("Picture-in-Picture API")}}
The `enterpictureinpicture` event is fired when the {{DOMxRef("HTMLVideoElement")}} enters picture-in-picture mode successfully.
This event is not cancelable and does not bubble.
## Syntax
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
```js
addEventListener("enterpictureinpicture", (event) => {});
onenterpictureinpicture = (event) => {};
```
## Event type
A {{domxref("PictureInPictureEvent")}}. Inherits from {{domxref("Event")}}.
{{InheritanceDiagram("PictureInPictureEvent")}}
## Event properties
This interface also inherits properties from its parent {{domxref("Event")}}.
## Examples
These examples add an event listener for the HTMLVideoElement's `enterpictureinpicture` event, then post a message when that event handler has reacted to the event firing.
Using `addEventListener()`:
```js
const video = document.querySelector("#video");
const button = document.querySelector("#button");
function onEnterPip() {
console.log("Picture-in-Picture mode activated!");
}
video.addEventListener("enterpictureinpicture", onEnterPip, false);
button.onclick = () => {
video.requestPictureInPicture();
};
```
Using the `onenterpictureinpicture` event handler property:
```js
const video = document.querySelector("#video");
const button = document.querySelector("#button");
function onEnterPip() {
console.log("Picture-in-Picture mode activated!");
}
video.onenterpictureinpicture = onEnterPip;
button.onclick = () => {
video.requestPictureInPicture();
};
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{domxref("HTMLVideoElement")}}
- {{domxref("Picture-in-Picture_API", "Picture-in-Picture API")}}