uni-app video视频播放组件在鸿蒙设备点击全屏播放后无法横屏

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app video视频播放组件在鸿蒙设备点击全屏播放后无法横屏

操作步骤:

  • 点击视频组件全屏播放按钮

预期结果:

  • 横屏全屏播放

实际结果:

  • 竖屏全屏播放

bug描述:

点击视频组件全屏播放按钮,无法横屏全屏播放,设置direction也无效果

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 HarmonyOS NEXT
手机系统版本号 HarmonyOS NEXT Developer Beta2
手机厂商 华为
手机机型 mate60
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

Image 1 Image 2


更多关于uni-app video视频播放组件在鸿蒙设备点击全屏播放后无法横屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

同问

更多关于uni-app video视频播放组件在鸿蒙设备点击全屏播放后无法横屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在解决uni-app中video组件在鸿蒙设备上点击全屏播放后无法横屏的问题时,我们需要确保几个方面:

  1. 系统权限:确保应用有权限改变屏幕方向。
  2. 屏幕方向设置:在全屏播放时,应用需要能够动态调整屏幕方向。
  3. uni-app配置:正确配置uni-app的页面和组件属性。

以下是一个示例代码,展示了如何在uni-app中处理视频全屏播放时的屏幕方向问题。注意,鸿蒙设备的具体实现可能会有所不同,这里提供一个通用的解决方案思路。

1. 配置manifest.json

首先,在manifest.json中配置应用支持的方向:

"app-plus": {
    "distribute": {
        "sdkConfigs": {
            "android": {
                "screenOrientation": ["portrait", "landscape"] // 添加支持的方向
            }
        }
    }
}

2. 动态调整屏幕方向

在video组件的fullscreenchange事件中监听全屏状态变化,并动态调整屏幕方向。由于uni-app没有直接提供API来设置屏幕方向,我们需要借助原生插件或者HBuilderX的5+ API(如果可用)。

这里假设我们使用5+ API(注意,这可能需要在HBuilderX环境下运行):

export default {
    data() {
        return {
            isFullscreen: false
        };
    },
    methods: {
        handleFullscreenChange(event) {
            this.isFullscreen = event.detail.fullscreen;
            if (this.isFullscreen) {
                // 进入全屏,设置为横屏
                plus.screen.lockOrientation('landscape');
            } else {
                // 退出全屏,恢复竖屏
                plus.screen.lockOrientation('portrait');
            }
        }
    },
    template: `
        <view>
            <video
                src="your-video-url.mp4"
                controls
                @fullscreenchange="handleFullscreenChange"
            ></video>
        </view>
    `
};

3. 注意事项

  • 权限问题:确保应用有权限改变屏幕方向,这通常需要在AndroidManifest.xml中声明。
  • 兼容性问题:不同设备和系统版本的实现可能有所不同,测试是关键。
  • 原生插件:如果5+ API不可用或不支持,考虑使用原生插件来实现屏幕方向的控制。
  • 鸿蒙特定实现:鸿蒙系统可能有特定的API或配置要求,需要查阅鸿蒙开发文档。

以上代码提供了一个基本的思路,实际项目中可能需要根据具体情况进行调整。由于鸿蒙系统的特殊性,建议查阅最新的鸿蒙开发文档和社区资源,以获得最准确的解决方案。

回到顶部