Javascript 画中画和全屏-API只能通过用户手势启动

我正在运行两个视频，一个接一个，如下图所示：

有一个名为“进入全屏”的按钮。当有人点击那个按钮时，我想做两件事

视频播放器2将设置为画中画和

视频播放器1将设置为全屏

我可以做全屏或画中画，但不能同时做全屏和画中画。错误抛出如下：

未能在“元素”上执行“requestFullscreen”：只能通过用户手势启动API。
未捕获（承诺中）类型错误：全屏错误

我正在使用jQuery，下面是我的示例代码：

$('.enter-full-screen').click(event => {
  event.stopImmediatePropagation();
  event.stopPropagation();

  let pipResponse = $('#video-player-2')[0].requestPictueInPicture();

  pipResponse.then(() => {
    $('#video-player-1')[0].requestFullscreen() // Note: I am using a browser prefixes
      .then(/* ... */)
      .catch(/* ... */);
  })
});

更新：07.01.2020:我同时尝试了两个请求，但也不起作用。它只适用于我首先要求的一个

let pipResponse = $('#video-player-2')[0].requestPictueInPicture();
let fullscreenResponse = $('#video-player-1')[0].requestFullscreen();

Promise.all([pipResponse, fullscreenResponse])
    .then(/* code */)
    .catch(/* code */);

在这种情况下，只有pip工作，全屏请求抛出错误。如果我先请求全屏显示，那么只有全屏显示可以工作——pip抛出一个错误

我尝试使用jQuery

trigger（'click'）

自动触发另一个click事件。只适用于一种（pip或全屏），但不能同时适用于两种情况

我真的很感谢您的帮助。

我不确定是否适合这项工作-在这种情况下，全屏和PiP行为似乎是相互排斥的

因为您已经在模拟PiP行为（如图所示），所以在全屏显示时应该能够采用相同的方法

不要试图使单个视频元素全屏显示/PiP，而是使两个视频的单个公共父元素全屏显示。然后，您可以将小视频放在大视频的顶部（正如您已经做的那样），以提供画中画的效果

<!-- 1. Give the video players a common ancestor -->
<div id="video-group">
    <div id="video-player-1">...</div>
    <div id="video-player-2">...</div>
</div>


$('.enter-full-screen').click(event => {
    event.stopImmediatePropagation();
    event.stopPropagation();

    // 2. Make the ancestor element fullscreen, not the videos themselves
    $('#video-group')[0].requestFullscreen()
        .then(/* ... */)
        .catch(/* ... */);
});

...
...
$（'.输入全屏'）。单击（事件=>{
事件。stopImmediatePropagation（）；
event.stopPropagation（）；
//2.让祖先元素全屏显示，而不是视频本身
$（“#视频组”）[0]。请求全屏（）
.然后（/*…*/）
.捕获（/*…*/）；
});

下面是一个快速而肮脏的示例，使用两个YouTube视频执行“画中画”：

<button type="button"
    onclick="document.querySelector('#video-group').requestFullscreen();">
    Enter fullscreen
</button>

<div id="video-group">
    <iframe style="position: absolute"
    width="100%" height="100%" 
    src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    <iframe style="position: absolute; bottom: 0; right: 0;"
    width="560" height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" 
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

全屏进入

奇怪的是，如果您在用户调用的单击处理程序中调用函数，就会出现该错误。代码是在iframe中运行的，还是在单独加载的另一个DOM中运行的？使用哪种多边形填充？

。requestFullscreen（）

是在承诺中调用的，因此我猜浏览器不会跟踪该代码最初是否由用户guesture触发。你不能同时请求全屏和画中画，如果另一个失败，就将其中一个反转吗？@Rorymcrossan抱歉，这是一个拼写错误，而不是像W3学校建议的那样使用前缀@AxelKöhler，我尝试同时请求这两个请求-不起作用。只有我首先要求的一个有效。谢谢，问题解决了-现在我可以知道在我的情况下该怎么做了。