公司网站设计 杭州 推荐,外贸怎么入行,微信公众号需要开发吗,注册公司需要什么流程介绍
本篇Codelab使用ArkTS语言实现视频播放器#xff0c;主要包括主界面和视频播放界面#xff0c;我们将一起完成以下功能#xff1a;
主界面顶部使用Swiper组件实现视频海报轮播。主界面下方使用List组件实现视频列表。播放界面使用Video组件实现视频播放。在不使用视频…介绍
本篇Codelab使用ArkTS语言实现视频播放器主要包括主界面和视频播放界面我们将一起完成以下功能
主界面顶部使用Swiper组件实现视频海报轮播。主界面下方使用List组件实现视频列表。播放界面使用Video组件实现视频播放。在不使用视频组件默认控制器的前提下实现自定义控制器。播放界面底部使用图标控制视频播放/暂停。播放界面底部使用Slider组件控制和实现视频播放进度。播放界面使用Stack容器组件的序控制实现在视频播放画面上添加开始暂停/加载图标。 相关概念
Swiper组件滑动容器提供切换子组件显示的能力。List组件列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据例如图片和文本。Video组件用于播放视频文件并控制其播放状态的组件。Navigator组件路由容器组件提供路由跳转能力。ForEach组件基于数组类型数据执行循环渲染。
环境搭建
软件要求
DevEco Studio版本DevEco Studio 3.1 Release。OpenHarmony SDK版本API version 9。
硬件要求
开发板类型润和RK3568开发板。OpenHarmony系统3.2 Release。
环境搭建
完成本篇Codelab我们首先要完成开发环境的搭建本示例以RK3568开发板为例参照以下步骤进行
获取OpenHarmony系统版本标准系统解决方案二进制。以3.2 Release版本为例 2.搭建烧录环境。
完成DevEco Device Tool的安装完成RK3568开发板的烧录
3.搭建开发环境。
开始前请参考工具准备完成DevEco Studio的安装和开发环境配置。开发环境配置完成后请参考使用工程向导创建工程模板选择“Empty Ability”。工程创建完成后选择使用真机进行调测。
代码结构解读
本篇Codelab只对核心代码进行讲解。
├──entry/src/main/ets // 代码区
│ ├──common
│ │ └──constants
│ │ └──CommonConstants.ets // 样式常量类
│ ├──entryability
│ │ └──EntryAbility.ts // 程序入口类
│ ├──model
│ │ └──VideoControll.ets // 视频播放控制相关方法类
│ ├──pages
│ │ ├──SimpleVideoIndex.ets // 主界面
│ │ └──SimpleVideoPlay.ets // 视频播放界面
│ ├──view
│ │ ├──IndexModule.ets // 自定义首页List模块组件文件
│ │ ├──IndexSwiper.ets // 自定义首页Swiper组件文件
│ │ ├──VideoPlayer.ets // 自定义播放界面视频组件文件
│ │ └──VideoPlaySlider.ets // 自定义播放界面视频进度条组件文件
│ └──viewmodel
│ ├──HorizontalVideoItem.ets // 水平视频类
│ ├──ParamItem.ets // 参数类
│ ├──SwiperVideoItem.ets // 自定义播放界面视频组件文件
│ └──VideoData.ets // 首页相关数据
└──entry/src/main/resource // 应用静态资源目录
构建主界面
主界面由视频轮播模块和多个视频列表模块组成效果如图所示 VideoData.ets中定义的视频轮播图数组SWIPER_VIDEOS和视频列表图片数组HORIZONTAL_VIDEOS。
// VideoData.ets
import { HorizontalVideoItem } from ./HorizontalVideoItem;
import { SwiperVideoItem } from ./SwiperVideoItem;export const SWIPER_VIDEOS: SwiperVideoItem[] [new SwiperVideoItem($r(app.media.ic_banner1)),new SwiperVideoItem($r(app.media.ic_banner2)),new SwiperVideoItem($r(app.media.ic_banner3))
];export const HORIZONTAL_VIDEOS: HorizontalVideoItem[] [new HorizontalVideoItem(1, $r(app.media.ic_video_list0), 视频1),new HorizontalVideoItem(2, $r(app.media.ic_video_list1), 视频2),new HorizontalVideoItem(3, $r(app.media.ic_video_list2), 视频3)
];
IndexSwiper.ets文件中定义的轮播图子组件SwiperVideo点击轮播图片页面跳转到视频播放页面并携带本地视频flag效果如图所示 // IndexSwiper.ets
Component
export struct SwiperVideo {build() {Column() {Swiper() {ForEach(SWIPER_VIDEOS, (item: SwiperVideoItem) {SwiperItem({ imageSrc: item.image, source: $rawfile(videoTest.mp4) })}, (item: SwiperVideoItem) JSON.stringify(item))}.autoPlay(true)}// 样式设置...}
}Component
struct SwiperItem {private imageSrc: Resource $r(app.string.empty);private source: Resource $r(app.string.empty);private paramItem: ParamItem new ParamItem();...build() {// 跳转一使用Navigator组件跳转到视频播放界面Navigator({ target: SECOND_PAGE, type: NavigationType.Push }) {Image(this.imageSrc).borderRadius(MARGIN_FONT_SIZE.FIRST_MARGIN)}.params(this.paramItem)}
}
IndexModule.ets文件中定义的视频列表图片子组件VideoModule点击子组件中的图片页面跳转到视频播放页面并携带网络视频flag效果如图所示 // IndexModule.ets
Component
export struct VideoModule {private moduleName: string ;build() {Column() {// 视频列表上方的文本信息...// 视频列表组件List({ space: MARGIN_FONT_SIZE.FIRST_MARGIN }) {ForEach(HORIZONTAL_VIDEOS, (item: HorizontalVideoItem) {ListItem() {HorizontalItem({imageSrc: item.image,source: NET,videoName: item.name})}}, (item: HorizontalVideoItem) JSON.stringify(item))}// 设置列表横向排列.listDirection(Axis.Horizontal)}// 样式设置...}
}Component
struct HorizontalItem {private imageSrc: Resource $r(app.string.empty);private source: string ;private videoName: string ;build() {// 跳转二使用route跳转到视频播放界面Column() {Image(this.imageSrc).width(MARGIN_FONT_SIZE.SEVENTH_MARGIN).height(MARGIN_FONT_SIZE.SIXTH_MARGIN).onClick(() {router.pushUrl({url: SECOND_PAGE,params: { source: this.source }});})...}.justifyContent(FlexAlign.Center)}
}
在SimpleVideoIndex.ets主界面中引用SwiperVideo和VideoModule子组件。
// SimpleVideoIndex.ets
Entry
Component
struct SimpleVideoIndex {build() {Column({ space: MARGIN_FONT_SIZE.FOURTH_MARGIN }) {// 视频轮播组件SwiperVideo()List() {ForEach(LIST, (item: string) {ListItem() {VideoModule({ moduleName: item }).margin({ top: MARGIN_FONT_SIZE.FIRST_MARGIN })}}, (item: string) JSON.stringify(item))}.listDirection(Axis.Vertical).margin({ top: MARGIN_FONT_SIZE.THIRD_MARGIN })}...}
}
构建视频播放界面
VideoPlayer.ets其中定义了视频播放子组件VideoPlayer onPrepared回调方法中可以获取视频总时长onUpdate回调方法中可实时获取到视频播放的当前时间戳onFinish是视频播放结束后的回调方法onError是视频播放出错的回调方法。
// VideoPlayer.ets
Component
export struct VideoPlayer {private source: string | Resource ;private controller: VideoController new VideoController();private previewUris: Resource $r(app.media.preview);Provide currentTime: number 0;Provide durationTime: number 0;Provide durationStringTime: string START_TIME;Provide currentStringTime: string START_TIME;Consume isPlay: boolean;Consume isOpacity: boolean;Consume flag: boolean;Consume isLoading: boolean;Consume progressVal: number;build() {Column() {Video({src: this.source,previewUri: this.previewUris,controller: this.controller}).width(ALL_PERCENT).height(STRING_PERCENT.NINETY_PERCENT).controls(false).autoPlay(false).objectFit(ImageFit.Contain).loop(false).onUpdate((event) {if (event) {this.currentTime event.time;this.currentStringTime changeSliderTime(this.currentTime);}}).onPrepared((event) {this.prepared(event?.duration);}).onFinish(() {this.finish();}).onError(() {prompt.showToast({duration: COMMON_NUM_DURATION,message: MESSAGE});})VideoSlider({ controller: this.controller })}}...
}
在自定义组件VideoPlayer底部使用了自定义子组件VideoSliderVideoSlider自定义组件中显示和控制视频播放进度效果如图所示 // VideoPlaySlider.ets
Component
export struct VideoSlider {Consume isOpacity: boolean;private controller: VideoController new VideoController();Consume currentStringTime: string;Consume currentTime: number;Consume durationTime: number;Consume durationStringTime: string;Consume isPlay: boolean;Consume flag: boolean;Consume isLoading: boolean;Consume progressVal: number;build() {Row({ space: MARGIN_FONT_SIZE.FIRST_MARGIN }) {...Slider({value: this.currentTime,min: 0,max: this.durationTime,step: 1,style: SliderStyle.OutSet}).blockColor($r(app.color.white)).width(STRING_PERCENT.SLIDER_WITH).trackColor(Color.Gray).selectedColor($r(app.color.white)).showSteps(true).showTips(true).trackThickness(this.isOpacity ? SMALL_TRACK_THICK_NESS : BIG_TRACK_THICK_NESS).onChange((value: number, mode: SliderChangeMode) {this.sliderOnchange(value, mode);})...}.opacity(this.isOpacity ? DEFAULT_OPACITY : 1)...}...
}
在VideoController.ets中的视频控制和回调的相关方法。
// VideoControll.ets
export function changeSliderTime(value: number): string {let second: number value % COMMON_NUM_MINUTE;let min: number Number.parseInt((value / COMMON_NUM_MINUTE).toString());let head min COMMON_NUM_DOUBLE ? ${ZERO_STR}${min} : min;let end second COMMON_NUM_DOUBLE ? ${ZERO_STR}${second} : second;let nowTime ${head}${SPLIT}${end};return nowTime;
} 在SimpleVideoPlay.ets播放界面引用VideoPlayer子组件并在视频播放页面使用堆叠容器在视频播放画面中心堆叠控制、视频加载图标效果如图所示 // SimpleVideoPlay.ets
Entry
Component
struct Play {// 取到Index页面跳转来时携带的source对应的数据。private source: string (router.getParams() as Recordstring, Object).source as string;private startIconResource: Resource $r(app.media.ic_public_play);private backIconResource: Resource $r(app.media.ic_back);Provide isPlay: boolean false;Provide isOpacity: boolean false;controller: VideoController new VideoController();Provide isLoading: boolean false;Provide progressVal: number 0;Provide flag: boolean false;...onPageHide() {this.controller.pause();}build() {Column() {// 顶部返回以及标题...Stack() {// 不同的播放状态渲染不同得控制图片if (!this.isPlay !this.isLoading) {Image(this.startIconResource).width(MARGIN_FONT_SIZE.FIFTH_MARGIN).height(MARGIN_FONT_SIZE.FIFTH_MARGIN)// 同一容器中兄弟组件显示层级关系z值越大显示层级越高 用于控制图片在视频上。.zIndex(STACK_STYLE.IMAGE_Z_INDEX)}if (this.isLoading) {Progress({value: STACK_STYLE.PROGRESS_VALUE,total: STACK_STYLE.PROGRESS_TOTAL,type: ProgressType.ScaleRing}).color(Color.Grey).value(this.progressVal).width(STACK_STYLE.PROGRESS_WIDTH).style({strokeWidth: STACK_STYLE.PROGRESS_STROKE_WIDTH,scaleCount: STACK_STYLE.PROGRESS_SCALE_COUNT,scaleWidth: STACK_STYLE.PROGRESS_SCALE_WIDTH}).zIndex(STACK_STYLE.PROGRESS_Z_INDEX)}VideoPlayer({source: this.source,controller: this.controller}).zIndex(0)}}.height(ALL_PERCENT).backgroundColor(Color.Black)}
}
总结
您已经完成了本次Codelab的学习并了解到以下知识点
Swiper组件的使用。List组件的使用。Video组件的使用。Slider组件的使用。如何实现自定义视频控制器。
为了帮助大家更深入有效的学习到鸿蒙开发知识点小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源获取完整版方式请点击→《HarmonyOS教学视频》
HarmonyOS教学视频语法ArkTS、TypeScript、ArkUI等.....视频教程 鸿蒙生态应用开发白皮书V2.0PDF
获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF》 鸿蒙 (Harmony OS)开发学习手册
一、入门必看
应用开发导读(ArkTS)…… 二、HarmonyOS 概念
系统定义技术架构技术特性系统安全........ 三、如何快速入门《做鸿蒙应用开发到底学习些啥》
基本概念构建第一个ArkTS应用…… 四、开发基础知识
应用基础知识配置文件应用数据管理应用安全管理应用隐私保护三方应用调用管控机制资源分类与访问学习ArkTS语言…… 五、基于ArkTS 开发
Ability开发UI开发公共事件与通知窗口管理媒体安全网络与链接电话服务数据管理后台任务(Background Task)管理设备管理设备使用信息统计DFX国际化开发折叠屏系列…… 更多了解更多鸿蒙开发的相关知识可以参考《鸿蒙 (Harmony OS)开发学习手册》
