uni-app video标签在ios部分视频加载过程中先横着显示一下，再恢复正常显示

在 uni-app 中使用 video 标签时，部分 iOS 设备在加载视频时可能会出现视频先横着显示一下，然后再恢复正常显示的情况。这通常与视频的宽高比、设备的屏幕方向以及视频的元数据加载顺序有关。以下是一些可能的解决方案和优化建议：

1. 设置视频的 object-fit 样式

• 默认情况下，video 标签可能会根据视频的宽高比和容器的尺寸进行缩放，导致显示异常。
• 可以通过设置 object-fit 样式来控制视频的填充方式：

  video {
    object-fit: cover; /* 或 contain */
  }
  

• cover 会保持视频的宽高比并填满容器，可能会裁剪部分内容；contain 会保持视频的完整显示，但可能会留黑边。

2. 强制设置视频容器的宽高

• 确保视频容器的宽高与视频的宽高比一致，避免加载时出现布局抖动。
• 例如：

  <view style="width: 100%; height: 200px;">
    <video src="your-video-url" style="width: 100%; height: 100%;"></video>
  </view>
  

3. 监听视频的 loadedmetadata 事件

• 视频的元数据（如宽高比）加载完成后，可能会出现显示异常。可以通过监听 loadedmetadata 事件来确保视频加载完成后再显示：

  <video
    :src="videoUrl"
    @loadedmetadata="onVideoLoaded"
    style="width: 100%; height: 100%;"
  ></video>
  

  methods: {
    onVideoLoaded(event) {
      // 视频元数据加载完成后的处理
      console.log('视频元数据加载完成');
    }
  }
  

4. 检查视频的宽高比

• 确保视频的宽高比与播放容器的宽高比一致。如果视频是竖屏（如 9:16），但容器是横屏（如 16:9），可能会出现显示异常。
• 可以通过调整视频的宽高比或容器的尺寸来解决。

5. 启用 playsinline 属性

• 在 iOS 设备上，默认情况下视频可能会全屏播放。可以通过设置 playsinline 属性来避免全屏播放：

  <video
    :src="videoUrl"
    playsinline
    webkit-playsinline
    style="width: 100%; height: 100%;"
  ></video>
  

6. 使用 poster 属性设置封面图

• 如果视频加载较慢，可以设置 poster 属性来显示封面图，避免加载过程中出现空白或异常：

  <video
    :src="videoUrl"
    poster="your-poster-image-url"
    style="width: 100%; height: 100%;"
  ></video>
  

7. 检查设备屏幕方向

• 如果设备屏幕方向发生变化（如从竖屏切换到横屏），可能会导致视频显示异常。
• 可以通过监听屏幕方向变化事件来动态调整视频的显示方式：

  uni.onWindowResize((res) => {
    console.log('屏幕方向变化', res);
    // 根据屏幕方向调整视频布局
  });