鸿蒙NEXT开发笔记(十七)仿抖音快手App的视频播放组件

“仿抖音快手”的App项目在Android系统中有成熟的实战案例,具体参见《Android Studio开发实战:从零基础到App上线(第3版)》第14章的“14.4  实战项目:仿抖音的短视频分享”,该项目的前后端通讯方式采用HTTP接口实现,既支持向服务端上传短视频,也支持从服务端拉取短视频观看,并且在多部Android真机上测试通过,具备很高的学习研究价值。
那么把“仿抖音快手”App改造成鸿蒙App的话,不但用到ArkUI的各种界面组件,还能熟悉ArkUI的的各种交互方式,而且要跟后端服务器传输HTTP报文,这些编程技巧非常锻炼学习者的鸿蒙App编码能力。毕竟资讯类App往往只有简单的浏览动作,不如短视频App那样有着丰富的交互操作,所以“仿抖音快手”的鸿蒙App项目非常值得大家学习和研究。
“仿抖音快手”的鸿蒙App首先要支持播放网络视频,能从各种传输协议的网络地址中拉取视频流。在Android系统中,SDK自带的VideoView只能播放http/https开头的网络视频文件,不能播放采取直播协议的在线视频流。要想在Android手机上观看直播视频,还得集成另外的ExoPlayer,并分别适配各种直播协议才行。
那么对鸿蒙系统来说,SDK自带的Video组件在底层支撑了各种视频传输协议,只要一个Video组件就能播放各种链接的网络视频,既包括http/https开头的网络视频文件,也包括采取m3u8、rtsp、rtmp等直播协议的视频流,大大降低了视频播放的开发门槛。
待播放的视频路径要在Video组件的构造方法中传入,除此以外,构造方法还支持传入其他参数,以实现更丰富的播控功能。下面是可在Video构造方法中传入的常用参数:
src:视频的数据源,支持本地视频和网络视频。其中本地视频可填file://路径前缀的字符串,网络视频填完整的链接地址。
previewUri:视频未播放时的预览图片路径,默认不显示图片。
currentProgressRate:视频播放倍速。默认为Speed_Forward_1_00_X表示正常倍速。
controller:设置视频控制器,用来控制视频的播放状态。调用“new VideoController()”即可创建默认的视频控制器。
视频控制器VideoController支持的播控方法说明如下:
start:开始播放。
pause:暂停播放,显示当前帧,再次播放时从当前位置继续播放。
stop:停止播放,显示当前帧,再次播放时从头开始播放。
reset:重置内部播放器。显示当前帧,再次播放时从头开始播放。
setCurrentTime:指定视频播放的当前进度位置,单位秒。
requestFullscreen:请求全屏播放。
exitFullscreen:退出全屏播放。
除了在构造方法中指定的参数以外,Video组件还可设置下列的属性方法:
muted:设置是否静音。默认为false。
autoPlay:设置是否自动播放。默认为false。
controls:设置控制视频播放的控制栏是否显示。默认为true。
objectFit:设置视频显示模式。取值说明同图像的显示模式ImageFit。
loop:设置是否单个视频循环播放。默认为false表示不循环(只播放一次)。
就网络短视频而言,按照以下方式使用Video组件,即可满足短视频的基本播放要求:

Video({ src: this.videoUrl })
  .width('100%').height('100%')
  .objectFit(ImageFit.Contain) // 组件区域包含整个视频画面
  .autoPlay(true) // 是否自动播放
  .controls(false) // 是否显示控制条
  .loop(true) // 是否循环播放

下一篇文章会介绍如何从系统相册中选择待播放的视频文件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值