【HarmonyOS 鸿蒙实战开发】滑动视频自动播放

---

📚往期笔录记录🔖：

🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🔖记录一场鸿蒙开发岗位面试经历~

🔖持续更新中……

---

介绍

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

效果图预览

使用说明

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

实现思路

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

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

List() {
   
  LazyForEach(this.newsList, (news: NewsItem, index: number) => {
   
    ListItem() {
   
      XComponentVideo({
   
        centerIndex: this.centerIndex,
        news: news,
        index: index
      })
    }
    .backgroundColor(