HarmonyOS 视频播放器如何旋转屏幕？

Question

视频如何横屏播放 如何控制某一个页面可以为横屏

Answer 1

可以参考如下demo:

import { window } from '@kit.ArkUI';
@Entry
@Component
struct VideoPlayerPage {
  controller: VideoController = new VideoController();
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  @State fullHeight: Length = 600
  @State isFullVertical: boolean = false
  @State isFullHorizontal: boolean = false
  onPageHide(): void {
    this.handlerOrientation(window.Orientation.PORTRAIT)
  }

  handlerOrientation(type: number) {
    window.getLastWindow(getContext(this), (err, win) => {
      win.setPreferredOrientation(type)
    })
  }
  build() {
    Column() {
      Stack({ alignContent: Alignment.Bottom }) {
        Video({
          src: $rawfile('goodsIntro.mp4'),
          previewUri: $r('app.media.app_icon'),
          currentProgressRate: this.curRate,
          controller: this.controller
        })
          .width('100%')
          .height(this.fullHeight)
          .loop(false)
          .objectFit(ImageFit.Contain)
          .autoPlay(false)
          .controls(false)
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
        Row() {
          Text('播放').onClick(() => {
            this.controller.start() // 开始播放
          }).margin(5).fontColor(Color.White).fontSize(12)
          Text('暂停').onClick(() => {
            this.controller.pause() // 暂停播放
          }).margin(5).fontColor(Color.White).fontSize(12)
          Text('0.75X').onClick(() => {
            this.curRate = PlaybackSpeed.Speed_Forward_0_75_X
          }).margin(5).fontColor(Color.White).fontSize(12)
          Text('1.0X').onClick(() => {
            this.curRate = PlaybackSpeed.Speed_Forward_1_00_X
          }).margin(5).fontColor(Color.White).fontSize(12)
          Text('2.0').onClick(() => {
            this.curRate = PlaybackSpeed.Speed_Forward_2_00_X
          }).margin(5).fontColor(Color.White).fontSize(12)
          Text(this.isFullVertical ? '退出竖屏' : '竖屏')
            .margin(5)
            .fontSize(12)
            .onClick(() =>
            {
              if (this.isFullVertical) {
                this.fullHeight = 600
              } else {
                this.fullHeight = '100%'
              }
              this.isFullVertical = !this.isFullVertical
            }).fontColor(Color.White)
          Text(this.isFullHorizontal ? '退出横屏' : '横屏')
            .fontSize(12)
            .onClick(() => {
              this.isFullHorizontal = !this.isFullHorizontal
              if (this.isFullHorizontal) {
                this.handlerOrientation(window.Orientation.LANDSCAPE_INVERTED)
                this.fullHeight = '100%'
              } else {
                this.handlerOrientation(window.Orientation.PORTRAIT)
                this.fullHeight = 600
              }
            }).fontColor(Color.White)
        }
        .zIndex(1)
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

页面级别无法设置,只能设置窗口级别的,在页面的生命周期中添加旋转属性：

onPageShow(): void {
  window.getLastWindow(getContext(this), (err, win) => {
  win.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)
})
}

onPageHide(): void {
  window.getLastWindow(getContext(this), (err, win) => {
  win.setPreferredOrientation(window.Orientation.PORTRAIT)
})
}