为什么Video.RequestPictureInPicture()仅工作一次

Question

我正在尝试通过JavaScript onScroll函数输入和退出视频的PIP模式，我只能进入并退出此模式一次。这是我的代码蛋白：

    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

第二次，我有此错误消息"如果在图片中尚无元素，则必须处理用户手势。"

Answer 1

如果它不起作用，那是因为 scroll不是用户信任事件的一部分。

现在，有时它起作用实际上很奇怪...但是有一个合理的解释。

用户信任的事件通常被认为是活着的一段时间，但最终应该死亡：

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>

所以我想您被解释为仅在第一次滚动上工作的方法实际上是由于某些情况所引起的，在某些情况下，您在滚动后滚动少于用户信任的事件的最大生命时间(在当前的Chrome74中似乎是5s，btw是5s(。您可以在再次滚动之前简单地单击Codepen页面中的任何地方。