HarmonyOS video空间自定义控制器？

Question

我在项目中使用了 video 组件播放视频，隐藏了系统video 控制器并自定义了video 控制器

想咨询下，使用 videoController.requestFullscreen(true) 将视频全屏以后，如何能显示自定义的控制器？https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-video-player-V5

Answer 1

video自带的全屏功不能自定义设置控件

解决方案：

给视频展示区一个高度，通过调整尺寸实现全屏的效果，同时也可以显示自定义的播放控件

参考以下demo：

// xxx.ets

import { window } from '@kit.ArkUI' 
 
@Entry 
@Component 
struct VideoCreateComponent { 
  @State videoSrc: Resource = $rawfile('demo.mp4') 
  @State previewUri: Resource = $r('app.media.startIcon') 
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X 
  @State isAutoPlay: boolean = false 
  @State showControls: boolean = true 
  @State videoHeight: string = '600vp' 
  controller: VideoController = new VideoController() 
  @State windowClass:window.Window|undefined = undefined 
 
  aboutToAppear(): void { 
    window.getLastWindow(getContext(this)).then((window)=>{ 
      this.windowClass = window 
    }) 
  } 
 
  build() { 
    Stack() { 
      Video({ 
        src: this.videoSrc, 
        previewUri: this.previewUri, 
        currentProgressRate: this.curRate, 
        controller: this.controller 
      }) 
        .width('100%') 
        .height(this.videoHeight) 
        .autoPlay(this.isAutoPlay) 
        .controls(this.showControls) 
 
      Row() { 
        Button('controls').onClick(() => { 
          this.showControls = !this.showControls // 切换是否显示视频控制栏 
        }).margin(5) 
        Button('start').onClick(() => { 
          this.controller.start() // 开始播放 
        }).margin(5) 
        Button('pause').onClick(() => { 
          this.controller.pause() // 暂停播放 
        }).margin(5) 
        Button('fullscreen').onClick(async () => { 
          if(!this.windowClass){ 
            return; 
          } 
          if(this.videoHeight === '100%'){ 
            this.windowClass.setWindowLayoutFullScreen(false).then(()=>{ 
              this.videoHeight = '600vp' 
            }) 
          }else{ 
            this.windowClass.setWindowLayoutFullScreen(true).then(()=>{ 
              this.videoHeight = '100%' 
            }) 
          } 
        }).margin(5) 
      } 
    } 
    .alignContent(Alignment.Bottom) 
  } 
} 
 
interface DurationObject { 
  duration: number; 
} 
 
interface TimeObject { 
  time: number; 
}