Picture in picture vide mode has two leaving actions "Close" and "Back to tab"

img

Both of them produce leavepictureinpicture event.

Is there any way how to determine what button was triggered this event?

Event bodies seems to be totally same. But from user point of view I would expect close player when I press "close" and back video when I press "Back to tab"

1 Answers

1
Kaiido On

The difference between both buttons is that the "close" button will pause the video, while the "Back to tab" one will continue the playback.

This is handled by the browser, so you don't really have to detect which button has been clicked, but if ever in the event your video is still playing, then you know they clicked "Back to tab".

if(document.pictureInPictureEnabled) {
  btn.onclick = e => {
    vid.requestPictureInPicture()
  };
  vid.onleavepictureinpicture = e => {
    if(!vid.paused)
      console.log("came Back to Tab");
  };
}
else document.body.textContent = "your browser doesn't Picture in Picture API";
<button id="btn">
enter PIP
</button>
<video src="https://storage.googleapis.com/media-session/caminandes/short.mp4" controls id="vid" muted></video>

However, if the video was paused before they got "Back to tab", then you apparently have no way to know where they did click.