DocumentPictureInPictureEvent
The DocumentPictureInPictureEvent interface of the Document Picture-in-Picture API is the event object for the enter event, which fires when the Picture-in-Picture window is opened.
Event
DocumentPictureInPictureEvent
Constructor
DocumentPictureInPictureEvent() Experimental
Creates a new DocumentPictureInPictureEvent object instance.
Instance methods
Inherits methods from its parent, Event .
Instance properties
Inherits properties from its parent, Event .
window Read only Experimental
Returns a Window instance representing the browsing context inside the DocumentPictureInPicture window the event was fired on.
Examples
documentPictureInPicture. addEventListener ( "enter" , ( event ) => {
const pipWindow = event. window;
console. log ( "Video player has entered the pip window" ) ;
const pipMuteButton = pipWindow. document. createElement ( "button" ) ;
pipMuteButton. textContent = "Mute" ;
pipMuteButton. addEventListener ( "click" , ( ) => {
const pipVideo = pipWindow. document. querySelector ( "#video" ) ;
if ( ! pipVideo. muted) {
pipVideo. muted = true ;
pipMuteButton. textContent = "Unmute" ;
} else {
pipVideo. muted = false ;
pipMuteButton. textContent = "Mute" ;
}
} ) ;
pipWindow. document. body. append ( pipMuteButton) ;
} ) ;
Specifications
Browser compatibility
Desktop
Mobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Internet
DocumentPictureInPictureEvent
116
116
No
No
102
No
No
No
No
No
No
No
DocumentPictureInPictureEvent
116
116
No
No
102
No
No
No
No
No
No
No
window
116
116
No
No
102
No
No
No
No
No
No
No
See also