Why video.requestPictureInPicture() works only once?

问题

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:

`if (!myVideo.paused && myVideo.currentTime > 0 
      && !myVideo.ended && !isVideoPIP) {
      console.log('runPip')
      myVideo.requestPictureInPicture()
      .then(()=>{isVideoPIP = true;})
      .catch(e=>console.log(e.message));
    }`

https://codepen.io/Greggg/pen/WBdeJG

Second time I have this error message "Must be handling a user gesture if there isn't already an element in Picture-in-Picture."

回答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.

来源：https://stackoverflow.com/questions/56252108/why-video-requestpictureinpicture-works-only-once

标签

javascript

html

google-chrome

html5-video

picture-in-picture