为什么 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不是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 btw 中似乎是 5s）之后滚动。 您可以尝试在再次滚动之前简单地单击 codepen 页面中的任意位置。