uniapp ios nvue video 全屏异常如何解决？

在uniapp的iOS端使用nvue时，video组件全屏显示出现异常，页面布局错乱或无法正常全屏。尝试调整样式和设置全屏参数仍未解决，请问如何正确处理nvue video的全屏问题？需要兼容iOS各版本机型。

2 回复

检查video组件属性设置，确保controls和fullscreen-mode正确。尝试设置page-orientation为auto，或使用plus.screen.lockOrientation手动控制横竖屏。


在 UniApp 的 iOS nvue 中，<video> 组件全屏异常通常是由于兼容性或样式问题导致。以下是常见解决方案：

1. 检查 webkit-playsinline 和 playsinline 属性

iOS 默认禁止内联播放，需同时设置以下属性：

<video 
  src="video.mp4" 
  :playsinline="true" 
  :webkit-playsinline="true"
  controls
></video>

2. 使用 fullscreen 事件控制全屏

通过监听全屏事件手动调整样式：

<video 
  ref="video"
  @fullscreenchange="onFullscreenChange"
></video>

<script>
export default {
  methods: {
    onFullscreenChange(e) {
      // 强制横屏（需在 pages.json 中配置 "screenOrientation": "landscape"）
      plus.screen.lockOrientation("landscape");
    }
  }
}
</script>

3. 配置页面横屏支持

在 pages.json 中对应页面添加：

{
  "path": "video-page",
  "style": {
    "app-plus": {
      "screenOrientation": ["landscape", "portrait"]
    }
  }
}

4. 检查 CSS 样式冲突

  • 确保视频容器未设置 overflow: hidden。
  • 尝试为视频容器添加固定宽高：
.video-container {
  width: 750rpx;
  height: 422rpx;
}

5. 使用原生全屏 API（备用方案）

// 强制进入全屏
const video = this.$refs.video;
video.requestFullscreen();

注意事项：

  • 真机测试：iOS 模拟器可能无法复现问题，需用真机调试。
  • 版本兼容：检查 HBuilderX 和 iOS 系统版本，更新到最新稳定版。

通过以上步骤通常可解决大部分全屏异常问题。若仍存在异常，请提供具体错误现象以便进一步排查。

回到顶部