时间戳

首页 > 解决方案 > 为什么 video.requestPictureInPicture() 只能工作一次？

javascript - 为什么 video.requestPictureInPicture() 只能工作一次？

问题描述

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

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

标签： javascripthtmlgoogle-chromehtml5-videopicture-in-picture

解决方案

如果它不起作用，那是因为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 中似乎是 5 秒）。您可以尝试在再次滚动之前单击 codepen 页面中的任意位置。

推荐阅读