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

这篇具有很好参考价值的文章主要介绍了【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 文章来源地址https://www.toymoban.com/news/detail-426967.html

到了这里,关于【Harmony OS】【ArkUI】ets开发 简易视频播放器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt 实现简易的视频播放器,功能选择视频,播放,暂停,前进,后退,进度条拖拉,视频时长显示

    1.效果图 2.代码实现 2.1 .pro文件 2.2 .h文件 2.3 .cpp文件

    2024年04月12日
    浏览(41)
  • Harmony OS (eTS语言)的起源和演进

      Mozilla创造了JS,Microsoft创建了TS,Huawei进一步推出了eTS。eTS(extended TypeScript)是鸿蒙(Harmony)生态的一种应用开发语言。也是Harmony系统(Harmony开发语言java、js、eTS,Harmony3.0后java语言废弃了)主推的一种开发语言。它在TypeScript(简称TS)的基础上,扩展了声明式UI、状态管理

    2024年02月03日
    浏览(39)
  • 【OpenCV+Qt】实现简易视频播放器——支持进度条拖动

    OpenCV实现视频播放器,其思路大致就是在线程中使用OpenCV中的VideoCapture循环读取本地视频的每一帧Mat,然后发送到界面转换成QImage进行显示,而进度条拖动则用到了VideoCapture中的set函数,进度条则是使用Qslider;并且通过自定义新的进度条类实现点击跳转功能; 效果: 1.进行

    2023年04月08日
    浏览(52)
  • ChatGpt+人工修正 PyQt5 实现简易视频播放器

    支持功能: 1. 视频播放速度调整 2. 视频声音调整 3. 视频当前播放帧截帧(用的ffmpeg 怎么装自己百度去,截取准确度很高,QT自带的截帧那玩意信号不触发,不好使) 4. 视频暂停

    2024年02月16日
    浏览(39)
  • 播放器开发(五):视频帧处理并用SDL渲染播放

    VideoOutPut 模块 1、初始化【分配缓存、读取信息】 2、开始线程工作【从队列读帧-缩放-发送渲染信号到窗口】 VideoWidget 自定义Widget类 1、定义内部变量 2、如果使用SDL,需要进行初始化 3、接收到信号后需要执行槽函数进行渲染 分配缓存 执行缩放 创建SDL窗口纹理渲染器 SDL渲

    2024年01月22日
    浏览(44)
  • Android开发之视频播放器

    今天教大家做一个简单的视频播放器hh 至此,结束!

    2023年04月09日
    浏览(50)
  • 用Qt开发的ffmpeg流媒体播放器,支持截图、录像,支持音视频播放,支持本地文件播放、网络流播放

    本工程qt用的版本是5.8-32位,ffmpeg用的版本是较新的5.1版本。它支持TCP或UDP方式拉取实时流,实时流我采用的是监控摄像头的RTSP流。音频播放采用的是QAudioOutput,视频经ffmpeg解码并由YUV转RGB后是在QOpenGLWidget下进行渲染显示。本工程的代码有注释,可以通过本博客查看代码或者

    2024年02月03日
    浏览(97)
  • Qt音视频开发41-文件推流(支持网页和播放器播放并切换进度)

    本功能最初也是有一些人提过类似的需求,就是能不能将本地的音视频文件,通过纯Qt程序推流出去,然后用户可以直接在网页上播放,也可以用各种播放器播放,然后还可以任意切换播放进度,其实说白了就是个文件服务器,用户通过网络地址访问以后,告诉对方当前是媒

    2024年02月01日
    浏览(67)
  • opencv+ffmpeg+QOpenGLWidget开发的音视频播放器demo

        本篇文档的demo包含了 1.使用OpenCV对图像进行处理,对图像进行置灰,旋转,抠图,高斯模糊,中值滤波,部分区域清除置黑,背景移除,边缘检测等操作;2.单纯使用opencv播放显示视频;3.使用opencv和openGL播放显示视频;4.在ffmpeg解码后,使用opencv显示视频,并支持对视

    2024年02月12日
    浏览(66)
  • QT软件开发-基于FFMPEG设计视频播放器-软解图像(一)

    QT软件开发-基于FFMPEG设计视频播放器-CPU软解视频(一) https://xiaolong.blog.csdn.net/article/details/126832537 QT软件开发-基于FFMPEG设计视频播放器-GPU硬解视频(二) https://xiaolong.blog.csdn.net/article/details/126833434 QT软件开发-基于FFMPEG设计视频播放器-解码音频(三) https://xiaolong.blog.csdn.

    2023年04月08日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包