搜索本产品文档关键词
快速开始
所有文档
menu

智能视频SDK

快速开始

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();
上一篇
SDK集成
下一篇
快速进阶