往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

介绍

短视频切换在应用开发中是一种常见场景，上下滑动可以切换视频，十分方便。本文基于Swiper组件和Video组件实现短视频切换功能。

效果图预览

使用说明

1. 上下滑动可以切换视频。
2. 点击屏幕暂停视频，再次点击继续播放。

下载安装

1.模块oh-package.json5文件中引入依赖。

"dependencies": {
  "@ohos-cases/shortvideo": "har包地址"
}

2.ets文件import自定义视图实现列表视图。

import { VideoSwiper, VideoBuilder } from '@ohos-cases/shortvideo';

快速使用

本章节主要介绍了如何快速使用VideoSwiper组件以及VideoBuilder来实现短视频切换功能。

1. 构建遮罩层视图。遮罩层内容包括视频信息以及博主头像等内容，开发者可以自定义。

@Builder
export function VideoComponent(videoData: VideoData) {
  VideoMask({
    videoData: videoData
  })
}

1. 初始化数据。数据项类型为VideoBuilder，参数分别为短视频数据以及对应的遮罩层视图框架。

 aboutToAppear() {
   for (let i = 0; i < VIDEO_DATA.length; i++) {
     // 模拟评论数据,真实场景需要请求后台获取评论数据
     for (let j = 0; j < 100; j++) {
       VIDEO_DATA[i].commentDataSource.pushData({
         id: j + "",
         avatar: VIDEO_DATA[i].head,
         name: "精灵球收七龙珠" + j,
         commentContent: "我没有看到后续，但总有人会看到" + j,
         timeAgo: j + "小时前",
         address: "广州",
         likeCount: j + ""
       });
     }
     this.data.pushData(new VideoBuilder(VIDEO_DATA[i], wrapBuilder(VideoComponent)));
   }
 }

1. 构建短视频视图。

VideoSwiper({
  data: this.data,
  playButtonView: this.playButtonView,
  defaultIndex: this.defaultIndex
})

属性(接口)说明

VideoData属性，开发者可以自定义VideoData参数属性。

属性	类型	释义	默认值
video	VideoCompData	视频组件数据	-
videoMask	VideoMaskData	视频遮罩层信息	-

VideoCompData属性

属性	类型	释义	默认值
videoUrl	ResourceStr	视频资源地址	-
duration	number	视频时长	-
duration	number	视频遮罩层信息	-

VideoMaskData属性

属性	类型	释义	默认值
name	string	博主名称	-
description	number	视频描述	-
time	PlayMode	视频日期	-
head	ResourceStr	头像路径	-
likeCount	string	点赞数量	-
commentCount	string	评论数量	-
favoriteCount	string	收藏数量	-
shareCount	string	分享次数	-
hotspot	string	热点	-
commentDataSource	CommentDataSource	评论数据	-

VideoBuilder属性

属性	类型	释义	默认值
data	VideoData	视图内容数据	-
contentBuilder	WrappedBuilder<[VideoData]>	视图框架UI	-

VideoSwiper视图属性

属性	类型	释义	默认值
data	VideoNew	短视频数据	-
playButtonView	()=>void	播放按钮视图	-

实现思路

1. 使用Swiper创建一个竖直的可上下滑动的框架。

   LazyForEach(this.data, (item: VideoBuilder, index: number) => {
     Stack({ alignContent: Alignment.Top }) {
       VideoSection({
         videoData: item,
         changeVideo: this.changeVideo,
         firstFlag: this.firstFlag,
         playBoo: this.playBoo,
         videoItemIndex: index,
         currentVideoIndex: this.currentVideoIndex,
        })
        item.contentBuilder.builder(item.data);
        if (!this.playBoo && !this.changeVideo) {
          Column() {
            this.playButtonView()
          }
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)
          .width($r('app.string.shortvideo_hundred_percent'))
          .height($r('app.string.shortvideo_hundred_percent'))
          .onClick(() => {
            this.playBoo = true;
          })
        }
      }
    },(item: VideoBuilder) => JSON.stringify(item))
   

2. 在Swiper组件中使用Video组件承载视频。

   Video({
      // 使用Video组件实现播放视频并控制其播放状态
      src: this.videoData.data.video,
      controller: this.controller,
      previewUri: this.videoData.data.previewUri
   })
   

高性能知识点

本示例使用了LazyForEach进行数据懒加载，LazyForEach懒加载可以通过设置cachedCount属性来指定缓存数量，同时搭配组件复用能力以达到性能最优效果。

工程结构&模块类型

shortvideo                             // har类型
|---model
|   |---BasicDataSource.ets            // 模型层-懒加载数据源
|   |---DataModel.ets                  // 数据模型层-视频数据
|---utils
|   |---Logger.ets                     // 日志
|   |---VideoSection.ets               // 视频播放组件
|   |---VideoSwiper.ets                // 短视频切换视图
|---view
|   |---CommentView.ets                // 视图层-评论组件
|   |---ShortVideo.ets                 // 视图层-主页
|   |---Side.ets                       // 视图层-视频右侧页面操作栏与左侧信息栏
|   |---VideoMask.ets                  // 视图层-视频遮罩层