UIBPlayer
open show hide close replay controlViewShow addEventListener removeEventListener play pause fullScreen cancelFullScreen
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
1、用户在使用插件之前需要获取百度云Access Key和AppId， 参考 安全认证页面 获取AK，参考 百度智能云获取的licenceID就是该插件的AppId ,如果未登录会提示登录。
2、UIBPlayer 封装了百度云播放器 SDK。本插件带有UI方案，打开后为一个具有完整功能的播放器界面。百度云播放器突破 Android、iOS 平台对视频格式的限制，支持目前所有主流的媒体格式(mp4、avi、wmv、flv、mkv、mov、 rmvb 等)。
3、本播放器全屏时为横屏显示，支持屏幕随设备自动旋转(android不支持自动旋转)。具有双击播放、暂停，手势滑动改变播放进度、屏幕亮度和音量的功能。
4、支持iOS 8.0 及以上版本。
使用此插件之前需先在 config.xml文件配置基础环境属性，方法如下
名称：UIBPlayer
参数：AccessKey、AppId
配置示例:
<feature name="UIBPlayer">
<param name="AccessKey" value="724c9abc6cd9403daece9d4d17c3e31b"/>
<param name="AppId" value="sdsd724c9abc6cd9403daece9d4d17c3e31bdsa"/>
</feature>
字段描述:
AccessKey：百度云Access Key，iOS为licenseID。
AppId：百度云AppId(只有android需要传入该参数)
资源包文件制作方法如下：（该插件仅android需要配置）
android配置license文件
(1) 下载bPlayerAppendix插件zip包并解压(解压后会看到一个bPlayerAppendix文件夹) (2) 将文件夹中的source目录下的license.jar解压(会看到一个\assets\目录) (3) 从百度后台下载license文件替换掉第(2)步解压出来的\assets\目录中文件，并重新将assets打成jar包(命名成license.jar)，替换掉之前的jar包。 (4)bPlayerAppendix文件夹重新打包为zip文件，以自定义插件方式加入项目
iOS鉴权文件
iOS使用之前必须申请鉴权文件，鉴权文件申请路径：鉴权文件申请
open
打开播放器界面
open({params})
params
rect：
- 类型：JSON 对象
- 描述：（可选项）播放器的位置及尺寸
- 内部字段：
{
x: 0, //（可选项）数字类型；播放器左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
y: 0, //（可选项）数字类型；（可选项）播放器左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
w: 300, //（可选项）数字类型；播放器的宽度；默认值：所属的 Window 或 Frame 的宽度
h: 200 //（可选项）数字类型；播放器的高度；默认值：w的3/4
}
path：
- 类型：字符串类型
- 描述：视频资源地址,支持网络和本地路径（fs://，widget://）(android不支持widget)
- 默认：无
autoPlay：
- 类型：布尔类型
- 描述：（可选项）是否自动播放
- 默认：true
enableLooping：
- 类型：布尔类型
- 描述：（可选项）设置是否循环播放
- 默认：false
pauseInBackground：
- 类型：布尔类型
- 描述：（可选项）设置App进入后台后，播放器的状态是否为暂停播放(android不支持此参数，可以通过引擎的接口监听APP处于前后台，调用play和pause接口)
- 默认：true
coverImg：
- 类型：字符串类型
- 描述：（可选项）封面图路径，播放器打开尚未播放时的封面图，要求本地路径（widget://、fs://）
- 默认：无
videoScalingMode：
- 类型：字符串类型
- 描述：（可选项）视频的缩放模式 (ios不支持)
- 默认：FIT
- 取值范围：
- FIT:填充，保持视频内容的宽高比。视频与屏幕宽高不一致时，会留有黑边
- MATCH_PARENT:铺满，不保证视频内容宽高比。视频显示与屏幕宽高相等
- FIT_WITH_CROPPING:裁剪，保持视频内容的宽高比。视频与屏幕宽高不一致时，会裁剪部分视频内容
fixedOn：
- 类型：字符串类型
- 描述：（可选项）插件视图添加到指定 frame 的名字（ios：只指 frame，传 window 无效）(android可以是frame或者Window，但是在全屏的时候，需要挂在Window上或者frame是全屏)
- 默认：插件依附于当前 window
fixed：
- 类型：布尔类型
- 描述：（可选项）插件是否随所属 window 或 frame 滚动
- 默认：true（不随之滚动）
styles：
- 类型：JSON 对象
- 描述：播放器的样式设置
- 内部字段：
{
head:{ // JSON对象；播放器顶部导航条样式
bg: 'rgba(161,161,161,0.5)', //（可选项）字符串类型；顶部导航条背景颜色，支持#、rgb、rgba；默认：rgba(161,161,161,0.5)
height: 44, //（可选项）数字类型；顶部导航条的高；默认：44
marginTop:0, // (可选项）数字类型；距离插件顶部的距离；默认：0
hide:false, //（可选项）布尔类型；打开播放器时顶部导航条是否隐藏；默认：false
backBtn:{ //（可选项）JSON对象；播放器左上角返回按钮样式
size: 44, //（可选项）数字类型；返回按钮大小；默认：44
backImg:'', //（可选项）字符串类型；返回按钮的背景图片，要求本地路径（widget://、fs://）；默认：返回小箭头图标
marginLeft:5 // (可选项)数字类型；左边距，默认：5
},
titleLabel:{ //（可选项）JSON对象；播放器顶部导航条标题
title:'哈哈哈', //（可选项）字符串类型；标题：默认：无
size:20, //（可选项）数字类型；标题字体大小；默认：20
color:'#fff', //（可选项）字符串类型；标题字体颜色；默认：#fff
backgroundColor:'rgba(0,0,0,0)', //（可选项）字符串类型；背景颜色；默认：rgba(0,0,0,0)
width:100, //(可选项)数字类型；标题的最大宽度，若numberLines为1，文本超过该宽度，显示...，否则为文本的实际宽度。若numberLines为0或其它，文本超过该宽度，则换行，否则为文本的实际宽度；默认：100
numberLines:1, //（可选项）数字类型；文本的行数，与width配合使用，为0时则自动根据文本长度计算行数，需要注意的是，当文本长度较长时，如要完整显示文本，需要播放器顶部导航条的高度足够大；默认：1
leftMargin:5 //（可选项）数字类型；距离左边返回按钮的外边距；默认：5
},
customButtons:[ //（可选项）数组类型；顶部导航条自定义按钮数组，最多支持三个自定义按钮，从右到左排列
{ //（可选项）JSON对象；顶部导航条自定义按钮
w:44, //（可选项）数字类型；按钮宽度；默认：44
h:44, //（可选项）数字类型；按钮高度；默认：44
rightMagin:5, // (可选项）数字类型；右边距；默认：5
img:'', //（可选项）字符串类型；自定义按钮正常状态下设置图片，要求本地路径（widget://、fs://）；默认：无
imgSelected:'', //（可选项）字符串类型；自定义按钮选中状态下设置图片，要求本地路径（widget://、fs://）；默认：无
}]
},
foot:{ //（可选项）JSON对象；播放器底部导航条样式
bg: 'rgba(161,161,161,0.5)', //（可选项）字符串类型；底部导航条背景颜色，支持#、rgb、rgba；默认：rgba(161,161,161,0.5)
height: 44, //（可选项）数字类型；底部导航条的高；默认：44
marginBottom:0, //（可选项）数字类型；底部导航条距离底部的距离；默认：0
hide:false, //（可选项）布尔类型；打开播放器时底部导航条是否隐藏；默认：false
playBtn:{ //（可选项）JSON对象；播放/暂停按钮样式
size : 44, //（可选项）数字类型；播放/暂停按钮大小；默认：44
playImg:'', //（可选项）字符串类型；播放按钮设置图片，要求本地路径（widget://、fs://）；默认：播放按钮图标
pauseImg:'', //（可选项）字符串类型；暂停按钮设置图片，要求本地路径（widget://、fs://）；默认：暂停按钮图标
marginLeft:0 // (可选项)数字类型；左边距；默认：0
},
currentTimeLabel:{ //（可选项）JSON对象；当前时间显示样式
textSize:14, //（可选项）数字类型；时间显示文字大小；默认：14
textColor:"#fff", //（可选项）字符串类型；时间显示文字颜色，支持#、rgba、rgb；默认：#fff
marginLeft:5 // (可选项)数字类型；距离左边播放/暂停按钮左边距，默认：5
},
seekBar:{
sliderColor:'#fff', //（可选项）字符串类型；底部进度条滑块颜色，支持#、rgba、rgb，注意：若设置了sliderImg，则sliderColor无效；默认：#fff；(android不支持)
sliderImg:'', //（可选项）字符串类型；底部进度条滑块设置图片，要求本地路径（widget://、fs://）；默认：滑块小图标
progressColor: '#696969', //（可选项）字符串类型；进度条背景色，支持#、rgba、rgb，注意：若设置了progressImg，则progressColor无效；默认：#696969(android不支持)
progressImg:'', //（可选项）字符串类型；进度条设置图片，要求本地路径（widget://、fs://）；默认：由progressColor确定(android不支持)
progressSelectedColor: '', //（可选项）字符串类型；滑动后的进度条背景色，支持#、rgba、rgb，注意：若设置了progressSelectedImg，则progressSelectedColor无效；默认：#333333 (android不支持)
progressSelectedImg:'', //（可选项）字符串类型；进度条滑动后的部分设置图片，要求本地路径（widget://、fs://）；默认：由progressSelectedColor确定 (android不支持)
marginLeft:5, // (可选项) 数字类型；左边距，默认：5
marginRight:5 // (可选项)数字类型；右边距，默认：5
},
totalTimeLabel:{ //（可选项）JSON对象；当前播放视频时长显示样式
textSize:14, //（可选项）数字类型；时间显示文字大小；默认：14
textColor:"#fff", //（可选项）字符串类型；时间显示文字颜色，支持#、rgba、rgb；默认：#fff
marginRight:5 // (可选项)数字类型；右边距，默认：5
},
fullScreenBtn:{ //（可选项）JSON对象；全屏/非全屏按钮样式
size:30, //（可选项）数字类型；底部全屏/非全屏按钮大小；默认：44
img:'', //（可选项）字符串类型；非全屏按钮设置图片，要求本地路径（widget://、fs://）；默认：全屏按钮图标
fullScreenImg:'', //（可选项）字符串类型；全屏按钮设置图片，要求本地路径（widget://、fs://）；默认：非全屏按钮图标
marginRight:0 // (可选项)数字类型；右边距，默认：0
}
}
}
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.open(
{
rect:{
y : 30
},
path : 'http://wvideo.spriteapp.cn/video/2016/0328/56f8ec01d9bfe_wpd.mp4',
autoPlay: false,
enableLooping: true,
pauseInBackground:true,
coverImg: 'widget://image/ZFPlayer/ZFPlayer_loading_bgView.png',
styles : {
head:{
bg: 'rgba(161,161,161,0.5)',
height: 44,
marginTop:0,
hide:false,
backBtn:{
size: 44,
backImg:'widget://image/ZFPlayer/ZFPlayer_back_full.png',
marginLeft:5
},
titleLabel:{
title:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
size:20,
color:'#fff',
width:200,
numberLines:1,
leftMargin:5,
backgroundColor:'rgba(0,0,0,0)'
},
customButtons:[
{
w:44,
h:44,
rightMagin:5,
img:'widget://image/ZFPlayer/ZFPlayer_lock-nor.png',
imgSelected:'widget://image/ZFPlayer/ZFPlayer_repeat_video.png',
},
{
w:44,
h:44,
rightMagin:5,
img:'widget://image/ZFPlayer/ZFPlayer_lock-nor.png',
imgSelected:'widget://image/ZFPlayer/ZFPlayer_repeat_video.png',
},
{
w:44,
h:44,
rightMagin:5,
img:'widget://image/ZFPlayer/ZFPlayer_lock-nor.png',
}]
},
foot:{
bg: 'rgba(161,161,161,0.5)',
height: 44,
marginBottom:0,
hide:false,
playBtn:{
size : 44,
playImg:'widget://image/ZFPlayer/ZFPlayer_play.png',
pauseImg:'widget://image/ZFPlayer/ZFPlayer_pause.png',
marginLeft:0
},
currentTimeLabel:{
textSize:14,
textColor:"#FFF",
marginLeft:5
},
seekBar:{
sliderImg:'widget://image/ZFPlayer/ZFPlayer_slider.png',
progressColor: '#696969',
progressSelectedColor: '#333333',
marginLeft:5,
marginRight:5
},
totalTimeLabel:{
textSize:14,
textColor:"#FFF",
marginRight:5
},
fullScreenBtn:{
size:30,
img:'widget://image/ZFPlayer/ZFPlayer_shrinkscreen.png',
fullScreenImg:'widget://image/ZFPlayer/ZFPlayer_fullscreen.png',
marginRight:0
}
}
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
show
显示播放器
show()
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.show();
可用性
iOS、Android系统
可提供的1.0.0及更高版本
hide
隐藏播放器
hide()
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.hide();
可用性
iOS、Android系统
可提供的1.0.0及更高版本
close
关闭播放器
close()
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.close();
可用性
iOS、Android系统
可提供的1.0.0及更高版本
replay
重新播放指定播放地址。
replay({params})
params
path：
- 类型：字符串类型
- 描述：（可选项）视频资源地址,支持网络和本地路径（fs://，widget://）(android不支持widget)
- 默认：之前的播放地址
title：
- 类型：字符串类型
- 描述：（可选项）顶部标题文字
- 默认：之前的标题文字
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.replay({
path : 'http://wvideo.spriteapp.cn/video/2016/0328/56f8ec01d9bfe_wpd.mp4',
title: '哈哈你很棒'
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
controlViewShow
设置footer和header显示或隐藏
controlViewShow({params})
params
name：
- 类型：字符串类型
- 描述：（可选项）设置footer还是header显示或隐藏
- 默认：head
- 取值范围:
- head : 设置header
- foot : 设置footer
show：
- 类型：布尔类型
- 描述：（可选项）是否显示
- 默认：true
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.controlViewShow({
name : 'foot',
show: false
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
addEventListener
添加监听
addEventListener({params},callback(ret))
params
name:
- 类型：字符串
- 描述：监听的事件的名字
- 默认：无
- 取值范围：
- gesture:手势事件监听
- click:按钮点击事件监听
- state:播放器状态监听
callback(ret)
ret：
- 类型：JSON对象
- 内部字段：
{
eventType : 'gestureTap' //字符串类型；事件类型
// 取值范围：
// gesture对应的事件类型:
//'gestureLeftUp' : 播放器靠左的二分之一内的上滑事件
//'gestureLeftDown' : 播放器靠左的二分之一内的下滑事件
//'gestureRightUp' : 播放器靠右的二分之一内的上滑事件
//'gestureRightDown' : 播放器靠右的二分之一内的下滑事件
//'gestureSwipeLeft' : 播放器上的左滑事件
//'gestureSwipeRight' : 播放器上的右滑事件
//'gestureTap' : 点击播放器事件（单击手势）
//'gestureDoubleTap' : 双击播放器事件（双击手势）
// click对应的事件类型:
//'clickFullScreen' : 点击全屏按钮事件
//'clickCancelFull' : 点击非全屏按钮事件
//'clickPlay' : 点击播放按钮事件
//'clickPause' : 点击暂停按钮事件
//'clickBack' : 点击返回按钮事件
//'clickLoadError' : 点击加载失败按钮事件
//'clickOne' : 点击第一个自定义按钮事件（正常状态下点击）
//'clickOneSelected' : 点击第一个自定义按钮事件（选中状态下点击）
//'clickTwo' : 点击第二个自定义按钮事件（正常状态下点击）
//'clickTwoSelected' : 点击第二个自定义按钮事件（选中状态下点击）
//'clickThree' : 点击第三个自定义按钮事件（正常状态下点击）
//'clickThreeSelected' : 点击第三个自定义按钮事件（选中状态下点击）
// state对应的事件类型:
//'statePlaying' : 播放器播放事件
//'statePaused' : 播放器暂停事件
//'stateComplete' : 播放器播放完成事件
//'stateStop' : 播放器播放停止事件
//'stateError' : 播放器加载视频失败事件
//'stateFullScreen' : 播放器全屏事件
//'stateCancelFull' : 播放器取消全屏事件
}
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.addEventListener({
name : 'gesture'
},function(ret) {
if (ret) {
api.alert({msg: JSON.stringify(ret)});
}
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
removeEventListener
移除监听
removeEventListener({params})
params
name:
- 类型：字符串
- 描述：移除监听的事件的名字
- 默认：无
- 取值范围：
- gesture:手势事件监听
- click:按钮点击事件监听
- state:播放器状态监听
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.removeEventListener({
name : 'gesture'
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
play
播放
play()
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.play();
可用性
Android系统
可提供的1.0.0及更高版本
pause
暂停
pause()
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.pause();
可用性
Android系统
可提供的1.0.0及更高版本
# **fullScreen**全屏播放（横屏模式）
fullScreen()
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.fullScreen();
可用性
iOS系统，Android系统
可提供的1.0.2及更高版本
# **cancelFullScreen**取消全屏播放
cancelFullScreen()
示例代码
var UIBPlayer = api.require('UIBPlayer');
UIBPlayer.cancelFullScreen();
可用性
iOS系统，Android系统
可提供的1.0.2及更高版本