内容简介
本文介绍了如何应用ArkUI框架提供的video组件，实现一个具备繁难播放器。通过VideoController控制器来管制倍速、全屏、进度调节等性能。
因为应用本地视频文件会影响App的包大小，所以通常咱们的视频文件来源于网络地址，记得须要在config或者module.json对应的"abilities"中增加网络应用权限ohos.permission.INTERNET。
成果展现
增加权限（网络地址须要）
"abilities":[ { "permissions": ["ohos.permission.INTERNET"], } ] 应用一个VideoController对象能够管制一个或多个video。
//一个VideoController对象能够管制一个或多个video。 controller: VideoController = new VideoController(); 接口
declare interface VideoOptions { src?: string | Resource; currentProgressRate?: number | string | PlaybackSpeed; previewUri?: string | PixelMap | Resource; controller?: VideoController; } 其中仅src(视频播放源的门路)这个参数是必填的。
★反对本地视频门路和网络门路。
★反对在resources上面的video或rawfile文件夹里搁置媒体资源。
★反对dataability://的门路前缀，用于拜访通过Data Ability提供的视频门路
currentProgressRate:number视频播放倍速，反对0.75、1.0、1.25、1.75、2.0。
previewUri:string预览图片的门路，能够作为视频未播放时的封面。
controller:VideoController控制器。一个VideoController对象能够管制一个或多个video。如果须要通过代码管制视频的播放、暂停等，能够给Video组件设置这个参数，而后通过控制器的如下接口管制视频播放状态：
PlaybackSpeed类型接口阐明
declare interface VideoOptions { src?: string | Resource; currentProgressRate?: number | string | PlaybackSpeed; previewUri?: string | PixelMap | Resource; controller?: VideoController; }VideoController
一个VideoController对象能够管制一个或多个video。
★start() : void开始播放。
★pause() : void暂停播放。
★stop() : void进行播放。
★setCurrentTime(value: number, seekMode: SeekMode)指定视频播放的进度地位，并指定跳转模式。value是进度，seekMode是跳转模式
★requestFullscreen() : boolean()申请全屏播放，true是横屏，false竖屏。
★exitFullscreen() : void退出全屏。在这儿，我同样须要将setCurrentTime独自拎出setCurrentTime8+setCurrentTime(value: number, seekMode: SeekMode)指定视频播放的进度地位，并指定跳转模式。
★参数
★SeekMode8+类型接口阐明
declare interface VideoOptions { src?: string | Resource; currentProgressRate?: number | string | PlaybackSpeed; previewUri?: string | PixelMap | Resource; controller?: VideoController; } Video属性
muted（是否静音）、autoPlay（自动播放）、controls（管制栏）、objectFit（显示模式）、loop（是否循环播放）。其中，objectFit参数设置值为ImageFit.Cover则铺满整个容器。
具体介绍
.muted(boolean) 默认值false是否静音。
.autoPlay(boolean) 默认值false是否自动播放。
.controls(boolean) 默认值true管制视频播放的管制栏是否显示。
.loop(boolean) 是否单个视频循环播放。
.objectFit(ImageFit) 默认值Cover设置视频显示模式。ImageFit有如下枚举值可选ImageFit枚举阐明
事件：
onStart() => void播放时触发该事件。
onPause() => void暂停时触发该事件。
onFinish() => void播放完结时触发该事件。
onError() => void播放失败时触发该事件。onFullscreenChange(event?: { fullscreen: boolean }) => void) 视频进入和退出全屏时触发该事件。
onPrepared(event?: { duration: number }) => void视频筹备实现时触发该事件，通过duration能够获取视频时长，单位为秒(s)。
onSeeking(event?: { time: number }) => void操作进度条过程时上报工夫信息，单位为s。onSeeked(event?: { time: number }) => void操作进度条实现后，上报播放工夫信息，单位为s。
onUpdate(event?: { time: number }) => void播放进度变动时触发该事件，单位为s，更新工夫距离为250ms。
残缺示例
@Entry @Component struct Index { @State message: string = '视频预览' @State previewUris: Resource = $r('app.media.openharmony'); //预览封面 controller: VideoController = new VideoController(); @State currentProgressRate: number = 1 @State muted: boolean = false @State autoPlay: boolean = true @State controls: boolean = true @State startStatus: boolean = true @State loop: boolean = true aboutToAppear() { this.controller.requestFullscreen(true) this.controller.start() } build() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) Video({ src: $r('app.media.video'), previewUri: this.previewUris, // 视频封面 currentProgressRate: this.currentProgressRate, // 视频播放倍速 controller: this.controller, }) .muted(this.muted) // 是否静音 .autoPlay(this.autoPlay) // 是否自动播放 .controls(this.controls) // 管制视频播放的管制栏是否显示 .objectFit(ImageFit.Contain) // 视频显示模式 .loop(this.loop) // 是否单个视频循环播放 .height("60%") .onStart(() => { // 播放时触发该事件 console.info('onStart'); }) .onPause(() => { // 暂停时触发该事件 console.info('onPause'); }) .onFinish(() => { console.info('onFinish'); }) .onError(() => { // 播放失败时触发该事件 console.error('onError'); }) .onFullscreenChange((e) => { console.info('视频进入和退出全屏时触发该事件：' + e.fullscreen) }) .onPrepared((e) => { console.info('视频筹备实现时触发该事件：' + e.duration) }) .onSeeking((e) => { console.info('操作进度条过程时上报工夫信息：' + e.time) }) .onSeeked((e) => { console.info('操作进度条实现后，上报播放工夫信息：' + e.time) }) .onUpdate((e) => { console.info('播放进度变动时触发该事件：' + e.time) }) Row({}) { Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { Button("播放") .onClick(() => { this.controller.start() }).margin(8) Button("暂停") .onClick(() => { this.controller.pause() }) Button("循环播放") .onClick(() => { this.loop=!this.loop }) Button("2倍速") .onClick(() => { this.currentProgressRate=2 }) Button("静音") .onClick(() => { this.muted=!this.muted }) Button("进行") .onClick(() => { this.controller.stop() }) Button("全屏播放") .onClick(() => { this.controller.requestFullscreen(true) }) Button("退出全屏") .onClick(() => { this.controller.exitFullscreen() }).margin(8) Button("管制栏是否显示") .onClick(() => { this.controls = !this.controls }).margin(8) Button("指定视频播放的进度") .onClick(() => { this.controller.setCurrentTime(9) }) } } } .width('100%').height('100%') } }总结
本文介绍了如何应用ArkUI框架提供的video组件，实现一个具备视频播放、倍速管制、进度调节的播放器。通过VideoController控制器来管制倍速、全屏、进度调节等性能。当然，除了文中分享的视频播放器样例，开发者还能够通过拓展其余相干属性和办法，实现更多好玩的样例。