Why video.requestPictureInPicture() works only once?

Question

I\'m trying enter and exit PIP mode of video via Javascript onscroll function and I can only once enter and exit this mode. Here\'s my codepen:

Answer 1

If it doesn't work, it's because scroll is not part of the user-trusted events.

Now, that sometimes it works is actually weird... but has a rational explanation.

User trusted events are usually considered alive for quite some time, but they should die eventually:

btn_500ms.onclick = e => trigger_in(500); // works
btn_6s.onclick = e => trigger_in(6000); // fails

function trigger_in(ms) {
  setTimeout(() => {
    video.requestPictureInPicture()
      .then(() => {
        // auto-exit in 1s
        setTimeout(() => {
          document.exitPictureInPicture();
        }, 1000);
      })
      .catch(console.error);
  }, ms);
};

<video id="video" controls="" muted loop autoplay src="https://media.w3.org/2010/05/sintel/trailer.webm"></video>
<button id="btn_500ms">trigger PiP in 500ms</button>
<button id="btn_6s">trigger PiP in 6s</button>

So I guess that what you interpreted as being working only on first scroll was actually caused by some circumstances where you did scroll after less than the max-life-time of a user trusted event (seems to be 5s in current Chrome74 btw). You can try by simply clicking anywhere in your codepen page before scrolling again.