画中画和全屏一起 - API 只能由用户手势启动

Question

我是运行两个视频叠在一起，就像这张照片：

有一个名为 'Enter FullScreen' 的按钮。当有人点击那个按钮时，我想做两件事。

Video Player 2 将被设置为画中画并且
视频播放器 1 将被设置为全屏。

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

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
Uncaught (in promise) TypeError: fullscreen error

我正在使用 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(/* ... */);
  })
});

更新：2020 年 1 月 7 日： 我尝试同时请求两者，但它也不起作用。它只适用于我首先请求的一个。

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

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

在这种情况下，只有 pip 有效，全屏请求会抛出错误。如果我先请求全屏，则只有全屏有效 - pip 会抛出错误。

I tried with jQuery trigger('click') for automatic triggering another click event along with one. Works for only one(pip or fullscreen), BUT DOESN'T WORK BOTH TOGETHER!

非常感谢您的帮助。

Answer 1

我不确定 picture-in-picture (PiP) API 是否适合这项工作 - 全屏和画中画行为在这种情况下似乎是相互排斥的。

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

与其尝试制作单独的视频元素 fullscreen/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 视频 "picture-in-picture" 的简单示例：

<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>

画中画和全屏一起 - API 只能由用户手势启动

Picture in picture and FullScreen together - API can only be initiated by a user gesture

html

javascript

jquery

picture-in-picture