快速进阶
更新时间:2025-04-01
播放控制接口
Plain Text
1// 开始播放或者继续播放均使用start接口。
2this.$refs.bdplayerContainer.start();
3// 暂停
4this.$refs.bdplayerContainer.pause();
5// seek到某个时间点,跳转到当前音视频播放的时间,单位秒,必须大于等于 0
6this.$refs.bdplayerContainer.seekTo({
7 seconds: time
8});
9// 释放后,重新播放需创建新的player。
10this.$refs.bdplayerContainer.stop();
获取当前播放状态
Plain Text
1 this.$refs.bdplayerContainer.isPlaying(null,(res)=>{
2 const { isPlaying } = res;
3 const title = isPlaying ? "正在播放中" : "已暂停";
4 });
5
获取音视频时长
Plain Text
1this.$refs.bdplayerContainer.getDuration(null, ret => {
2 // 单位:s
3 console.log(ret.duration)
4});
获取当前播放时间
Plain Text
1 this.$refs.bdplayerContainer.getCurrentPosition(null,ret=>{
2 // 单位:ms
3 console.log(ret.currentPosition)
4 })
5
设置/获取音量
Plain Text
1 // volume:number类型,音量大小,取值范围 0 ~ 1
2 this.$refs.bdplayerContainer.setVolume({
3 volume: 0.5
4 });
5 this.$refs.bdplayerContainer.getVolume(null, ret => {
6 const {volume} = ret
7 });
设置/获取倍速
Plain Text
1 // speed: number类型,取值范围 0.5 ~ 2.0,默认值 1.0
2 this.$refs.bdplayerContainer.setSpeed({
3 speed:1.5
4 });
5 this.$refs.bdplayerContainer.getSpeed(null, ret => {
6 const {speed} = ret
7 });
8
切换屏幕方向到横/竖屏
Plain Text
1isFull ? this.$refs.bdplayerContainer.changeToLandscape() : this.$refs.bdplayerContainer.changeToPortrait();
截图
保存播放器播放视频当前画面截图到相册。要开启相册权限。
Plain Text
1this.$refs.bdplayerContainer.snapshot(null, result => {
2 if (result.success) {
3 uni.showToast({ title: '播放器截屏成功' });
4 } else {
5 uni.showToast({ title: '失败: ' + result.error, icon: 'none' });
6 }
7 });
8
设置画面填充模式
Plain Text
1 this.$refs.bdplayerContainer.setScalingMode({scalingMode:1});
2
scalingMode
- 类型:number类型
- 描述:(可选项)拉伸模式, 取值范围1-填充, 2-裁剪, 3-铺满。默认为1-填充。
切换清晰度
Plain Text
1this.$refs.bdplayerContainer.changeLevel({
2 level:index
3 },(res)=> {
4 const { errMsg } = res;
5 if(!errMsg){
6 this.isChangeLevel = true;
7 uni.showToast({
8 title: "正在切换清晰度...",
9 icon: "none"
10 })
11 }
12 });
level
- 类型:整型数字
- 描述:(可选项)指定码率,取值范围 1, 2, 3。level值为:onLevelUpdate事件返回清晰度下标
播放私有加密视频
Plain Text
1 this.$refs.bdplayerContainer.setUp({
2 file: this.defaultConfig.file,
3 token:this.defaultConfig.token,
4 }, (ret) => {
5 this.text = JSON.stringify(ret);
6 if (ret.errMsg != null) {
7 uni.showToast({
8 title: ret.errMsg,
9 icon: "none"
10 })
11 }
12 });
token
token需要您的服务器与百度智能云服务器合作来生成,您的App从您的服务器拿到token后,设置给播放器即可。
播放自定义事件监听
播放状态变化事件监听
onPlayStatus
playerState
- 类型:字符串
- 描述:「prepared-已准备完成, pause-暂停, stop-停止,playing-播放」
seek
类型:字符串 描述:「complete-seek完成」
Plain Text
1 onPlayStatus(e) {
2 const {
3 skin,
4 bdPlayer
5 } = this;
6 const state = e.detail.playerState;
7 const preparedToPlay = e.detail.preparedToPlay;
8 const seekstate = e.detail.seek;
9 if (state != null) {
10 this.skin.changePlayStatus(state === 'playing');
11 if(state == "prepared"){
12 uni.showToast({
13 title: "视频已准备就绪",
14 icon: "none"
15 })
16 }else if(state == "complete"){
17 console.log("播放完成");
18 uni.showToast({
19 title: "播放完成",
20 icon: "none"
21 })
22 }else if(state == "pause"){
23 uni.showToast({
24 title: "视频已暂停",
25 icon: "none"
26 })
27 }else if(state == "playing"){
28 uni.showToast({
29 title: "视频已播放",
30 icon: "none"
31 })
32 }
33 } else if (preparedToPlay != null) {
34 this.updateDuration();
35 }else if(seekstate != null){
36 if(seekstate == "complete"){
37 uni.showToast({
38 title: "seek完成",
39 icon: "none"
40 })
41 }
42 }
43 }
视频分辨率改变
onVideoSizeChanged 视频分辨率改变通知
width
- 类型:number
- 描述:返回当前视频宽度
height
- 类型:number
-
描述:返回当前视频高度
Plain Text1 onVideoSizeChanged(e){ 2 const {width,height} = e.detail; 3 if(this.isChangeLevel){ 4 uni.showToast({ 5 title: "清晰度切换成功", 6 icon: "none" 7 }) 8 } 9 console.log(`width is ${width},height is ${height}`); 10 }
当前播放视频所支持码率
onLevelUpdate
resolution
- 类型:array
-
描述:返回当前播放视频所支持码率列表。参数["360p","720p"]
Plain Text1 onLevelUpdate(e){ 2 const {resolution} = e.detail; 3 this.$refs.skin.updateLevels(resolution); 4 console.log(`resolution is ${resolution}`,); 5 } 6
错误事件
onPlayError
error
- 类型:string
-
描述:错误信息
Plain Text1 onPlayError(e){ 2 const {error} = e.detail; 3 }