• 【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文件夹中添加视频，代码中的文件路径替换由读者自行替换。

    1. const localSource: string = "/common/video/video1.mp4";
    2. const webSource: string = "https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4";
    3.  
    4. export const swiperVideos:any[] = [
    5.   {
    6.     "image":'/common/image/video_ad0.jpg',
    7.     "source":localSource
    8.   },
    9.   {
    10.     "image":'/common/image/video_ad1.jpg',
    11.     "source":localSource
    12.   },
    13.   {
    14.     "image":'/common/image/video_ad2.jpg',
    15.     "source":localSource
    16.   }
    17. ]
    18.  
    19. export const horizontalVideos:any[] = [
    20.   {
    21.     "image":'/common/image/video_list0.jpg',
    22.     "source":webSource
    23.   },
    24.   {
    25.     "image":'/common/image/video_list1.jpg',
    26.     "source":webSource
    27.   },
    28.   {
    29.     "image":'/common/image/video_list2.jpg',
    30.     "source":webSource
    31.   }
    32. ]

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

    1. import router from '@system.router';
    2.  
    3. import {swiperVideos,horizontalVideos} from '../common/data/VideoData.ets'

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

    1. @Entry
    2.  
    3. @Component
    4.  
    5. struct Index {
    6.  
    7.   build() {
    8.  
    9.     Column() {
    10.  
    11.       Swiper() {
    12.  
    13.         ForEach(swiperVideos, item => {
    14.  
    15.           SwiperItem({ imageSrc: item.image, source: item.source })
    16.  
    17.         }, item => item.image.toString())
    18.  
    19.       }
    20.  
    21.       .autoPlay(true)
    22.  
    23.       .height(180)
    24.  
    25.       .itemSpace(15)
    26.  
    27.     }
    28.  
    29.     .backgroundColor("#EEEEEE")
    30.  
    31.     .padding({ left: 15, top: 15, right: 15, bottom: 15 })
    32.  
    33.   }
    34.  
    35. }
    36.  
    37.  
    38.  
    39. @Component
    40.  
    41. struct SwiperItem {
    42.  
    43.   private imageSrc: string
    44.  
    45.   private source: string
    46.  
    47.  
    48.  
    49.   build() {
    50.  
    51.     Navigator({ target: 'pages/Play', type: NavigationType.Push }) {
    52.  
    53.       Image(this.imageSrc).objectFit(ImageFit.Cover)
    54.  
    55.     }
    56.  
    57.     .params({ source: this.source })
    58.  
    59.   }
    60.  
    61. }

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

    1. @Entry 
    2.  
    3. @Component 
    4.  
    5. struct Index { 
    6.  
    7.   build() { 
    8.  
    9.     Column() { 
    10.  
    11.      ... 
    12.  
    13.       Flex({ direction: FlexDirection.Row }) { 
    14.  
    15.         Text('Coming soon') 
    16.  
    17.           .fontSize(20).fontWeight(FontWeight.Bold).margin({ left: 10 }) 
    18.  
    19.         Image('/common/image/next.png').height(8).width(16) 
    20.  
    21.       } 
    22.  
    23.       .margin({ top: 20, bottom: 15 }) 
    24.  
    25.  
    26.  
    27.       List({ space: 15 }) { 
    28.  
    29.         ForEach(horizontalVideos, item => { 
    30.  
    31.           ListItem() { 
    32.  
    33.             HorizontalItem({ imageSrc: item.image, source: item.source }) 
    34.  
    35.           } 
    36.  
    37.         }, item => item.image.toString()) 
    38.  
    39.       } 
    40.  
    41.       // 设置列表横向排列 
    42.  
    43.       .listDirection(Axis.Horizontal) 
    44.  
    45.     } 
    46.  
    47.     .backgroundColor("#EEEEEE") 
    48.  
    49.     .padding({ left: 15, top: 15, right: 15, bottom: 15 }) 
    50.  
    51.   } 
    52.  
    53. } 
    54.  
    55. ... 
    56.  
    57. @Component 
    58.  
    59. struct HorizontalItem { 
    60.  
    61.   private imageSrc: string 
    62.  
    63.   private source: string 
    64.  
    65.  
    66.  
    67.   build() { 
    68.  
    69.     Image(this.imageSrc) 
    70.  
    71.       .width('80%') 
    72.  
    73.       .height('25%') 
    74.  
    75.       .onClick(() => { 
    76.  
    77.         router.push({ 
    78.  
    79.           uri: 'pages/Play', 
    80.  
    81.           params: { source: this.source } 
    82.  
    83.         }) 
    84.  
    85.       }) 
    86.  
    87.   } 
    88.  
    89. }

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

    1. import router from '@system.router';
    2.  
    3. import {swiperVideos,horizontalVideos} from '../common/data/VideoData.ets'
    4.  
    5.  
    6.  
    7. @Entry
    8.  
    9. @Component
    10.  
    11. struct Index {
    12.  
    13.   build() {
    14.  
    15.     Column() {
    16.  
    17.       //轮播组件
    18.  
    19.       Swiper(){
    20.  
    21.         ForEach(swiperVideos, item => {
    22.  
    23.           SwiperItem({ imageSrc: item.image, source: item.source })
    24.  
    25.         }, item => item.image.toString())
    26.  
    27.       }
    28.  
    29.       .autoPlay(true)
    30.  
    31.       .height(180)
    32.  
    33.       .itemSpace(15)
    34.  
    35.  
    36.  
    37.       //文本信息
    38.  
    39.       Flex({direction:FlexDirection.Row}){
    40.  
    41.         Text('Coming soon')
    42.  
    43.         .fontSize(20).fontWeight(FontWeight.Bold).margin({left:10})
    44.  
    45.         Image('/common/image/Record.png').height(8).width(16)
    46.  
    47.       }
    48.  
    49.       .margin({top:20, bottom:15})
    50.  
    51.       List({space:15}){
    52.  
    53.         ForEach(horizontalVideos, item =>{
    54.  
    55.           ListItem(){
    56.  
    57.             HorizontalItem({imageSrc:item.image,source:item.source})
    58.  
    59.           }
    60.  
    61.         },item => item.image.toString())
    62.  
    63.       }
    64.  
    65.       .listDirection(Axis.Horizontal)
    66.  
    67.     }
    68.  
    69.     .backgroundColor("#EEEEEE")
    70.  
    71.     .padding({ left: 15, top: 15, right: 15, bottom: 15 })
    72.  
    73.   }
    74.  
    75. }
    76.  
    77.  
    78.  
    79. @Component
    80.  
    81. struct SwiperItem{
    82.  
    83.   private imageSrc:string
    84.  
    85.   private source:string
    86.  
    87.  
    88.  
    89.   build(){
    90.  
    91.     Navigator({target:'pages/Play',type:NavigationType.Push}){
    92.  
    93.       Image(this.imageSrc).objectFit(ImageFit.Cover)
    94.  
    95.     }
    96.  
    97.     .params({source:this.source})
    98.  
    99.   }
    100.  
    101. }
    102.  
    103.  
    104.  
    105. @Component
    106.  
    107. struct HorizontalItem{
    108.  
    109.   private imageSrc:string
    110.  
    111.   private source:string
    112.  
    113.  
    114.  
    115.   build(){
    116.  
    117.     Image(this.imageSrc)
    118.  
    119.     .width('80%')
    120.  
    121.     .height('25%')
    122.  
    123.     .onClick(()=>{
    124.  
    125.       router.push({
    126.  
    127.         uri:'pages/Play',
    128.  
    129.         params:{source:this.source}
    130.  
    131.       })
    132.  
    133.     })
    134.  
    135.   }
    136.  
    137. }

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

    8b08e3e8be1eb6cc5f4c38095943ae8d_433x753.gif%40900-0-90-f.gif

     

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

  • 相关阅读:
    数据结构和算法的笔记手写2
    在服务器上开Juypter Lab教程（远程访问）
    Tsinghua:Finding Skill Neurons in Pre-trained Transformer-based Language Models
    Linux下JAVA使用JNA调用C++的动态链接库（g++或者gcc编译的.so文件）
    MySQL必知必会_第十九~二十三章
    基于微信小程序电影交流平台源码成品（微信小程序毕业设计）
    你适合做自动化测试吗？
    以单颗CMOS摄像头重构三维场景，维悟光子发布单目红外3D成像模组
    SpringBoot：如何优雅地进行响应数据封装、异常处理？
    anaconda python 版本对应关系
  • 原文地址：https://blog.csdn.net/weixin_44708240/article/details/126155063