javascript - Why video.requestPictureInPicture() works only once? - Stack Overflow

admin管理员组

文章数量:1333442

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))
    }

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

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."

• javascript
• html
• google-chrome
• html5-video
• picture-in-picture

Share Follow edited Dec 4, 2020 at 15:46 caesarsol 2,12311 gold badge2020 silver badges2222 bronze badges asked May 22, 2019 at 8:08 GrzMazGrzMaz 39111 gold badge44 silver badges44 bronze badges 1

• Any updates or workaround on this? – Buze Commented Feb 5, 2022 at 11:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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/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.

本文标签： javascriptWhy videorequestPictureInPicture() works only onceStack Overflow