UIBPlayer

论坛示例

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

概述

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及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/12/2