HarmonyOS7 音视频播放：AVPlayer 实战

文章目录前言AVPlayer 是什么代码实现画面载体XComponent核心代码播放控制完整示例完整播放器骨架常见误区小白必踩完整可运行示例AVPlayer 播音频代码解析写在最后前言做个能播放音视频的 app听起来高大上其实 HarmonyOS 已经把最难的编解码封装好了你只要学会AVPlayer这个播放器对象怎么用就行。这篇文章我带你实现一个播放/暂停/进度俱全的本地视频播放器。网络视频套路一样只是地址不同。AVPlayer 是什么AVPlayer是系统提供的多媒体播放器负责拿到资源 → 解码 → 输出到界面。你不用懂编解码只要设置数据源、准备、播放、控制。代码实现import{media}fromkit.MediaKitletplayer:media.AVPlayerasyncfunctioninitPlayer(surfaceId:string,url:string){playerawaitmedia.createAVPlayer()player.urlurl// 设置播放地址player.surfaceIdsurfaceId// 绑定到 XComponent 的渲染表面}要点createAVPlayer()异步创建播放器。player.url本地或网络媒体地址。player.surfaceId播放画面要贴在哪个渲染表面上这个表面由XComponent提供见下。画面载体XComponent视频画面不能直接用普通组件显示得用XComponent提供一块原生渲染表面核心代码LocalsurfaceId:stringbuild(){Column(){XComponent({id:video,type:XComponentType.SURFACE,controller:this.xcCtrl}).onLoad((surfaceId:string){this.surfaceIdsurfaceId// 拿到表面 id}).width(100%).height(240)}}XComponent的onLoad回调会给你一个surfaceId把它存起来传给player.surfaceId画面就出来了。必须先有surfaceId才能初始化播放器——所以初始化要等onLoad之后。播放控制播放器有几个核心状态控制就围绕它们完整示例functionplay(){player.play()}// 播放functionpause(){player.pause()}// 暂停functionseekTo(ms:number){player.seek(ms)}// 拖到指定毫秒// 监听状态与进度player.on(stateChange,(state){console.info(播放器状态state)// playing / paused / completed})player.on(timeUpdate,(cur:number,dur:number){this.progresscur/dur// 计算播放进度比例})play()/pause()最基础的播放暂停。seek(ms)跳转到指定时间做进度条拖动用。timeUpdate事件持续回调当前时间和总时长用来更新进度条。完整播放器骨架EntryComponentV2struct VideoPlayer{LocalsurfaceId:stringLocalprogress:number0Localplaying:booleanfalseprivatexcCtrl:XComponentControllernewXComponentController()privateplayer?:media.AVPlayerbuild(){Column(){XComponent({id:v,type:XComponentType.SURFACE,controller:this.xcCtrl}).onLoad(async(id){this.surfaceIdidthis.playerawaitmedia.createAVPlayer()this.player.urlfile:///data/storage/el2/base/haps/entry/files/demo.mp4this.player.surfaceIdidthis.player.on(timeUpdate,(c,d){this.progressd?c/d:0})}).width(100%).height(240)Row(){Button(this.playing?暂停:播放).onClick((){if(this.playing){this.player?.pause();this.playingfalse}else{this.player?.play();this.playingtrue}})Slider({value:this.progress*100,min:0,max:100}).onChange((v){this.player?.seek(v/100*1000)})}}.padding(12)}}这是一个能播、能暂停、能拖进度的播放器雏形。常见误区小白必踩误区说明surfaceId没拿到就初始化播放器必须先等XComponent.onLoad拿到表面 id再创建 AVPlayer 绑定。不监听timeUpdate进度条要的当前/总时长都从这里来不监听就做不了进度条。音频也套 XComponent纯音频不需要画面载体直接createAVPlayer设 url 播放即可。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例AVPlayer 播音频用AVPlayer播放一段网络音频带播放/暂停控制。代码解析// AVPlayer 播放网络音频import{media}fromkit.MediaKitEntryComponentstruct AudioPlayer{privateavp?:media.AVPlayerStateplaying:booleanfalseaboutToAppear(){media.createAVPlayer().then((p){this.avpp p.urlhttps://example.com/song.mp3// 设置数据源p.on(stateChange,(s){if(splaying){this.playingtrue}if(spaused){this.playingfalse}})})}build(){Column({space:16}){Text(this.playing?播放中:已暂停).fontSize(20)Button(this.playing?暂停:播放).onClick((){if(this.playing){this.avp?.pause()}else{this.avp?.play()}})}.padding(20)}}你会看到什么进入页面后点「播放」文字变「播放中」并听到声音点「暂停」停止。状态由stateChange事件驱动 UI。动手改一改把url换成你自己的音频地址验证。监听timeUpdate事件做一个进度条。在aboutToDisappear里this.avp?.release()避免资源泄漏。写在最后AVPlayer 的套路建播放器 → 绑 surfaceId → 设 url → 监听进度 → 控制播放。画面靠XComponent出控制靠play/pause/seek。音频播放更简单——不需要XComponent直接createAVPlayer设 url 播放即可。做音乐 app 的话把视频那套 surface 部分去掉就行。