HarmonyOS鸿蒙Next中video设置加载图闪屏

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS鸿蒙Next中video设置加载图闪屏 video设置加载图闪屏,具体场景:视频启动页加载本地视频出现闪屏bug

3 回复

方案一:给video设置预览图片

方案二:给video设置显隐控制,在video进入start状态时,在start回调里,控制video展示,示例代码如下:

@Entry
@Component
struct HeiSebeijing {
  build() {
    Row() {
      Column() {
        Text('before')
        VideoComponent({url:'https://img.mcd.cn/cms/images/e3fa083cab2a0851.mp4'})
        Text('after')
      }
      .width('100%')
    } 
    .height('100%')
  }
}
@Component
struct VideoComponent {
  @State isVisibile:Visibility=Visibility.Hidden
  controller: VideoController = new VideoController();
  private url:string=''
  build() {
    Row() {
      Video({ src: this.url, controller: this.controller })
        .visibility(this.isVisibile)
        .autoPlay(true)
        .loop(true)
        .controls(false)
        .width('100%')
        .height('200vp')
        .onStart(() => {setTimeout(()=>{ this.isVisibile=Visibility.Visible  },100) })
        .onPrepared(()=>{ this.controller.setCurrentTime(0,SeekMode.NextKeyframe) }) 
    } 
  } 
}

更多关于HarmonyOS鸿蒙Next中video设置加载图闪屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,Video组件设置加载图时出现闪屏问题,通常与以下因素有关:

  1. 图片加载机制:Video组件的加载图在视频资源准备过程中可能因图片加载延迟或解码时间过长,导致短暂空白后突然显示,造成闪屏现象。

  2. 异步处理:加载图的显示与视频资源的加载是异步进行的,若两者时间差较大,可能导致加载图在视频准备好之前显示,随后被视频覆盖,形成闪屏。

  3. UI刷新机制:鸿蒙系统的UI刷新频率较高,若加载图的显示与视频加载的UI更新不同步,可能引发视觉上的闪屏。

  4. 硬件性能:设备硬件性能不足时,图片和视频的加载及渲染可能出现延迟,导致闪屏。

  5. 缓存机制:若加载图未提前缓存,每次显示时都需要从网络或本地重新加载,可能因加载时间过长导致闪屏。

  6. 组件生命周期:Video组件的生命周期管理不当,可能导致加载图在组件初始化或销毁时出现闪屏。

  7. 系统优化:鸿蒙系统对Video组件的优化不足,可能导致加载图显示过程中的闪屏问题。

解决该问题需针对上述因素进行排查与优化,如优化图片加载、调整异步处理逻辑、确保UI刷新同步、提升硬件性能、改进缓存机制、合理管理组件生命周期等。

在HarmonyOS鸿蒙Next中,Video组件加载时出现闪屏问题,可以通过以下方法优化:

  1. 预加载封面图:使用poster属性设置视频封面图,避免加载时黑屏或闪屏。
  2. 优化资源加载:确保封面图和视频资源已提前加载,减少加载延迟。
  3. 使用占位符:在视频加载前显示占位符,平滑过渡。
  4. 调整加载策略:使用autoplaypreload属性控制视频加载时机,避免过早加载造成闪屏。
  5. 性能优化:确保封面图和视频资源大小合适,避免过大影响加载速度。

通过这些方法可以有效减少闪屏现象,提升用户体验。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!