HarmonyOS 视频播放全屏和旋转？

Question

文章详情页，RelativeContainer加入video组件或者播放器，怎么去实现全屏+转屏？如果使用requestFullscreen时，自定义组件不展示

Answer 1

下方实现全屏和旋转，disableWindowSystemBar针对的是窗口并非某个组件

// features/VideoPlayer/src/main/ets/view/VideoPlayer.ets
aboutToAppear() {
  this.windowUtil = WindowUtil.getInstance();
  if (this.windowUtil !== undefined) {
    if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0]) {
      // 隐藏顶部导航栏和状态栏
      this.windowUtil.disableWindowSystemBar();
    }
    if ((!display.isFoldable() && deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[2]) ||
      display.getFoldStatus() === display.FoldStatus.FOLD_STATUS_FOLDED) {
      // 设置窗口横屏播放
      this.windowUtil.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE);
    }
    ...
  } else {
    Logger.info(`Full-screen display in portrait mode`);
  }
}

Video自带的全屏功能不能自定义设置控件，解决方案如下：给视频展示区一个高度，通过调整尺寸实现全屏的效果，同时也可以显示自定义的播放控件

给视频展示区一个高度，通过调整尺寸实现全屏的效果

参考demo：

@Entry
@Component
struct VideoPlayerPage {
  @State videoSrc: Resource = $rawfile('videoTest.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
  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.fullHeight = 600
            } else {
              this.fullHeight = '100%'
            }
            this.isFullScreen = !this.isFullScreen
          }).fontColor(Color.White)
        }
        .zIndex(1)
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}