文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

跟着小白一起学鸿蒙—学习使用新媒体播放接口

2024-11-30 15:46

关注

想了解更多关于开源的内容,请访问:

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

简介

媒体子系统是OpenHarmony中重要的子系统,可以提供音视频播放能力。媒体子系统为开发者提供一套简单且易于理解的接口,使得开发者能够方便接入系统并使用系统的媒体资源。媒体子系统提供以下常用功能:

从3.2开始OpenHarmony推出了AVPlayer和AVRecorder接口,之前的VideoPlayer、AudioPlayer这些接口会停止维护,所以我们今天学习下怎么使用AVPlayer接口。

导入模块

import media from '@ohos.multimedia.media';

this.avPlayer = await media.createAVPlayer()

如上,我们使用的是promise接口,对应的接口定义为:


function createAVPlayer(callback: AsyncCallback): void;


function createAVPlayer() : Promise;

//注册状态变化回调,不同状态时做不同动作
avPlayer.on('stateChange', async (state, reason) => {
……
})
//注册时间变化回调,方便更新进度条时间
avPlayer.on('timeUpdate', (time:number) => {
……
})

graph LR
赋值avPlayer.url开始播放 --> 回调进入initialized --> 赋值avPlayer.surfaceId --> avPlayer.prepare --> 回调进入prepared --> avPlayer.play
//视频播放伪代码
async avPlayerDemo() {
this.avPlayer.on('stateChange', async (state, reason) => {
switch (state) {
case 'idle': // 成功调用reset接口后触发该状态机上报
console.info(TAG + 'state idle called')
this.avPlayer.release() // 释放avplayer对象
break;
case 'initialized': // avplayer 设置播放源后触发该状态上报
console.info(TAG + 'state initialized called ')
this.avPlayer.surfaceId = this.surfaceID // 设置显示画面,当播放的资源为纯音频时无需设置
this.avPlayer.prepare().then(() => {
console.info(TAG+ 'prepare success');
}, (err) => {
console.error(TAG + 'prepare filed,error message is :' + err.message)
})
break;
case 'prepared': // prepare调用成功后上报该状态机
console.info(TAG + 'state prepared called')
this.avPlayer.play() // 调用播放接口开始播放
break;
case 'playing': // play成功调用后触发该状态机上报
console.info(TAG + 'state playing called')
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 + 'state paused called')
if (this.count == 0) {
this.count++
this.avPlayer.play() // 继续调用播放接口开始播放
}
break;
case 'completed': // 播放结束后触发该状态机上报
console.info(TAG + 'state completed called')
this.avPlayer.stop() //调用播放结束接口
break;
case 'stopped': // stop接口成功调用后触发该状态机上报
console.info(TAG + 'state stopped called')
this.avPlayer.reset() // 调用reset接口初始化avplayer状态
break;
case 'released':
console.info(TAG + 'state released called')
break;
case 'error':
console.info(TAG + 'state error called')
break;
default:
console.info(TAG + 'unkown state :' + state)
break;
}
})

// 创建avPlayer实例对象
this.avPlayer = await media.createAVPlayer()
let fdPath = 'fd://'
let pathDir = "/data/storage/el2/base/haps/entry/files" // pathDir在FA模型和Stage模型的获取方式不同,请参考开发步骤首行的说明,根据实际情况自行获取。
// path路径的码流可通过"hdc file send D:\xxx\H264_AAC.mp4 /data/app/el2/100/base/ohos.acts.multimedia.media.avplayer/haps/entry/files" 命令,将其推送到设备上
let path = pathDir + '/H264_AAC.mp4'
let file = await fs.open(path)
fdPath = fdPath + '' + file.fd
//赋值url后就会进入stateChange callback
this.avPlayer.url = fdPath
}


prepare(callback: AsyncCallback): void;


prepare(): Promise;


play(callback: AsyncCallback): void;


play(): Promise;


pause(callback: AsyncCallback): void;


pause(): Promise;


stop(callback: AsyncCallback): void;


stop(): Promise;


reset(callback: AsyncCallback): void;


reset(): Promise;


release(callback: AsyncCallback): void;


release(): Promise;


seek(timeMs: number, mode?:SeekMode): void;


on(type: 'stateChange', callback: (state: AVPlayerState, reason: StateChangeReason) => void): void;
off(type: 'stateChange'): void;

on(type: 'volumeChange', callback: Callback): void;
off(type: 'volumeChange'): void;

on(type: 'endOfStream', callback: Callback): void;
off(type: 'endOfStream'): void;

on(type: 'seekDone', callback: Callback): void;
off(type: 'seekDone'): void;

on(type: 'speedDone', callback: Callback): void;
off(type: 'speedDone'): void;

on(type: 'bitrateDone', callback: Callback): void;
off(type: 'bitrateDone'): void;

on(type: 'timeUpdate', callback: Callback): void;
off(type: 'timeUpdate'): void;

on(type: 'durationUpdate', callback: Callback): void;
off(type: 'durationUpdate'): void;

on(type: 'bufferingUpdate', callback: (infoType: BufferingInfoType, value: number) => void): void;
off(type: 'bufferingUpdate'): void;

on(type: 'startRenderFrame', callback: Callback): void;
off(type: 'startRenderFrame'): void;

on(type: 'videoSizeChange', callback: (width: number, height: number) => void): void;
off(type: 'videoSizeChange'): void;

on(type: 'audioInterrupt', callback: (info: audio.InterruptEvent) => void): void;
off(type: 'audioInterrupt'): void;

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, 'seek time change')
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, 'onLoad is called')
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
async prepareVideo() {
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 = await this.fileAsset.open('Rw')
Logger.info(TAG, `fd://' ${this.fd} `)
return 'fd://' + this.fd
}
//初始化视频文件并初始化avplayer
async playVideo() {
Logger.info(TAG, 'playVideo')
try{
await this.getMediaList()
let fdPath = await this.prepareVideo()
this.videoPlayer.on('timeUpdate', (time:number) => {
console.info('timeUpdate success,and new time is :' + time)
this.currentTime = time;
})
await this.videoPlayer.initVideoPlayer(fdPath, this.surfaceId)
this.isPlaying = true
}catch(error) {
Logger.info(TAG, `playVideo error ${JSON.stringify(error)}`)
}
}

小结

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

想了解更多关于开源的内容,请访问:

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

来源:51CTO 开源基础软件社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯