快速开始
更新时间:2024-11-08
1、导入BDCloudMediaPlayer组件和相关接口
import { BDCloudMediaPlayer, InterruptEvent, InterruptHintType } from 'baiduplayersdk'
import { OnPreparedListener } from 'baiduplayersdk';
import { OnVideoSizeChangedListener } from 'baiduplayersdk';
import { OnCompletionListener } from 'baiduplayersdk';
import { OnBufferingUpdateListener } from 'baiduplayersdk';
import { OnErrorListener, OnTimedTextListener } from 'baiduplayersdk';
import { OnInfoListener } from 'baiduplayersdk';
import { OnSeekCompleteListener } from 'baiduplayersdk';
2、绑定播放器与鸿蒙XComponent组件,实现视频画面渲染。
/**
* 接入鸿蒙播放器SDK
*/
import { BDCloudMediaPlayer, OnPreparedListener ,InterruptEvent, InterruptHintType } from 'baiduplayersdk'
@Preview
@Component
export struct MyPlayerComponent {
private videoUrl: string = 'http播放地址';
private xComponentController = new XComponentController();
private mBDCloudMediaPlayer : BDCloudMediaPlayer | null = null;
private xComponentId = "xid" + Math.random();
build() {
XComponent({
id: this.xComponentId, // unique XC id
type:'surface',
libraryname: 'bdplayer_napi', //第三方库名称,固定为‘bdplayer_napi’
controller: this.xComponentController
})
.onLoad(async (context) => {
// 实例化播放器,并绑定 XC id
this.mBDCloudMediaPlayer = new BDCloudMediaPlayer(context, this.xComponentId);
// 如果是hls token加密片源,先设置token
// this.mBDCloudMediaPlayer.setDecryptTokenForHLS("your-token");
// 设置播放的URL
this.mBDCloudMediaPlayer.setDataSource(this.videoUrl);
// 准备播放,播放器准备完毕后,会通过onPrepared回调通知,收到回调后调用start即可开始播放
this.mBDCloudMediaPlayer.prepareAsync();
})
.width('100%')
.height(200)
}
aboutToDisappear(): void {
this.mBDCloudMediaPlayer?.stop();
this.mBDCloudMediaPlayer?.release()
}
}
3、播放器设置监听
// 播放器已经解析出播放源格式时回调
let mOnPreparedListener: OnPreparedListener = {
onPrepared: (mp: BDCloudMediaPlayer) => {
Logger.info("[PlayVideoModel] onPrepared");
mp.start();
}
}
this.mBDCloudMediaPlayer.setOnPreparedListener(mOnPreparedListener);
// 播放进度回调
let mOnTimedTextListener: OnTimedTextListener = {
onTimedText: (mp: BDCloudMediaPlayer) => {
}
}
this.mBDCloudMediaPlayer.setOnTimedTextListener(mOnTimedTextListener)
// 播放完成事件回调
let mOnCompletionListener: OnCompletionListener = {
onCompletion: (mp: BDCloudMediaPlayer) => {
Logger.info("OnCompletionListener-->go")
}
}
this.mBDCloudMediaPlayer.setOnCompletionListener(mOnCompletionListener);
// 总体加载进度回调,返回为已加载进度占视频总时长的百分比
let mOnBufferingUpdateListener: OnBufferingUpdateListener = {
onBufferingUpdate: (mp: BDCloudMediaPlayer, percent: number) => {
Logger.info("OnBufferingUpdateListener-->go:" + percent);
}
}
this.mBDCloudMediaPlayer.setOnBufferingUpdateListener(mOnBufferingUpdateListener);
// seek快速调节播放位置,完成后回调
let mOnSeekCompleteListener: OnSeekCompleteListener = {
onSeekComplete: (mp: BDCloudMediaPlayer) => {
Logger.info("OnSeekCompleteListener-->go");
}
}
this.mBDCloudMediaPlayer.setOnSeekCompleteListener(mOnSeekCompleteListener);
// 视频宽高变化时回调, 首次解析出播放源的宽高时也会回调
let mOnVideoSizeChangedListener: OnVideoSizeChangedListener = {
onVideoSizeChanged: (mp: BDCloudMediaPlayer, width: number, height: number) => {
Logger.info("onVideoSizeChanged-->go:" + width + "===" + height)
}
}
this.mBDCloudMediaPlayer.setOnVideoSizeChangedListener(mOnVideoSizeChangedListener)
// 播放器信息回调,如缓冲开始、缓冲结束
let mOnInfoListener: OnInfoListener = {
onInfo: (mp: BDCloudMediaPlayer, what: number, extra: number) => {
Logger.info("OnInfoListener-->go:" + what + "===" + extra);
}
}
this.mBDCloudMediaPlayer.setOnInfoListener(mOnInfoListener);
// 错误事件监听
let mOnErrorListener: OnErrorListener = {
onError: (mp: BDCloudMediaPlayer, what: number, extra: number) => {
Logger.info("OnErrorListener-->go:" + what + "===" + extra)
}
}
this.mBDCloudMediaPlayer.setOnErrorListener(mOnErrorListener);
this.mBDCloudMediaPlayer.setMessageListener();
4、设置片源URL并准备播放,播放器准备完毕后,会通过onPrepared回调通知,收到回调后调用start即可开始播放
// 如果是hls token加密片源,先设置token
// this.mBDCloudMediaPlayer.setDecryptTokenForHLS("your-token");
this.mBDCloudMediaPlayer.setDataSource(this.iUrl);
this.mBDCloudMediaPlayer.prepareAsync();
5、播放控制接口
//开始播放
this.mBDCloudMediaPlayer.start();
// 暂停
this.mBDCloudMediaPlayer.pause();
// 停止
this.mBDCloudMediaPlayer.stop();
// seek
this.mBDCloudMediaPlayer.seekTo(msec);
// 倍速
this.mBDCloudMediaPlayer.setSpeed("2f");
// 循环
this.mBDCloudMediaPlayer.setLoopCount(true);
// 音量调节
this.mBDCloudMediaPlayer.setVolume(leftVolume, rightVolume);
6、销毁
this.mBDCloudMediaPlayer.release();