前言：这一次我们来使用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
【Harmony OS】【ArkUI】ets开发 简易视频播放器的更多相关文章
- C语言基于GTK+Libvlc实现的简易视频播放器
小编心语:现下,各种视频播放软件层出不穷,竞争也越演越烈,不知道大家有木有这个想法,小编有时在想能不能做一款属于自己的视频播放器呢~小编特意去实验楼,整理出了这篇关于如何实现简易视频播放器的博文.简易 ...
- C语言基于GTK+Libvlc实现的简易视频播放器(二）
简易视频播放器-全屏播放 一.课程说明 上一次我们使用gtk+libvlc实现了一个最简单的视频播放器,可以实现点击按钮暂定和停止播放视频,以及同步显 示视频播放进度,但即使作为一个视频播放器,只有这 ...
- Android本地视频播放器开发--简易播放器原型
在以前的基础上,将音视频进行合并,音频播放采用OpenSL ES,视频播放采用OpenGL ES2.0进行显示,这次的版本其中音频和视频是在同一个线程,会造成音频断断续续,后续会采用音频使用SDL,视 ...
- 简易视频播放器2 （基于Qt、opencv）
因项目需要,需要实现一个对以保存的监测视频快速查看功能. 查询网上一些资料,初步简易的实现了一下. 实际效果图: 该程序基于Qt5.4,opencv248,开发环境为win8.1 结构为: video ...
- ios开发 MPMoviePlayerController 视频播放器
项目中用到视频播放功能, 写点视频基础部分 MPMoviePlayerController是通过MediaPlayer.frame引入的,可用于播放在iOS支持的所有格式的视频,用起来很简单!!! M ...
- FFmpeg简易播放器的实现-视频播放
本文为作者原创:https://www.cnblogs.com/leisure_chn/p/10047035.html,转载请注明出处 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...
- FFmpeg简易播放器的实现-音视频播放
本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10235926.html 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...
- FFmpeg简易播放器的实现-音视频同步
本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10284653.html 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...
- FFmpeg简易播放器的实现-音频播放
本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10068490.html 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...
- FFmpeg简易播放器的实现-最简版
本文为作者原创:https://www.cnblogs.com/leisure_chn/p/10040202.html,转载请注明出处 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...
随机推荐
- java判断文件是否存在
1.判断远程服务器上文件 import java.net.HttpURLConnection; import java.net.URL; public boolean checkRemoteFile( ...
- RabbitMQ消息队列安装和配置以及推送消息
好久没有写了,最近项目用到RabbitMQ,找了一些资料试验,最后终于成功了,把安装配置的步骤分享给大家. 一.Erlang安装具体过程: 1.双击otp_win32_R16801.exe(不同版本可 ...
- Linux 体系结构
Linux 体系结构 Linux 嵌入式系统的组成 层次结构图 bios 1.硬件检测 2.初始化系统设备 3.装入os 4.调os向硬件发出的指令 bsp 板级支持包 硬件相关 开发板原理图 开 ...
- Java测试Junit
Junit就是做测试用的,想想平常我们是怎么测试我们的方法或者类的,是不是在main方法里面去调用?这样有缺点: 1.每次都要在main方法里面写测试,假如我要上线新系统,里面有1000个方法需要测试 ...
- 离群点检测与序列数据异常检测以及异常检测大杀器-iForest
1. 异常检测简介 异常检测,它的任务是发现与大部分其他对象不同的对象,我们称为异常对象.异常检测算法已经广泛应用于电信.互联网和信用卡的诈骗检测.贷款审批.电子商务.网络入侵和天气预报等领域.这些异 ...
- Nginx, HTTPS的配置
server {listen 443; ####HTTPS指定端口server_name www.web.com; #####域名或者IP root /data/wwwroot/l ...
- POJ3046选蚂蚁创建集合_线性DP
POJ3046选蚂蚁创建集合 一个人的精力是有限的呢,如果一直做一件事迟早会疲惫,所以自己要把握好,不要一直埋头于一件事,否则效率低下还浪费时间 题目大意:一共有T(1,2...n为其种类)种蚂蚁,A ...
- struts2：图解action之HelloWorld示范（从action转到JSP）
虽然Struts 2.x的Action在技术上不需要实现任何接口或继承任何类型,但是,大多情况下我们都会出于方便的原因,使Action类继承com.opensymphony.xwork2.Action ...
- kruskal重构树
kruskal重构树 kruskal重构树,顾名思义,是在kruskal的时候顺便搞出来的一棵重构树,具体地说是一个堆. 先说说这个东西是怎么搞出来的吧:默认事先把边按边权从小到大排序,在kruska ...
- java-switch语句
switch语句是常用的java循环判断语句,但是有的知识点并不一定清楚. 首先是switch语句括号中的判断条件,判断条件只能是整型或者字符和整型或者字符组成的表达式. 再就是case语句,可以称之 ...
