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