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

Posted 2023-02-19

【中文标题】画中画和全屏 - API 只能由用户手势启动

【英文标题】：Picture in picture and FullScreen together - API can only be initiated by a user gesture

【发布时间】：2020-04-23 20:08:41

【问题描述】：

我正在播放两个视频，就像这张照片一样：

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

视频播放器 2 将设置为画中画和 视频播放器 1 将设置为全屏。

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

无法在“元素”上执行“请求全屏”：API 只能通过用户手势启动。 未捕获（承诺中）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') 自动触发另一个点击事件。仅适用于一个（点子或全屏），但不能同时使用！

非常感谢您的帮助。

【问题讨论】：

奇怪的是，鉴于您在用户调用的点击处理程序中调用该函数，您会收到该错误。代码是在 iframe 中运行，还是在您单独加载的另一个 DOM 中运行？

你用的是哪个 polyfill？

.requestFullscreen() 在承诺中被调用，所以我猜浏览器不会跟踪该代码是否最初是由用户来宾触发的。难道你不能同时请求全屏和画中画，如果另一个失败则反转一个？

@RoryMcCrossan 抱歉，这是一个错字 - 不是 polyfill，w3schools 建议的前缀。 w3schools.com/jsref/met_element_requestfullscreen.asp

@AxelKöhler ，我尝试同时请求两者 - 不起作用。只适用于我首先要求的一个。

【参考方案1】：

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

由于您已经在模拟 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"
      
    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;"
     
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" 
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

【讨论】：

谢谢，问题解决了——现在我可以弄清楚在我的情况下该怎么做。