HarmonyOS开发实战（ Beta5.0）滑动视频自动播放案例实践

news2024/11/19 9:31:24

鸿蒙HarmonyOS开发往期文章必看：

HarmonyOS NEXT应用开发性能实践总结

最新版！“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

介绍

本示例主要介绍视频列表滑动到屏幕中间自动播放场景，利用onScrollIndex获取List显示区域内中间子组件索引值的能力来判断播放，利用懒加载场景会预加载List显示区域外cachedCount的内容的能力来实现视频连续播放。

效果图预览

使用说明

等待视频加载完成，首页中间视频会自动播放。
滑动列表，视频达到中间位置会自动播放。
滑动列表返回上一个视频会继续播放。

实现思路

本例涉及的关键特性和实现方案如下：

使用List渲染视频列表，LazyForEach实现视频列表懒加载。将每个视频模块存放在ListItem中，LazyForEach懒加载可以通过设置cachedCount来指定缓存数量，使用onScrollIndex获取List显示区域内中间位置子组件的索引值，源码参考VideoListAutoplay.ets。

List() {
  LazyForEach(this.newsList, (news: NewsItem, index: number) => {
    ListItem() {
      XComponentVideo({
        centerIndex: this.centerIndex,
        news: news,
        index: index
      })
    }
    .backgroundColor("#fff6f6f6")
      .borderRadius(30)
      .margin({ bottom: 20 })
  }, (item: string) => item)
}
.cachedCount(CACHE_COUNT) // TODO：知识点：LazyForEach懒加载可以通过设置cachedCount来指定缓存数量，在设置cachedCount后，除屏幕内显示的ListItem组件外，还会预先将屏幕可视区外指定数量的列表项数据缓存。
.onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
  this.centerIndex = centerIndex; // 获取List显示区域内中间子组件索引值
})

视频渲染部分可使用XComponent+AVPlayer实现，也可用Video实现，因XComponent+AVPlayer可对视频进行更多操作，因此本案例使用XComponent+AVPlayer进行开发。
通过监听centerIndex值，实时调整视频播放状态。实时监听centerIndex，使得centerIndex改变可及时调整视频播放状态，源码参考XComponentVideo.ets。

// centerIndex状态变化时调用
onIndexChange() {
  if (this.isLoadingVideo) {
    // centerIndex是List显示区域内中间子组件索引值，index值是List当前索引值。当二者相等时，代表视频滑动到屏幕中间。
    if (this.centerIndex === this.index) {
      this.isPlaying = true;
      this.getPlay();
    } else {
      this.isPlaying = false;
      this.getPause();
    }
  }
}

XComponent和AVPlayer渲染视频。在资源初始化时，将XComponent和AVPlayer通过surfaceId绑定，并进入准备状态，在准备状态中将对当前视频是否是List显示区域内中间子组件做判断，如果是则进入播放阶段，源码参考XComponentVideo.ets。

...
// 资源初始化，avplayer设置播放源后触发该状态上报
case 'initialized':
  logger.info('state initialized called');
  this.setSurfaceID(); // 设置显示画面，当播放的资源为纯音频时无需设置
  this.avPlayer.prepare(); // 进入准备状态
  break;
// 已准备状态
case 'prepared':
  logger.info('state prepared called');
  this.avPlayer.audioInterruptMode = audio.InterruptMode.INDEPENDENT_MODE; // 避免同时出现两个视频的声音
  this.avPlayer.loop = true; // 设置循环播放
  this.isLoadingVideo = true; // 视频加载完成
  // 在屏幕中间的视频开始播放
  if (this.centerIndex === this.index) {
    this.isPlaying = true;
    this.avPlayer.play();
  }
  break;
// 正在播放状态
case 'playing':
  this.flag = true; // 视频准备完毕
  this.isLoading = false; // 取消加载
  logger.info('state playing called');
  break;
...

Image进入页面首次加载。进入应用首先加载图片，使用Stack将Image覆盖在XComponent上，并使用visibility来控制图片的显示，源码参考XComponentVideo.ets。

Stack(){
  XComponent({
    type: XComponentType.SURFACE,
    controller: this.xComponentController
  })
    .borderRadius(30)
    .onLoad(() => {
      this.surfaceID = this.xComponentController.getXComponentSurfaceId();
      this.videoSrc = news.newsVideoSrc;
      this.init();
    })
  Image(news.newsImage)
    .borderRadius(30)
    .visibility(this.startOrEnd || !this.flag || this.imageChange ?
    Visibility.Visible :
    Visibility.None)
    .zIndex(1)
}

高性能知识点

本示例使用了LazyForEach 进行数据懒加载优化，以降低内存占用和渲染开销。

工程结构&模块类型

videolistautoplay                            // har类型
|---model 
|   |---NewsItemModel.ets                    // 视频信息
|   |---NewsListDataSource.ets               // IDataSource处理数据监听的基本实现 
|   |---TabBarModel.ets                      // Tab组件信息   
|---view
|   |---CustomComponent.ets                  // 视图层-应用Tab页面
|   |---VideoListAutoplay.ets                // 视图层-应用主页面
|   |---XComponentVideo.ets                  // 视图层-应用视频渲染页面

模块依赖

本实例依赖common模块来获取日志工具类logger。

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为体系杂乱无章，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）路线、视频、文档用来跟着学习是非常有必要的。

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员

鸿蒙 NEXT 全栈开发学习笔记 希望这一份鸿蒙学习文档能够给大家带来帮助~

鸿蒙（HarmonyOS NEXT）最新学习路线