HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（一）使用Video播放视频

HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享（一）使用Video播放视频

“仿抖音快手”的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组件还支持以下的播放事件：

onStart：播放时触发该事件。

onPause：暂停时触发该事件。

onFinish：播放结束时触发该事件。

onError：播放失败时触发该事件。

onStop：播放停止时触发该事件(当stop()方法被调用后触发)。

onPrepared：视频准备完成时触发该事件。事件参数的duration为视频时长，单位秒。

onSeeking：操作进度条过程时上报时间信息。事件参数的time为播放进度，单位秒。

onSeeked：操作进度条完成后，上报播放时间信息。事件参数的time为播放进度，单位秒。

onUpdate：播放进度变化时触发该事件。事件参数的time为播放进度，单位秒。

onFullscreenChange：在全屏播放与非全屏播放状态之间切换时触发该事件。事件参数的fullscreen表示是否进入全屏播放状态。

就网络短视频而言，按照以下方式使用Video组件，即可满足短视频的基本播放要求：

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

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