基于HarmonyOS ets开发的简易视频播放器

这是我们使用HarmonyOS的codelab简易视频播放器的codelab简易播放器。内容就是一个主视频界面，包括顶部的视频轮播，中部的播放列表，以及点击和播放列表进入播放界面完成视频播放的功能。使用组件，具体细节和更详细的属性，读者自己在学习中摸索。通过相信本次的学习，你能有所收获。希望视频能帮助你快速了解Harmony的ET，开发的播放器制作学习。本篇最后会贴上参考原文链接。
最初的演讲列表播放视频思路，我们要在界面顶部使用Swiper组件完成播报，使用列表组件海报，点击列表和进入播放使用视频组件，其他
1. 主界面。 1) 在文件夹中的文件夹中添加、文件夹中的文件夹中添加、文件夹、文件夹中的文件夹中创建的VideoData.ets
文件，播放。图片文件夹中添加图片文件夹中的视频，中的路径替换目录由读者自己替换。
const localSource: string = "/common/video/视频1.mp4";
常量 webSource: string = "https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4";
导出 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 Horizo​​ntalVideos:any[] = [
  {
    "image":'/common/image/video_list0.jpg',
    "source":webSource
  },
  {
    "image":'/common/image/video_list1.jpg' ，
    “来源”：webSource
  }，
  {
    “图像”：'/common/image/video_list2.jpg'，
    “来源”：webSource
  }
]
2）在index.ets中引入router和swiperVideos、horizo​​​​ntalVideos。
从'@system.router'导入路由器；
import {swiperVideos,horizo​​ntalVideos} 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组件显示电影列表的文本信息，添加列表组件，使用路由实现页面跳转。
struct Index {
  build() {
    Column() {
     ...
      Flex({ direction: FlexDirection.Row }) {
        Text('即将推出')
          .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(horizo​​ntalVideos, item => {
          ListItem() {
            Horizo​​ntalItem({ imageSrc: item.image, source: item.source } )
          }
        }, item => item.image.toString())
      }
      // 设置列表横向排列
      .listDirection(Axis.Horizo​​ntal)
    }
    .backgroundColor("#EEEEEE")
    .padding({ left: 15, top: 15,右：15，底部：15 })
  }
}
...
@Component
struct Horizo​​ntalItem {
  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,horizo​​ntalVideos} 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('即将推出' )
        .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(horizo​​ntalVideos, item =>{
          ListItem(){
            Horizo​​ntalItem({imageSrc:item.image,source:item.source})
          }
        },item => item.image.toString())
      }
      .listDirection(Axis.Horizo​​ntal)
    }
    .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 Horizo​​ntalItem{
  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) 打开器预览看看效果：