鸿蒙上制作一个视频播放器
媒体子系统是 OpenHarmony 中重要的子系统，可以提供音视频播放能力。
媒体子系统为开发者提供一套简单且易于理解的接口，使得开发者能够方便接入系统并使用系统的媒体资源。
媒体子系统提供以下常用功能如下：
①音视频播放（AVPlayer9+），AudioPlayer6+ 和 VideoPlayer8+ 整合，升级了状态机和错误码，推荐使用。
②音视频录制（AVRecorder9+），AudioRecorder6+ 和 VideoRecorder9+ 整合，推荐使用。
③音频播放（AudioPlayer6+），AVPlayer9+ 发布后停止维护，请使用 AVPlayer9+。
④视频播放（VideoPlayer8+），AVPlayer9+ 发布后停止维护，请使用 AVPlayer9+。
⑤音频录制（AudioRecorder6+），AVRecorder9+ 发布后停止维护，请使用 AVRecorder9+。
⑥视频录制（VideoRecorder9+），AVRecorder9+ 发布后停止维护，请使用 AVRecorder9+。
从 3.2 开始 OpenHarmony 推出了 AVPlayer 和 AVRecorder 接口，之前的 VideoPlayer、AudioPlayer 这些接口会停止维护，所以我们今天学习下怎么使用 AVPlayer 接口。
导入模块
importmediafrom'@ohos.multimedia.media';
创建 avplayer：
this.avPlayer=awaitmedia.createAVPlayer()
如上，我们使用的是 promise 接口，对应的接口定义为：
/** *CreatesanAVPlayerinstance. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramcallbackCallbackusedtoreturnAVPlayerinstanceiftheoperationissuccessful;returnsnullotherwise. *@throws{BusinessError}5400101-Nomemory.Returnbycallback. */ functioncreateAVPlayer(callback:AsyncCallback):void; /** *CreatesanAVPlayerinstance. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@returnsAPromiseinstanceusedtoreturnAVPlayerinstanceiftheoperationissuccessful;returnsnullotherwise. *@throws{BusinessError}5400101-Nomemory.Returnbypromise. */ functioncreateAVPlayer():Promise;注册 avplayer 回调：
//注册状态变化回调，不同状态时做不同动作
avPlayer.on('stateChange',async(state,reason)=>{
……
}）
//注册时间变化回调，方便更新进度条时间
avPlayer.on('timeUpdate',(time:number)=>{
……
})
avplayer 播放流程：
graphLR 赋值avPlayer.url开始播放-->回调进入initialized-->赋值avPlayer.surfaceId-->avPlayer.prepare-->回调进入prepared-->avPlayer.play
//视频播放伪代码
asyncavPlayerDemo(){
this.avPlayer.on('stateChange',async(state,reason)=>{
switch(state){
case'idle'://成功调用reset接口后触发该状态机上报
console.info(TAG+'stateidlecalled')
this.avPlayer.release()//释放avplayer对象
break;
case'initialized'://avplayer设置播放源后触发该状态上报
console.info(TAG+'stateinitializedcalled')
this.avPlayer.surfaceId=this.surfaceID//设置显示画面，当播放的资源为纯音频时无需设置
this.avPlayer.prepare().then(()=>{
console.info(TAG+'preparesuccess');
},(err)=>{
console.error(TAG+'preparefiled,errormessageis:'+err.message)
})
break;
case'prepared'://prepare调用成功后上报该状态机
console.info(TAG+'statepreparedcalled')
this.avPlayer.play()//调用播放接口开始播放
break;
case'playing'://play成功调用后触发该状态机上报
console.info(TAG+'stateplayingcalled')
if(this.count==0){
this.avPlayer.pause()//调用暂停播放接口
}else{
this.avPlayer.seek(10000,media.SeekMode.SEEK_PREV_SYNC)//前向seek置10秒处,触发seekDone回调函数
}
break;
case'paused'://pause成功调用后触发该状态机上报
console.info(TAG+'statepausedcalled')
if(this.count==0){
this.count++
this.avPlayer.play()//继续调用播放接口开始播放
}
break;
case'completed'://播放结束后触发该状态机上报
console.info(TAG+'statecompletedcalled')
this.avPlayer.stop()//调用播放结束接口
break;
case'stopped'://stop接口成功调用后触发该状态机上报
console.info(TAG+'statestoppedcalled')
this.avPlayer.reset()//调用reset接口初始化avplayer状态
break;
case'released':
console.info(TAG+'statereleasedcalled')
break;
case'error':
console.info(TAG+'stateerrorcalled')
break;
default:
console.info(TAG+'unkownstate:'+state)
break;
}
})
//创建avPlayer实例对象
this.avPlayer=awaitmedia.createAVPlayer()
letfdPath='fd://'
letpathDir="/data/storage/el2/base/haps/entry/files"//pathDir在FA模型和Stage模型的获取方式不同，请参考开发步骤首行的说明，根据实际情况自行获取。
//path路径的码流可通过"hdcfilesendD:xxxH264_AAC.mp4/data/app/el2/100/base/ohos.acts.multimedia.media.avplayer/haps/entry/files"命令，将其推送到设备上
letpath=pathDir+'/H264_AAC.mp4'
letfile=awaitfs.open(path)
fdPath=fdPath+''+file.fd
//赋值url后就会进入stateChangecallback
this.avPlayer.url=fdPath
}
其他播放控制接口：
/**
*Prepareaudio/videoplayback,itwillrequestresourceforplaying.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@paramcallbackAcallbackinstanceusedtoreturnwhenpreparecompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbycallback.
*@throws{BusinessError}5400106-Unsupportformat.Returnbycallback.
*/
prepare(callback:AsyncCallback):void;
/**
*Prepareaudio/videoplayback,itwillrequestresourceforplaying.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@returnsAPromiseinstanceusedtoreturnwhenpreparecompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbypromise.
*@throws{BusinessError}5400106-Unsupportformat.Returnbypromise.
*/
prepare():Promise;
/**
*Playaudio/videoplayback.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@paramcallbackAcallbackinstanceusedtoreturnwhenplaycompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbycallback.
*/
play(callback:AsyncCallback):void;
/**
*Playaudio/videoplayback.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@returnsAPromiseinstanceusedtoreturnwhenplaycompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbypromise.
*/
play():Promise;
/**
*Pauseaudio/videoplayback.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@paramcallbackAcallbackinstanceusedtoreturnwhenpausecompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbycallback.
*/
pause(callback:AsyncCallback):void;
/**
*Pauseaudio/videoplayback.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@returnsAPromiseinstanceusedtoreturnwhenpausecompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbypromise.
*/
pause():Promise;
/**
*Stopaudio/videoplayback.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@paramcallbackAcallbackinstanceusedtoreturnwhenstopcompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbycallback.
*/
stop(callback:AsyncCallback):void;
/**
*Stopaudio/videoplayback.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@returnsAPromiseinstanceusedtoreturnwhenstopcompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbypromise.
*/
stop():Promise;
/**
*ResetAVPlayer,itwilltoidlestateandcansetsrcagain.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@paramcallbackAcallbackinstanceusedtoreturnwhenresetcompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbycallback.
*/
reset(callback:AsyncCallback):void;
/**
*ResetAVPlayer,itwilltoidlestateandcansetsrcagain.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@returnsAPromiseinstanceusedtoreturnwhenresetcompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbypromise.
*/
reset():Promise;
/**
*ReleasesresourcesusedforAVPlayer.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@paramcallbackAcallbackinstanceusedtoreturnwhenreleasecompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbycallback.
*/
release(callback:AsyncCallback):void;
/**
*ReleasesresourcesusedforAVPlayer.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@returnsAPromiseinstanceusedtoreturnwhenreleasecompleted.
*@throws{BusinessError}5400102-Operationnotallowed.Returnbypromise.
*/
release():Promise;
/**
*Jumpstothespecifiedplaybackposition.
*@since9
*@syscapSystemCapability.Multimedia.Media.AVPlayer
*@paramtimeMsPlaybackpositiontojump,shouldbein[0,duration].
*@parammodeSee@SeekMode.
*/
seek(timeMs:number,mode?void;
其他回调接口：
/** *Registerorunregisterlistensformediaplaybackevents. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybackstateChangeevent. */ on(type:'stateChange',callback:(state:AVPlayerState,reason:StateChangeReason)=>void):void; off(type:'stateChange'):void; /** *Registerorunregisterlistensformediaplaybackevents. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybackvolumeevent. */ on(type:'volumeChange',callback:Callback):void; off(type:'volumeChange'):void; /** *Registerorunregisterlistensformediaplaybackevents. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybackendofstream */ on(type:'endOfStream',callback:Callback):void; off(type:'endOfStream'):void; /** *Registerorunregisterlistensformediaplaybackevents. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybackseekDoneevent. */ on(type:'seekDone',callback:Callback):void; off(type:'seekDone'):void; /** *Registerorunregisterlistensformediaplaybackevents. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybackspeedDoneevent. */ on(type:'speedDone',callback:Callback):void; off(type:'speedDone'):void; /** *Registerorunregisterlistensformediaplaybackevents. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybacksetBitrateDoneevent. */ on(type:'bitrateDone',callback:Callback):void; off(type:'bitrateDone'):void; /** *LRegisterorunregisterlistensformediaplaybackevents. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybacktimeUpdateevent. */ on(type:'timeUpdate',callback:Callback):void; off(type:'timeUpdate'):void; /** *Registerorunregisterlistensformediaplaybackevents. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybackdurationUpdateevent. */ on(type:'durationUpdate',callback:Callback):void; off(type:'durationUpdate'):void; /** *Registerorunregisterlistensforvideoplaybackbufferingevents. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackbufferingupdateeventtolistenfor. *@paramcallbackCallbackusedtolistenforthebufferingupdateevent,returnBufferingInfoTypeandthevalue. */ on(type:'bufferingUpdate',callback:(infoType:BufferingInfoType,value:number)=>void):void; off(type:'bufferingUpdate'):void; /** *Registerorunregisterlistensforstartrendervideoframeevents. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybackeventreturn. */ on(type:'startRenderFrame',callback:Callback):void; off(type:'startRenderFrame'):void; /** *Registerorunregisterlistensforvideosizechangeevent. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybackeventreturnvideosize. */ on(type:'videoSizeChange',callback:(width:number,height:number)=>void):void; off(type:'videoSizeChange'):void; /** *Registerorunregisterlistensforaudiointerruptevent,referto{@link#audio.InterruptEvent} *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybackeventreturnaudiointerruptinfo. */ on(type:'audioInterrupt',callback:(info:audio.InterruptEvent)=>void):void; off(type:'audioInterrupt'):void; /** *RegisterorunregisterlistensforavailablebitratelistcollectcompletedeventsforHLSprotocolstreamplayback. *Thiseventwillbereportedafterthe{@link#prepare}called. *@since9 *@syscapSystemCapability.Multimedia.Media.AVPlayer *@paramtypeTypeoftheplaybackeventtolistenfor. *@paramcallbackCallbackusedtolistenfortheplaybackeventreturnavailablebitratelist. */ on(type:'availableBitrates',callback:(bitrates:Array)=>void):void; off(type:'availableBitrates'):void;
简单样例
界面：
build(){
Stack({alignContent:Alignment.Center}){
if(this.isShowMenu){
Column(){
//视频名称
PlayTitle({title:this.displayName,handleBack:this.handleBack})
Row(){
//播放控件
PreVideo({handleClick:this.handlePrevClick})
PlayButton({isPlaying:$isPlaying})
NextVideo({handleClick:this.handleNextClick})
}
.margin({top:'40%'})
Blank()
//时间刻度
Row(){
Text(getTimeString(this.currentTime))
.fontSize(25)
.fontColor(Color.White)
Blank()
Text(this.fileAsset?getTimeString(this.fileAsset.duration):'00:00')
.fontSize(25)
.fontColor(Color.White)
}
.width('95%')
//进度条
Slider({value:this.fileAsset?this.currentTime/this.fileAsset.duration*100:0})
.width('92%')
.selectedColor(Color.White)
.onChange((value:number)=>{
Logger.info(TAG,'seektimechange')
this.currentTime=this.fileAsset.duration*value/100
this.videoPlayer.seek(this.currentTime)
})
}
.height('100%')
.zIndex(2)
}
Row(){
XComponent({
id:'componentId',
type:'surface',
controller:this.mxcomponentController
})
.onLoad(()=>{
Logger.info(TAG,'onLoadiscalled')
this.playVideo()
})
.width('100%')
.aspectRatio(this.ratio)
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
.width('100%')
.height('100%')
.backgroundColor(Color.Black)
.onClick(()=>{
this.isShowMenu=!this.isShowMenu
})
}
播放：
//根据视频文件获取视频源尺寸并生成surface
//视频文件的路径在/storage/media/100/local/files/Videos
asyncprepareVideo(){
this.ratio=this.fileAsset.width/this.fileAsset.height
this.mxcomponentController.setXComponentsurfaceSize({
surfaceWidth:this.fileAsset.width,
surfaceHeight:this.fileAsset.height
})
this.surfaceId=this.mxcomponentController.getXComponentsurfaceId()
this.fd=awaitthis.fileAsset.open('Rw')
Logger.info(TAG,`fd://'${this.fd}`)
return'fd://'+this.fd
}
//初始化视频文件并初始化avplayer
asyncplayVideo(){
Logger.info(TAG,'playVideo')
try{
awaitthis.getMediaList()
letfdPath=awaitthis.prepareVideo()
this.videoPlayer.on('timeUpdate',(time:number)=>{
console.info('timeUpdatesuccess,andnewtimeis:'+time)
this.currentTime=time;
})
awaitthis.videoPlayer.initVideoPlayer(fdPath,this.surfaceId)
this.isPlaying=true
}catch(error){
Logger.info(TAG,`playVideoerror${JSON.stringify(error)}`)
}
}
小结
参考链接：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-media.md#play9
审核编辑：汤梓红
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表德赢Vwin官网
网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。
举报投诉
-
接口
+关注
关注
33文章
8575浏览量
151015 -
音视频
+关注
关注
4文章
471浏览量
29872 -
视频播放器
+关注
关注
0文章
33浏览量
11856 -
鸿蒙
+关注
关注
57文章
2339浏览量
42805 -
OpenHarmony
+关注
关注
25文章
3713浏览量
16254
原文标题：鸿蒙上制作一个视频播放器
文章出处：【微信号：gh_834c4b3d87fe，微信公众号：OpenHarmony技术社区】欢迎添加关注！文章转载请注明出处。
发布评论请先 登录
相关推荐
在(Linux)ubuntu下通过GTK调用libvlc开发视频播放器
本项目实现了一个基于GTK和libvlc的视频播放器。使用GTK创建GUI界面，使用libvlc播放视频
【教学基地】07漂亮的视频播放器
` 本帖最后由 a156789156782 于 2018-6-2 13:28 编辑
【教学视频03007】labview视频播放器通过本节视频播
发表于 05-24 22:15
如何基于 OpenHarmony 制作一个简单视频播放器？
OpenHarmony视频播放器作者“坚果，华为云享专家，InfoQ签约作者，润和软件KOL专家，德赢Vwin官网
鸿蒙MVP，阿里云博客专家，开源项目gin-vue-admin成员之一由于
发表于 08-16 18:02
flv视频播放器代码
flv视频播放器代码
FlV视频播放器代码
代码如下这里只是介绍几个例子，现在把代码公布一下，大家可以参考着做，也可以把你喜欢的
发表于 01-10 12:36
•2057次阅读
使用Arduino和DFPlayer迷你MP3播放器模块制作带有LCD的MP3播放器
首歌和下一首歌的功能。 详细的可以看附件视频。 责任编辑：xj 原文标题：如何使用Arduino和DFPlayer Mini制作带LCD的MP3播放器 文章出处：【微信公众号：电路设计
如何利用Arduino UNO和SD卡制作音乐播放器
前面用ATtiny85制作SD卡音乐播放器，本次主要利用Arduino UNO 和SD卡制作音乐播放器。这个播放器不需要添加多余的模块，只需
工商网监
评论