uni-app video全屏播放时点击分享微信返回后 视频会变成竖屏播放

uni-app video全屏播放时点击分享微信返回后 视频会变成竖屏播放

开发环境 版本号 项目创建方式
Windows 3.1.22 HBuilderX

操作步骤:

视频全屏横屏播放 分享微信 返回会变成竖屏播放

预期结果:

无需改变视频播放格式

实际结果:

变成了竖屏播放

bug描述:

video全屏播放时点击分享微信 返回 视频会变成竖屏播放

bug.zip


更多关于uni-app video全屏播放时点击分享微信返回后 视频会变成竖屏播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video全屏播放时点击分享微信返回后 视频会变成竖屏播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的页面方向管理问题。当视频全屏横屏播放时,系统会强制横屏;通过分享功能跳转到微信再返回时,系统方向状态可能没有正确恢复。

解决方案:

  1. 监听页面显示/隐藏事件
    onShow 生命周期中,重新设置视频方向为横屏:

    onShow() {
      // 强制横屏
      plus.screen.lockOrientation("landscape");
    }
    
  2. 使用 orientation 事件监听
    监听方向变化并保持横屏:

    onLoad() {
      // 监听方向变化
      plus.screen.lockOrientation("landscape");
      window.addEventListener("orientationchange", this.handleOrientation);
    },
    methods: {
      handleOrientation() {
        // 确保保持横屏
        plus.screen.lockOrientation("landscape");
      }
    }
    
  3. 视频组件配置
    确保 video 组件设置了正确的方向属性:

    <video 
      :direction="90" 
      :page-gesture="true"
      @fullscreenchange="handleFullscreen">
    </video>
    
  4. 分享返回后的恢复处理
    在分享返回的钩子中强制刷新视频状态:

    onHide() {
      // 页面隐藏时解锁方向
      plus.screen.unlockOrientation();
    },
    onShow() {
      // 重新锁定横屏
      plus.screen.lockOrientation("landscape");
      // 触发视频重新适配
      this.$nextTick(() => {
        // 重新设置视频全屏状态
      });
    }
回到顶部