HarmonyOS Video组件设置沉浸式,视频内容没有延展到safearea

代码如下:

Video({
  src: this.dynamicBgVideoPath,
  controller: this.controller
})
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  .clip(false)
  .size({ width: '100%', height: '100%' })
  .backgroundColor(Color.Transparent)
  .muted(true)//设置是否静音
  .controls(false)//设置是否显示默认控制条
  .autoPlay(true)//设置是否自动播放
  .loop(true)//设置是否循环播放
  .objectFit(ImageFit.Cover) //设置视频适配模式
HarmonyOS
2025-01-09 16:22:33
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

video组件不支持safeArea的沉浸式,可以通过设置窗口沉浸式可以实现。

1、在EntryAbility的onWindowStageCreate方法中通过windowStage获取window,API地址:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-window-stage-V5#%E4%BD%93%E9%AA%8C%E7%AA%97%E5%8F%A3%E6%B2%89%E6%B5%B8%E5%BC%8F%E8%83%BD%E5%8A%9B

2、在video组件所在的页面设置窗口沉浸式调用setWindowLayoutFullScreen。

aboutToAppear(): void {
  window.getLastWindow(getContext(this)).then((win:window.Window)=>{
  win.setWindowLayoutFullScreen(true)
  })
}

或者参考示例如下:

import WindowModel from '../common/utils/WindowModel'
import { window } from '@kit.ArkUI'

@Entry
@Component
struct VideoComponentDemo {
  @State videoSrc: Resource = $rawfile('RamboVideo.mp4')
  controller: VideoController = new VideoController()
  @State statusBarHeight: number = 0;
  @State navigationHeight: number = 0;

  getAvoidArea() {
    let avoidAreaStatusBar = WindowModel.getInstance().getWindowsAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
    let avoidAreanavigation =
      WindowModel.getInstance().getWindowsAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
    if (avoidAreaStatusBar && avoidAreanavigation) {
      this.statusBarHeight = px2vp(avoidAreaStatusBar.topRect.height);
      this.navigationHeight = px2vp(avoidAreanavigation.bottomRect.height);
    }
    console.log('mwb', `statusBarHeight: ${this.statusBarHeight}, navigationHeight: ${this.navigationHeight}`);
  }

  aboutToAppear(): void {
    this.getAvoidArea()
    WindowModel.getInstance().getWindowClass()?.on('windowSizeChange', (size: window.Size) => {
      this.getAvoidArea();
    })
    this.controller.requestFullscreen(true)
  }

  build() {
    Column() {
      Video({
        src: this.videoSrc,
        currentProgressRate: PlaybackSpeed.Speed_Forward_1_00_X,
        controller: this.controller
      })
        .objectFit(ImageFit.Fill)
        .width('100%')
        .offset({ x: 0, y: -this.statusBarHeight })
        .height(`calc(100% + ${this.statusBarHeight}vp + ${this.navigationHeight}vp)`)
        .autoPlay(true)
        .loop(true)
        .controls(false)
        .backgroundColor(Color.Green)
    }
    .backgroundColor(Color.Pink)
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2025-01-09 19:07:14
相关问题
HarmonyOS List组件沉浸问题
331浏览 • 1回复 待解决
如何设置沉浸状态栏
3151浏览 • 1回复 待解决
HarmonyOS 关于窗口沉浸设置方式
391浏览 • 1回复 待解决
HarmonyOS Tabs组件沉浸失败
774浏览 • 1回复 待解决
如何设置沉浸窗口,你会吗?
2747浏览 • 1回复 待解决
HarmonyOS 沉浸方案
634浏览 • 1回复 待解决
HarmonyOS Video组件如何播放沙盒视频
290浏览 • 1回复 待解决
HarmonyOS video视频问题
306浏览 • 1回复 待解决
HarmonyOS 沉浸的适配文档
322浏览 • 1回复 待解决