uniapp开发app时video视频全屏强制旋转问题，设置manifest不生效如何解决？

在uniapp开发APP时遇到video组件全屏后强制横屏的问题，按照官方文档在manifest.json中设置了"screenOrientation": "landscape"但未生效。尝试过修改pages.json的style配置和视频容器的CSS样式，仍然无法锁定横屏。请问如何正确配置才能固定视频全屏时的横屏显示？是否有其他需要特别注意的配置项或兼容性处理？

2 回复

在manifest.json中设置"orientation": [“portrait”]，但需注意部分安卓机型可能不兼容。可尝试在页面内使用uni.setScreenOrientation强制锁定竖屏，或检查视频组件是否自带旋转属性。


在uni-app开发中，视频全屏时强制旋转问题通常是由于系统默认行为导致的。如果配置manifest.json中的"screenOrientation"不生效，可以尝试以下解决方案：

1. 使用API动态控制屏幕方向

在视频全屏时强制横屏，退出时恢复竖屏：

// 进入全屏时强制横屏
onFullscreenChange(e) {
    if (e.fullScreen) {
        // 锁定横屏
        plus.screen.lockOrientation("landscape");
    } else {
        // 恢复竖屏
        plus.screen.lockOrientation("portrait");
    }
}

2. 使用原生插件

如果上述方法不生效，可以考虑使用原生插件：

  • 安装uni-app官方提供的屏幕旋转插件
  • 或使用HTML5+ API的屏幕方向控制

3. 检查manifest配置

确保配置正确（虽然您说已配置）：

{
    "app-plus": {
        "screenOrientation": [
            "portrait",
            "landscape"
        ]
    }
}

4. 视频组件配置

给video组件添加方向监听：

<video 
    @fullscreenchange="onFullscreenChange"
    controls
    src="/static/video.mp4">
</video>

注意事项：

  1. 确保使用真机测试（模拟器可能不支持）
  2. iOS可能需要额外配置
  3. 某些Android机型可能有兼容性问题

建议优先尝试方案1，这是最常用的解决方案。如果仍有问题，可以考虑使用原生插件或检查设备兼容性。

回到顶部