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