内容简介
本文介绍了如何使用ArkUI框架提供的video组件,实现一个具有简易播放器。通过VideoController控制器来控制倍速、全屏、进度调节等功能。
由于使用本地视频文件会影响App的包大小,所以通常我们的视频文件来源于网络地址,记得需要在config或者module.json对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。
效果展示
添加权限(网络地址需要)
1 2 3 4 5 6 | "abilities" :[ { "permissions" : [ "ohos.permission.INTERNET" ], } ] |
使用一个VideoController对象可以控制一个或多个video。
1 2 3 | //一个VideoController对象可以控制一个或多个video。 controller: VideoController = new VideoController(); |
接口
1 2 3 4 5 6 7 | 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类型接口说明
1 2 3 4 5 6 | 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+类型接口说明
1 2 3 4 5 6 7 | 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。
完整示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | @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控制器来控制倍速、全屏、进度调节等功能。当然,除了文中分享的视频播放器样例,开发者还可以通过拓展其他相关属性和方法,实现更多好玩的样例。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析