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 部分去掉就行。

HarmonyOS7 音视频播放：AVPlayer 实战

相关推荐

静态路由与DHCP中继对比：2种方案实现跨VLAN三层互通与地址分配

终极音频质量提升指南：如何通过MPC-HC的zita-resampler实现无损音频重采样优化

HarmonyOS7 权限申请全流程：从声明到动态授权

更多资讯

Current Behavior

ESLint valid-typeof 规则详解：强制 `typeof` 比较使用合法字符串字面量

社会工程渗透测试实战指南：基于 GoPhish、SET 与 Evilginx 构建人类攻击面评估

Cloudflare Web Analytics 常见坑点全解：SPA 追踪失联、CSP 拦截与数据缺失的排查修复实战

ASP.NET Web Forms旅游网站源码解析：从用户控件到数据绑定

ONES十年演进：从研发管理工具到智能决策平台

今日更新

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？