UIBPlayer

来自于：开发者立即使用

open show hide close replay controlViewShow addEventListener removeEventListener play pause fullScreen cancelFullScreen

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

1、用户在使用模块之前需要获取百度云Access Key， 参考 安全认证页面 获取AK，如果未登录会提示登录。

2、UIBPlayer 封装了百度云播放器 SDK。本模块带有UI方案，打开后为一个具有完整功能的播放器界面。百度云播放器突破 Android、iOS 平台对视频格式的限制，支持目前所有主流的媒体格式(mp4、avi、wmv、flv、mkv、mov、 rmvb 等)。

3、本播放器全屏时为横屏显示，支持屏幕随设备自动旋转(android不支持自动旋转)。具有双击播放、暂停，手势滑动改变播放进度、屏幕亮度和音量的功能。

4、支持iOS 7.0 及以上版本。

使用此模块之前需先在 config.xml文件配置基础环境属性，方法如下

• 名称：UIBPlayer

• 参数：AccessKey

• 配置示例:

  <feature name="UIBPlayer">
        <param name="AccessKey" value="724c9abc6cd9403daece9d4d17c3e31b"/>
  </feature>

• 字段描述:

  AccessKey：百度云Access Key。

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) {
                           alert(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及更高版本