旋转设备时如何全屏渲染视频答案

【问题标题】：how you can render a video in fullscreen when rotating the device旋转设备时如何全屏渲染视频
【发布时间】：2021-06-09 09:24:53
【问题描述】：

在我的 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) { ... } } }); });

如果我在旋转设备之前触摸视频，这可以正常工作，但如果我不触摸它，我会收到此错误

消息：无法在“元素”上执行“请求全屏”：API 只能由用户手势启动。

根据MDN 这应该可以工作。我也尝试过“window.addEventListener("orientationchange",..." 但它看起来并没有改变。我错过了什么吗？

【问题讨论】：

标签： ionic-framework fullscreen screen-orientation

【解决方案1】：

错误告诉您，除非用户实际点击“全屏查看”按钮，否则您无法全屏播放视频。

您可以使用VideoJS 之类的视频播放，并向播放器添加 CSS 样式，使其显示就像设备旋转时视频处于“全屏”模式一样，但是实际上只是覆盖了 HTML 文档。

css 的起点是：

#video-js-player {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
}

【讨论】：

不幸的是，这个确切的解决方案对我不起作用，但无论如何我会尝试像你建议的那样“伪造”全屏。