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 |
---|---|
Picture-in-Picture API The definition of 'enterpictureinpicture event' in that specification. |
Draft |