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
Inherits methods from its parent, Event
.
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.
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) ;
} ) ;