问题描述
在我的 Ionic 应用程序上旋转设备时,我试图以全屏方式呈现视频。我使用 this plugin 来捕捉设备旋转和 FullScreen API。
window.screen.orientation.addEventListener("change",function () {
if (window.screen.orientation.type.startsWith("landscape") && !document.fullscreenElement) {
try { container.requestFullscreen();
} catch (err) {...); }
} else if ( window.screen.orientation.type.startsWith("portrait") && document.fullscreenElement )
{ try { document.exitFullscreen(); } catch (err) { ... } } }); });
如果我在旋转设备之前触摸视频,这可以正常工作,但如果我不触摸它,则会出现此错误
消息:无法在“元素”上执行“requestFullscreen”:API 只能 由用户手势启动。
根据 MDN 这应该可以工作。 我也试过“window.addEventListener(“orientationchange”,...”但它看起来没有改变。我错过了什么吗?
解决方法
错误告诉您,除非用户实际点击“全屏查看”按钮,否则您无法全屏播放视频。
您可以使用像 VideoJS 这样的视频播放器并向播放器添加 CSS 样式,使其看起来就像设备旋转时视频处于“全屏”模式一样,但它实际上只覆盖了 HTML 文档。
css 的起点是:
#video-js-player {
position: absolute;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
}