为什么 video.requestPictureInPicture() 只能工作一次？答案

【问题标题】：Why video.requestPictureInPicture() works only once?为什么 video.requestPictureInPicture() 只能工作一次？
【发布时间】：2019-10-08 15:55:59
【问题描述】：

我正在尝试通过 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

我第二次收到此错误消息“如果画中画中还没有元素，则必须处理用户手势。”

【问题讨论】：

标签： javascript html google-chrome html5-video picture-in-picture

【解决方案1】：

如果它不起作用，那是因为scroll 不是user-trusted events 的一部分。

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

用户信任的事件通常被认为存在相当长的一段时间，但它们最终应该会消失：

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 中似乎是 5 秒））。您可以尝试在再次滚动之前单击 codepen 页面中的任意位置。

【讨论】：