The enterpictureinpicture event is fired when the HTMLVideoElement enters picture-in-picture mode successfully.
| Bubbles | No |
| Cancelable | No |
| Interface | PictureInPictureEvent
|
| Target | HTMLVideoElement
|
| Default Action | None |
| Event handler property | HTMLVideoElement.onenterpictureinpicture
|
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():
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 = function() => {
video.requestPictureInPicture();
}Using the onenterpictureinpicture event handler property:
const video = document.querySelector('#video');
const button = document.querySelector('#button');
function onEnterPip() {
console.log("Picture-in-Picture mode activated!");
}
video.onenterpictureinpicture = onEnterPip;
button.onclick = function() => {
video.requestPictureInPicture();
}Specifications
| Specification | Status |
| UnknownThe definition of 'enterpictureinpicture event' in that specification. | Unknown |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "api.HTMLVideoElement.enterpictureinpicture_event" (depth: 1) to the MDN compatibility data repository.
See Also
HTMLVideoElement: enterpictureinpicture event by Mozilla Contributors is licensed under CC-BY-SA 2.5.
