往期知识点整理
- 【HarmonyOS 鸿蒙实战开发】NavDestination弹窗
- 【HarmonyOS 鸿蒙实战开发】全局自定义组件复用实现案例
- 【HarmonyOS 鸿蒙实战开发】在TaskPool线程中操作关系型数据库实现案例
- 【HarmonyOS 鸿蒙实战开发】 发短信案例
- 【HarmonyOS 鸿蒙实战开发】 骨架屏实现案例
- 【HarmonyOS 鸿蒙实战开发】 画笔调色板
- 【HarmonyOS 鸿蒙实战开发】图片编辑实现马赛克效果
- 【HarmonyOS 鸿蒙实战开发】橡皮擦案例
- 【HarmonyOS 鸿蒙实战开发】使用ArkUI的FrameNode扩展实现动态布局类框架
- 【HarmonyOS 鸿蒙实战开发】自定义装饰器
- 【HarmonyOS 鸿蒙实战开发】滑动视频自动播放
- 持续更新中……
介绍
本示例主要介绍视频列表滑动到屏幕中间自动播放场景,利用onScrollIndex获取List显示区域内中间子组件索引值的能力来判断播放,利用懒加载场景会预加载List显示区域外cachedCount的内容的能力来实现视频连续播放。
效果图预览
使用说明
- 等待视频加载完成,首页中间视频会自动播放。
- 滑动列表,视频达到中间位置会自动播放。
- 滑动列表返回上一个视频会继续播放。
实现思路
本例涉及的关键特性和实现方案如下:
- 使用List渲染视频列表,LazyForEach实现视频列表懒加载。将每个视频模块存放在ListItem中,LazyForEach懒加载可以通过设置cachedCount来指定缓存数量,使用onScrollIndex获取List显示区域内中间位置子组件的索引值。
List() {
LazyForEach(this.newsList, (news: NewsItem, index: number) => {
ListItem() {
XComponentVideo({
centerIndex