旋转设备时如何以全屏方式渲染视频

如何解决旋转设备时如何以全屏方式渲染视频

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