uni-app ios video全屏播放页面错乱

在ios中，使用全屏时会出现全屏旋转90度，页面横屏的错误。应用支持只支持竖屏，所以manifest只能写竖屏，而视频播放时支持全屏这个怎么解决呢？同时ios离线打包勾选支持横屏也是这样，不勾选视频全屏样式错乱，支持横屏应用就全局横屏了

在处理uni-app中iOS设备上video组件全屏播放后页面错乱的问题时，通常需要考虑几个关键点：页面布局、CSS样式兼容性以及video组件的特定属性设置。以下是一个示例代码案例，展示如何通过设置video组件的属性和调整页面布局来解决这个问题。

首先，确保你的uni-app项目中的manifest.json文件中已经配置了相关的iOS权限，特别是关于视频播放的权限。

接着，在你的页面组件中，可以这样设置video组件：

<template>
  <view class="container">
    <video
      id="myVideo"
      src="https://example.com/your-video.mp4"
      controls
      autoplay="false"
      loop="false"
      muted="false"
      show-center-play-btn
      object-fit="contain"
      initial-time="0"
      danmu-list="[]"
      enable-danmu
      direction="0"
      @fullscreenchange="onFullscreenChange"
      style="width: 100%; height: auto;"
    ></video>
    <!-- 其他页面内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    onFullscreenChange(e) {
      // 当视频全屏状态改变时触发此方法
      // 可以在这里做一些布局调整或者状态管理
      console.log('Fullscreen changed:', e.detail.fullscreen);
      if (!e.detail.fullscreen) {
        // 退出全屏时，可能需要重置页面布局
        this.$nextTick(() => {
          // 例如，重新计算或调整页面高度
          const container = this.$refs.container;
          if (container) {
            container.style.height = 'auto'; // 根据实际情况调整
          }
        });
      }
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh; /* 或者根据需要设置 */
  overflow: hidden;
}
video {
  /* 确保视频在不同屏幕尺寸下都能正确显示 */
  max-width: 100%;
  height: auto;
}
</style>

在这个例子中，我们使用了@fullscreenchange事件监听器来检测视频是否进入或退出全屏模式。当视频退出全屏时，可以在回调函数中执行一些布局调整，以确保页面布局不会因为全屏播放而错乱。

此外，通过设置video组件的style属性中的width和height，以及使用CSS的max-width和height: auto，可以确保视频在不同屏幕尺寸下都能正确显示，避免因为视频尺寸问题导致的页面布局错乱。

注意，object-fit: contain确保了视频内容在保持其宽高比的同时适应容器大小，这也是避免页面错乱的一个重要因素。

以上代码提供了一个基本的处理思路，你可能需要根据具体的应用场景和页面布局做进一步的调整。

uni-app ios video全屏播放 页面错乱

uni-app ios video全屏播放页面错乱