uniapp 鸿蒙如何配置视频横屏播放

在uniapp开发鸿蒙应用时，如何配置视频组件实现横屏播放？尝试过修改manifest.json的screenOrientation属性为landscape，但视频仍然保持竖屏。是否需要额外调用鸿蒙原生API或修改页面样式？求具体实现方案。

2 回复

在uniapp中，要让视频横屏播放，可在video组件中设置direction参数为90或-90，实现横屏。同时，在页面配置中设置"pageOrientation": "landscape"强制横屏。

更多关于uniapp 鸿蒙如何配置视频横屏播放的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在UniApp中配置视频横屏播放，可以通过以下步骤实现：

1. 设置页面横屏

在需要横屏播放的页面中，通过pageOrientation配置页面方向为横屏：

// pages.json
{
  "pages": [
    {
      "path": "pages/video/video",
      "style": {
        "pageOrientation": "landscape" // 横屏设置
      }
    }
  ]
}

2. 使用video组件

在页面中使用video组件，并设置全屏属性：

<template>
  <view>
    <video 
      src="/static/video.mp4" 
      :fullscreen="true" 
      controls 
      autoplay
      @fullscreenchange="onFullscreenChange"
    ></video>
  </view>
</template>

3. 处理横屏逻辑

通过JavaScript控制横屏行为：

export default {
  methods: {
    // 进入全屏时强制横屏
    playVideo() {
      const videoContext = uni.createVideoContext('myVideo')
      videoContext.requestFullScreen({ direction: 90 }) // 90表示横屏
    },
    
    // 全屏状态变化监听
    onFullscreenChange(e) {
      if (e.detail.fullScreen) {
        // 全屏时锁定横屏
        uni.setScreenOrientation({
          orientation: 'landscape'
        })
      } else {
        // 退出全屏时恢复竖屏
        uni.setScreenOrientation({
          orientation: 'portrait'
        })
      }
    }
  }
}

4. 鸿蒙系统适配

鸿蒙系统基于Android，可使用标准UniApp API。确保在manifest.json中配置屏幕方向：

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

注意事项：

  • 测试时需使用真机，模拟器可能无法正常切换横屏
  • 部分Android机型需要单独处理重力感应
  • 横屏播放结束后建议恢复竖屏方向

通过以上配置即可在UniApp中实现视频横屏播放功能，鸿蒙系统兼容性良好。

回到顶部