鸿蒙Next开发中怎么让video旋转90度成为全屏呢

在鸿蒙Next开发中，如何实现video组件旋转90度并全屏显示？目前尝试设置旋转角度后画面会被裁剪，无法完美适配屏幕。需要具体代码示例或解决方案来保证视频内容完整显示且占满全屏。

2 回复

哈哈，让Video组件旋转90度？简单！用transform属性就行：

video {
  transform: rotate(90deg);
  width: 100vh;  /* 交换宽高 */
  height: 100vw;
}

记得把容器也旋转一下，不然会跑偏！就像把手机横过来看视频一样自然～

更多关于鸿蒙Next开发中怎么让video旋转90度成为全屏呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过设置Video组件的旋转角度和宽高来实现视频旋转90度全屏效果。以下是具体实现方法：

方法一：使用rotate属性

@Component
struct VideoExample {
  private controller: VideoController = new VideoController()

  build() {
    Column() {
      Video({
        src: $rawfile('video.mp4'),
        controller: this.controller
      })
        .width('100%')  // 宽度设为100%
        .height('100%') // 高度设为100%
        .rotate({  // 设置旋转
          x: 0,
          y: 0, 
          z: 1,
          angle: 90,  // 旋转90度
          centerX: '50%',
          centerY: '50%'
        })
    }
    .width('100%')
    .height('100%')
  }
}

方法二：结合布局变换

@Component
struct VideoExample {
  private controller: VideoController = new VideoController()

  build() {
    Stack({ alignContent: Alignment.Center }) {
      Video({
        src: $rawfile('video.mp4'),
        controller: this.controller
      })
        .width('100vh')  // 交换宽高值
        .height('100vw')
        .rotate({
          x: 0,
          y: 0,
          z: 1,
          angle: 90,
          centerX: '50%',
          centerY: '50%'
        })
    }
    .width('100%')
    .height('100%')
  }
}

关键点说明：

  1. 使用rotate属性设置旋转角度为90度
  2. 旋转中心点设为(50%, 50%)确保居中旋转
  3. 可能需要交换宽高值来适应旋转后的布局
  4. 使用Stack布局确保视频居中显示

注意事项：

  • 确保父容器宽高设置为100%
  • 根据实际需求调整宽高比例
  • 可以结合手势事件实现旋转交互功能

这样就能实现视频旋转90度并全屏显示的效果了。

回到顶部