图片中的图片和FullScreen在一起- API只能通过用户手势启动。

Question

我在上面放了两段视频，就像这张照片：

​

​

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

1. 视频播放器2将被设置为图片中的和
2. 视频播放器1将设置为全屏。

我可以做全屏或图片，但不能做全屏和图片在一起。错误抛出如下所示：

在'requestFullscreen‘：API上执行’requestFullscreen‘失败，只能通过用户手势启动。 TypeError:全屏错误

我正在使用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')自动触发另一个单击事件。只工作一个(pip或全屏)，但两者都不能一起工作！

我真的很感激你的帮助。

Answer 1

我不确定图片中图片(PiP) API是否是适合这项工作的工具--在这种情况下，全屏和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(/* ... */);
});

下面是一个快速而肮脏的例子，用两个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>