HarmonyOS Video设置全屏后，遮挡了其它组件

Video设置全屏后，遮挡了其它组件，请问如何将其它组件显示在全屏的Video之上

HarmonyOS

zxjiu

2024-12-25 12:36:25

1.0w浏览

回答 1

按赞同

按时间

fox280

示例参开：

@Entry
@Component
struct VideoPlayerPage {
  @State videoSrc: Resource = $rawfile('shipin.mp4')
  @State previewUri: Resource = $r('app.media.startIcon');
  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
          })
            .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
            })
            .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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.