ShortVideoApp视频播放模块一

124 阅读2分钟

一、概述模块功能及实现

  • 定义视频播放器的状态枚举类PlayState;
  • 使用视频播放组件Video;使用视频控制器VideoController;定义视频信息类VideoInfo及JSON数据;
  • 基于Stack和Video实现视频播放器--层叠布局
  • 基于VideoController实现视频播放器的开始与暂停
  • 基于Flex布局实现视频分类页签--Flex布局=>均匀分布
  • 基于线性布局实现视频信息展示区
  • 基于Image和Text实现侧边操作栏
  • 基于Swiper组件实现滑动切换视频功能
  • 基于IDataSource接口实现视频数据存储
  • 通过Builder自定义导航栏的样式

二、ArkTS、ArkUI、ArkComplier之间的联系

  • ArkUI是一套构建分布式应用界面的声明式UI开发框架,基于ArkTS API
  • ArkComplier(方舟编译器)是华为自研的统一编程平台,ArkComplier会把ArkTS/TS/JS编译为方舟字节码,运行时直接运行方舟字节码。
  • ArkTS动态扩展UI元素,声明式UI、扩展了状态管理,组件内,父子组件内、应用内、跨设备传递状态和数据。双向绑定等。条件渲染、循环渲染等渲染控制。

image.png ArkTS扩展了多种语法范式 1.@Builder/@BuilderParam 2.@Extend/@Styles 3.stateStyles ArkTS状态管理--developer.huawei.com/consumer/cn… ArkTS渲染控制--developer.huawei.com/consumer/cn…

三、shortVideo功能 1.用户一旦进入首页,在首页就会播放视频; 2.用户往上或者往下活动,可以切换视频; 3.用户可以通过视频控制器来暂停或者播放视频,也可以拖动视频的播放进度; Video、VideoController、Swiper组件。

四、播放器状态枚举类、Video组件的使用、VideoController的使用 视频播放器的三种状态:STOP/START/PAUSE 当视频播放器进入首页时,视频应该播放,处于Start状态;当滑动视频切换到下一个视频时,下一个视频进入start状态,上一个视频处于stop状态;用户点击pause按钮--处于pause状态;当用户点击视频的开始按钮时,视频处于start状态;当用户切换到其他功能页面,或者应用进入后台时,则处于stop状态。 AVPlayer--音视频--端到端--功能强大--偏底层 Video--数据源 创建视频组件Video

image.png

image.png

VideoController的使用: start:开始播放; pause:暂停播放,显示当前帧,再次播放时从当前位置继续播放 stop:停止播放,显示当前帧,再次播放时从头开始播放 setCurrentTime:指定视频播放的进度位置 requestFullscreen:请求全屏播放 exitFullscreen:退出全屏播放

使用默认的视频控制器--支持视频的开始、暂停、进度调整、全屏显示 自定义控制器:

image.png