【Harmony OS】【ArkUI】ets开发 简易视频播放器

​前言：这一次我们来使用ets的Swiper组件、List组件和Video组件制作一个简易的视频播放器。本篇是以HarmonyOS官网的codelab简易视频播放器（eTS）为基础进行编写。本篇最主要的内容就是一个主界面包括顶部的视频海报轮播，中部的视频播放列表，以及点击海报和播放列表进入到播放界面完成视频播放的功能。师傅领进门，修行在个人，所以本篇只讲大概的组件使用，具体的细节和更详细的属性读者自己在学习中摸索。相信通过这次的学习，你能有所收获。希望能帮助你快速了解Harmony的ETS开发，学会简单的视频播放器制作学习。本篇最后会贴上参考原文链接。

首先讲一下大致的思路，我们要在主界面顶部使用Swiper组件完成视频海报轮播，下方使用List组件完成视频播放的列表，点击海报和播放列表进入视频播放界面使用Video组件制作，其他的属性就由读者自行探索。

1.         构建主界面。

1)       在default文件夹中创建data、image、video文件夹，在data文件夹中创建VideoData.ets文件，用来定义电影轮播图数组swiperVideos和视频列表图片数组horizontalVideos。Image文件夹中添加图片，video文件夹中添加视频，代码中的文件路径替换由读者自行替换。

const localSource: string = "/common/video/video1.mp4";
const webSource: string = "https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4";

export const swiperVideos:any[] = [
  {
    "image":'/common/image/video_ad0.jpg',
    "source":localSource
  },
  {
    "image":'/common/image/video_ad1.jpg',
    "source":localSource
  },
  {
    "image":'/common/image/video_ad2.jpg',
    "source":localSource
  }
]

export const horizontalVideos:any[] = [
  {
    "image":'/common/image/video_list0.jpg',
    "source":webSource
  },
  {
    "image":'/common/image/video_list1.jpg',
    "source":webSource
  },
  {
    "image":'/common/image/video_list2.jpg',
    "source":webSource
  }
]

2)       在index.ets中引入router和swiperVideos、horizontalVideos。

import router from '@system.router';

import {swiperVideos,horizontalVideos} from '../common/data/VideoData.ets'

3)       在index.ets中添加Swiper组件用于显示电影轮播图，使用Navigator实现页面跳转。

@Entry

@Component

struct Index {

  build() {

    Column() {

      Swiper() {

        ForEach(swiperVideos, item => {

          SwiperItem({ imageSrc: item.image, source: item.source })

        }, item => item.image.toString())

      }

      .autoPlay(true)

      .height(180)

      .itemSpace(15)

    }

    .backgroundColor("#EEEEEE")

    .padding({ left: 15, top: 15, right: 15, bottom: 15 })

  }

}

@Component

struct SwiperItem {

  private imageSrc: string

  private source: string

  build() {

    Navigator({ target: 'pages/Play', type: NavigationType.Push }) {

      Image(this.imageSrc).objectFit(ImageFit.Cover)

    }

    .params({ source: this.source })

  }

}

4)       添加Flex组件用于显示电影列表上方的文本信息，添加List组件用于显示电影列表，使用router实现页面跳转。

@Entry 

@Component 

struct Index { 

  build() { 

    Column() { 

     ... 

      Flex({ direction: FlexDirection.Row }) { 

        Text('Coming soon') 

          .fontSize(20).fontWeight(FontWeight.Bold).margin({ left: 10 }) 

        Image('/common/image/next.png').height(8).width(16) 

      } 

      .margin({ top: 20, bottom: 15 }) 

      List({ space: 15 }) { 

        ForEach(horizontalVideos, item => { 

          ListItem() { 

            HorizontalItem({ imageSrc: item.image, source: item.source }) 

          } 

        }, item => item.image.toString()) 

      } 

      // 设置列表横向排列 

      .listDirection(Axis.Horizontal) 

    } 

    .backgroundColor("#EEEEEE") 

    .padding({ left: 15, top: 15, right: 15, bottom: 15 }) 

  } 

} 

... 

@Component 

struct HorizontalItem { 

  private imageSrc: string 

  private source: string 

  build() { 

    Image(this.imageSrc) 

      .width('80%') 

      .height('25%') 

      .onClick(() => { 

        router.push({ 

          uri: 'pages/Play', 

          params: { source: this.source } 

        }) 

      }) 

  } 

}
 

5)       整个index.ets文件的代码如下：

import router from '@system.router';

import {swiperVideos,horizontalVideos} from '../common/data/VideoData.ets'

@Entry

@Component

struct Index {

  build() {

    Column() {

      //轮播组件

      Swiper(){

        ForEach(swiperVideos, item => {

          SwiperItem({ imageSrc: item.image, source: item.source })

        }, item => item.image.toString())

      }

      .autoPlay(true)

      .height(180)

      .itemSpace(15)

      //文本信息

      Flex({direction:FlexDirection.Row}){

        Text('Coming soon')

        .fontSize(20).fontWeight(FontWeight.Bold).margin({left:10})

        Image('/common/image/Record.png').height(8).width(16)

      }

      .margin({top:20, bottom:15})

      List({space:15}){

        ForEach(horizontalVideos, item =>{

          ListItem(){

            HorizontalItem({imageSrc:item.image,source:item.source})

          }

        },item => item.image.toString())

      }

      .listDirection(Axis.Horizontal)

    }

    .backgroundColor("#EEEEEE")

    .padding({ left: 15, top: 15, right: 15, bottom: 15 })

  }

}

@Component

struct SwiperItem{

  private imageSrc:string

  private source:string

  build(){

    Navigator({target:'pages/Play',type:NavigationType.Push}){

      Image(this.imageSrc).objectFit(ImageFit.Cover)

    }

    .params({source:this.source})

  }

}

@Component

struct HorizontalItem{

  private imageSrc:string

  private source:string

  build(){

    Image(this.imageSrc)

    .width('80%')

    .height('25%')

    .onClick(()=>{

      router.push({

        uri:'pages/Play',

        params:{source:this.source}

      })

    })

  }

}

6)       打开预览器看一下效果：

​

​

欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh