为什么video.requestPictureInPicture()只工作一次? [英] Why video.requestPictureInPicture() works only once?

问题描述

我正在尝试通过Javascript滚动功能进入和退出视频的PIP模式，但一次只能进入和退出此模式. 这是我的codepen:

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

推荐答案

如果不起作用，是因为scroll不属于

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>

所以我想您解释为仅在第一次滚动上起作用实际上是由某些情况造成的，即您在少于用户信任事件的最大生存时间后才进行滚动(在当前的Chrome74btw中似乎为5s) ).您可以尝试单击代码笔页面中的任意位置，然后再次滚动.

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.

这篇关于为什么video.requestPictureInPicture()只工作一次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！