为什么video.requestPictureInPicture()只工作一次?

时间:2019-05-22 08:08:52

标签: javascript html google-chrome html5-video

我正在尝试通过Javascript滚动功能进入和退出视频的PIP模式,但只能进入和退出此模式一次。 这是我的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

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

1 个答案:

答案 0 :(得分:0)

如果它不起作用,那是因为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>

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