我正在运行两个视频,如下图所示:
有一个名为“进入全屏”的按钮。当有人点击该按钮时,我想做两件事。
- 视频播放器 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!
非常感谢您的帮助。
最佳答案
我不确定 picture-in-picture (PiP) API 是否是完成这项工作的正确工具 - 在这种情况下,全屏和画中画行为似乎是相互排斥的。
由于您已经在模拟画中画行为(如图所示),因此您应该能够在全屏显示时采取相同的方法。
不要尝试使各个视频元素全屏/画中画,而是使两个视频的单个公共(public)父元素全屏。然后,您可以将小视频放置在大视频之上(就像您已经在做的那样)以提供画中画效果。
<!-- 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>
关于javascript - 画中画和全屏一起 - API 只能通过用户手势启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59609434/