鴻蒙上制作一個視頻播放器

媒體子系統(tǒng)是 OpenHarmony 中重要的子系統(tǒng)，可以提供音視頻播放能力。

媒體子系統(tǒng)為開發(fā)者提供一套簡單且易于理解的接口，使得開發(fā)者能夠方便接入系統(tǒng)并使用系統(tǒng)的媒體資源。

媒體子系統(tǒng)提供以下常用功能如下：

①音視頻播放（AVPlayer9+），AudioPlayer6+ 和 VideoPlayer8+ 整合，升級了狀態(tài)機(jī)和錯誤碼，推薦使用。

②音視頻錄制（AVRecorder9+），AudioRecorder6+ 和 VideoRecorder9+ 整合，推薦使用。

③音頻播放（AudioPlayer6+），AVPlayer9+ 發(fā)布后停止維護(hù)，請使用 AVPlayer9+。

④視頻播放（VideoPlayer8+），AVPlayer9+ 發(fā)布后停止維護(hù)，請使用 AVPlayer9+。

⑤音頻錄制（AudioRecorder6+），AVRecorder9+ 發(fā)布后停止維護(hù)，請使用 AVRecorder9+。

⑥視頻錄制（VideoRecorder9+），AVRecorder9+ 發(fā)布后停止維護(hù)，請使用 AVRecorder9+。

從 3.2 開始 OpenHarmony 推出了 AVPlayer 和 AVRecorder 接口，之前的 VideoPlayer、AudioPlayer 這些接口會停止維護(hù)，所以我們今天學(xué)習(xí)下怎么使用 AVPlayer 接口。

導(dǎo)入模塊

importmediafrom'@ohos.multimedia.media';

創(chuàng)建 avplayer：

this.avPlayer=awaitmedia.createAVPlayer()

如上，我們使用的是 promise 接口，對應(yīng)的接口定義為：

/**
*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;

//注冊狀態(tài)變化回調(diào)，不同狀態(tài)時做不同動作
avPlayer.on('stateChange',async(state,reason)=>{
……
}）
//注冊時間變化回調(diào)，方便更新進(jìn)度條時間
avPlayer.on('timeUpdate',(time:number)=>{
……
})

graphLR
賦值avPlayer.url開始播放-->回調(diào)進(jìn)入initialized-->賦值avPlayer.surfaceId-->avPlayer.prepare-->回調(diào)進(jìn)入prepared-->avPlayer.play

//視頻播放偽代碼
asyncavPlayerDemo(){
this.avPlayer.on('stateChange',async(state,reason)=>{
switch(state){
case'idle'://成功調(diào)用reset接口后觸發(fā)該狀態(tài)機(jī)上報
console.info(TAG+'stateidlecalled')
this.avPlayer.release()//釋放avplayer對象
break;
case'initialized'://avplayer設(shè)置播放源后觸發(fā)該狀態(tài)上報
console.info(TAG+'stateinitializedcalled')
this.avPlayer.surfaceId=this.surfaceID//設(shè)置顯示畫面，當(dāng)播放的資源為純音頻時無需設(shè)置
this.avPlayer.prepare().then(()=>{
console.info(TAG+'preparesuccess');
},(err)=>{
console.error(TAG+'preparefiled,errormessageis:'+err.message)
})
break;
case'prepared'://prepare調(diào)用成功后上報該狀態(tài)機(jī)
console.info(TAG+'statepreparedcalled')
this.avPlayer.play()//調(diào)用播放接口開始播放
break;
case'playing'://play成功調(diào)用后觸發(fā)該狀態(tài)機(jī)上報
console.info(TAG+'stateplayingcalled')
if(this.count==0){
this.avPlayer.pause()//調(diào)用暫停播放接口
}else{
this.avPlayer.seek(10000,media.SeekMode.SEEK_PREV_SYNC)//前向seek置10秒處,觸發(fā)seekDone回調(diào)函數(shù)
}
break;
case'paused'://pause成功調(diào)用后觸發(fā)該狀態(tài)機(jī)上報
console.info(TAG+'statepausedcalled')
if(this.count==0){
this.count++
this.avPlayer.play()//繼續(xù)調(diào)用播放接口開始播放
}
break;
case'completed'://播放結(jié)束后觸發(fā)該狀態(tài)機(jī)上報
console.info(TAG+'statecompletedcalled')
this.avPlayer.stop()//調(diào)用播放結(jié)束接口
break;
case'stopped'://stop接口成功調(diào)用后觸發(fā)該狀態(tài)機(jī)上報
console.info(TAG+'statestoppedcalled')
this.avPlayer.reset()//調(diào)用reset接口初始化avplayer狀態(tài)
break;
case'released':
console.info(TAG+'statereleasedcalled')
break;
case'error':
console.info(TAG+'stateerrorcalled')
break;
default:
console.info(TAG+'unkownstate:'+state)
break;
}
})

//創(chuàng)建avPlayer實(shí)例對象
this.avPlayer=awaitmedia.createAVPlayer()
letfdPath='fd://'
letpathDir="/data/storage/el2/base/haps/entry/files"http://pathDir在FA模型和Stage模型的獲取方式不同，請參考開發(fā)步驟首行的說明，根據(jù)實(shí)際情況自行獲取。
//path路徑的碼流可通過"hdcfilesendD:xxxH264_AAC.mp4/data/app/el2/100/base/ohos.acts.multimedia.media.avplayer/haps/entry/files"命令，將其推送到設(shè)備上
letpath=pathDir+'/H264_AAC.mp4'
letfile=awaitfs.open(path)
fdPath=fdPath+''+file.fd
//賦值url后就會進(jìn)入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%')
//進(jìn)度條
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
})
}

//根據(jù)視頻文件獲取視頻源尺寸并生成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)}`)
}
}

小結(jié)

參考鏈接：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-media.md#play9

審核編輯：湯梓紅