HarmonyOS 视频全屏播放时切换到横屏并展示自定义控制条？

Question

如题：HarmonyOS 视频全屏播放时切换到横屏并展示自定义控制条？

Answer 1

参考demo：

import { window } from '@kit.ArkUI';

@Entry
@Component
struct VideoPlayerPage {
  @State videoSrc: Resource = $rawfile('1722856843511272.mp4')
  @State previewUri: Resource = $r('app.media.preview');
  controller: VideoController = new VideoController();
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  @State fullHeight: Length = 600
  @State isFullScreen: boolean = false
  @State winBottomHeight:number=0

  // 设置窗口方向
  setR(orientation: number) {
    window.getLastWindow(getContext(this)).then((win) => {
      win.setPreferredOrientation(orientation).then((data) => {
        console.log('setWindowOrientation: ' + orientation + ' Succeeded. Data: ' + JSON.stringify(data));
      }).catch((err: string) => {
        console.log('setWindowOrientation: Failed. Cause: ' + JSON.stringify(err));
      });
      if(orientation=== 1){
        win.setWindowLayoutFullScreen(false)
        this.winBottomHeight = 0
      }else {
        win.setWindowLayoutFullScreen(true).then(()=>{
          let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
          let avoidArea = win.getWindowAvoidArea(type);
          this.winBottomHeight = px2vp(avoidArea.bottomRect.height)
        })
      }
    }).catch((err: string) => {
      console.log('setWindowOrientation： Failed to obtain the top window. Cause: ' + JSON.stringify(err));
    });
  }

  build() {
    Column() {
      Stack({alignContent: Alignment.Bottom}) {
        Video({
          src: this.videoSrc,
          previewUri: this.previewUri,
          controller: this.controller
        })
          .width('100%')
          .height(this.fullHeight)
          .loop(false)
          .objectFit(ImageFit.Contain)
          .autoPlay(false)
          .controls(false)
        // 自定义控制器
        Row() {
          Text('start').onClick(() => {
            this.controller.start() // 开始播放
          }).margin(5).fontColor(Color.White)
          Text('pause').onClick(() => {
            this.controller.pause() // 暂停播放
          }).margin(5).fontColor(Color.White)
          Text('0.75').onClick(() => {
            this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放
          }).margin(5).fontColor(Color.White)
          Text('1').onClick(() => {
            this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放
          }).margin(5).fontColor(Color.White)
          Text('2').onClick(() => {
            this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放
          }).margin(5).fontColor(Color.White)
          Text(this.isFullScreen ? '退出全屏' : '全屏').onClick(() => {
            if (this.isFullScreen) {
              this.setR(1)
              this.fullHeight = 600
            } else {
              this.setR(4)
              this.fullHeight = '100%'
            }
            this.isFullScreen = !this.isFullScreen
          }).fontColor(Color.White)
        }.margin({bottom:this.winBottomHeight})
        .zIndex(1)
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}