vlcPlayer

setPath play close hide removeEventListener cancelFullScreen rewind setBrightness setVolume getDuration isFullScreen

概述

vlcPlayer 封装了MobileVLCKit,可播放大多数多媒体文件，以及 DVD、音频 CD、VCD 及各类流媒体协议（不支持本地音频文件播放）。 本模块带有UI方案，打开后为一个具有完整功能的播放器界面，本播放器全屏时为横屏显示，支持屏幕随设备自动旋转。具有双击播放、暂停，手势滑动改变播放进度、屏幕亮度和音量的功能。

open

打开播放器界面

open({params})

rect:

• 类型：JSON对象
• 描述：(可选项）播放器的位置及长宽

texts：

• 类型：JSON 对象
• 描述：（可选项）顶部标题文字
• 内部字段：

    head: {          //（可选项）JSON 对象；顶部文字
        title: ''    //（可选项）字符串类型；顶部标题文字
    }
}

styles：

• 类型：JSON 对象
• 描述：（可选项）模块的样式设置
• 内部字段：

{
    repeat:{
           repeatwidth: 40,                 //（可选项）数字类型；重新播放按钮的宽；默认：40
           repeatheight: 60,                 //（可选项）数字类型；重新播放按钮的高；默认：60
           repeatImg:'',  //（可选项）字符串类型；重新播放按钮的背景图片，要求本地路径（widget://、fs://）；默认：重新播放小图标
        },
    lock:{
           lockSize: 30,                 //（可选项）数字类型；锁定屏幕按钮大小；默认：30
           lockImg:'',  //（可选项）字符串类型；锁定屏幕按钮的背景图片，要求本地路径（widget://、fs://）；默认：圆圈锁小图标
        },
    head:{                           //（可选项）JSON对象；播放器顶部导航条样式    
       bg: 'rgba(161,161,161,0.5)',  //（可选项）字符串类型；顶部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
       height: 44,                   //（可选项）数字类型；顶部导航条的高；默认：44
       titleSize: 20,                //（可选项）数字类型；顶部标题字体大小；默认：20
       titleColor: '#fff',           //（可选项）字符串类型；顶部标题字体颜色；默认：#fff
       backSize: 44,                 //（可选项）数字类型；顶部返回按钮大小；默认：44
       backImg:'fs://img/back.png',  //（可选项）字符串类型；顶部返回按钮的背景图片，要求本地路径（widget://、fs://）；默认：返回小箭头图标
       hide:false, //顶部导航条是否隐藏；默认：false
       customButtons:[     //（可选项）数组类型；顶部导航条自定义按钮数组，最多支持三个自定义按钮，从右到左排列
          {    //（可选项）JSON对象；顶部导航条自定义按钮
              w:44,  //（可选项）数字类型；按钮宽度；默认：44
              h:44,  //（可选项）数字类型；按钮高度；默认：44
              rightMagin:10,
              img:'widget://image/ZFPlayer/ZFPlayer_lock-nor.png',         //（可选项）字符串类型；自定义按钮正常状态下设置图片，要求本地路径（widget://、fs://）；默认：无
              imgSelected:'widget://image/ZFPlayer/ZFPlayer_repeat_video.png', //（可选项）字符串类型；自定义按钮选中状态下设置图片，要求本地路径（widget://、fs://）；默认：无
                                              }]
    },  
    foot:{                           //（可选项）JSON对象；播放器底部导航条样式    
       bg: 'rgba(161,161,161,0.5)',  //（可选项）字符串类型；底部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
       height: 44,                   //（可选项）数字类型；底部导航条的高；默认：44
       playSize: 44,                 //（可选项）数字类型；底部播放/暂停按钮大小；默认：44
       playImg:'fs://img/back.png',  //（可选项）字符串类型；底部播放按钮的背景图片，要求本地路径（widget://、fs://）；默认：播放按钮图标
       pauseImg:'fs://img/back.png', //（可选项）字符串类型；底部暂停按钮的背景图片，要求本地路径（widget://、fs://）；默认：暂停按钮图标
       timeSize: 14,                  //（可选项）数字类型；底部时间标签大小；默认：14
       timeColor:'#fff',              //（可选项）字符串类型；底部时间标签颜色，支持#、rgba、rgb；默认：#fff
       sliderImg:'fs://img/slder@2x.png',//（可选项）字符串类型；底部进度条滑块背景图片，要求本地路径（widget://、fs://）；默认：滑块小图标((在iOS上需要添加二倍图或者三倍图,否则会出现毛边))
       progressColor: '#696969',      //（可选项）字符串类型；进度条背景色，支持#、rgba、rgb；默认：#696969
       progressSelected: '#76EE00',   //（可选项）字符串类型；滑动后的进度条背景色，支持#、rgb、rgba；默认：#76EE00
        horizontalImg:'',             //（可选项）字符串类型；底部横屏按钮的背景图片，要求本地路径（widget://、fs://）；默认：横屏按钮图标
        hide:false, //底部导航条是否隐藏；默认：false
    }
}

path：

• 类型：字符串
• 描述：视频资源地址,支持网络和本地路径（fs://，widget://）

autoPlay：

• 类型：布尔
• 描述：（可选项）打开时是否自动播放
• 默认值：true（自动播放）

isAutorotate：

• 类型：布尔型
• 描述：（可选项）是否支持自动转屏；为false isFullBtn自动为false
• 默认值：true

isShowProcessView：

• 类型：布尔型
• 描述：（可选项）是否显示进度条 (显示:true ; 不显示:false)【备注:直播流自动 默认为false】
• 默认值：true

isShowTimeLable：

• 类型：布尔型
• 描述：（可选项）是否显示播放时间 (显示:true ; 不显示:false)备注:直播流自动 默认为false】
• 默认值：true

isLive：

• 类型：布尔型
• 描述：（可选项）是否直播视频源 （直播：true；点播：false）
• 默认值：直播:rtmp://开头|rtsp://开头|.m3u8结尾;其余为非直播

enableFull：

• 类型：布尔
• 描述：（可选项）本次播放视频是否全屏播放，当为true时将直接全屏播放视频，x,y,w,h,fixedOn,fixed值不会生效。
• 默认值：false（窗口播放）

isFullBtn：

• 类型：布尔
• 描述：（可选项）小窗口是否显示进入全屏按钮
• 默认值：true（显示）

isBackBtn：

• 类型：布尔
• 描述：（可选项）小窗口是否显示返回按钮
• 默认值：false（不显示）

isSmallOpenGesture：

• 类型：布尔型
• 描述：（可选项）窗口播放时是否开启手势控制音量，亮度和进度 （开启：true；不开启：false）
• 默认值：false

isOpenGesture：

• 类型：布尔型
• 描述：（可选项）全屏时是否开启手势控制音量，亮度和进度 （开启：true；不开启 - ：false）
• 默认值：true

coverImg：

• 类型：布尔
• 描述：（可选项）封面图路径，播放器打开尚未播放时的封面图，要求本地路径（widget://、fs://）

audio:

• 类型：布尔
• 描述：（可选项）播放的资源是否是音频文件，若是则开始播放后不移除封面图 coverImg
• 默认值：false

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.open({
    texts: {
        head: {
            title: '顶部文字'
        }
    },
    styles: {
        repeat:{
           repeatwidth: 40,                 //（可选项）数字类型；重新播放按钮的宽；默认：40
           repeatheight: 60,                 //（可选项）数字类型；重新播放按钮的高；默认：60           
           repeatImg:'',
        },
        lock:{
           lockSize: 30, 
           lockImg:'',                           
        },
        head: {
            bg: 'rgba(0.5,0.5,0.5,0.7)',
            height: 44,
            titleSize: 20,
            titleColor: '#fff',
            backSize: 44,
            backImg: 'fs://img/back.png',
            hide:false,
            customButtons:[ 
                               {    
                                   w:44, 
                                 rightMagin:10,
                                 img:'',       
                                 imgSelected:'',                                           
                             }]
        },
        foot: {
            bg: 'rgba(0.5,0.5,0.5,0.7)',
            height: 44,
            playSize: 44,
            playImg: '',
            pauseImg: '',
            timeSize: 14,
            timeColor: '#fff',
            sliderImg: '',
            progressColor: '#696969',
            progressSelected: '#76EE00',
            hide:false,
           verticalImg:'',                        
           horizontalImg:'',            
        }
    },
    path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
    autoPlay: true, 
    movieScaling:'scaleNone',
    coverImg:'widget://image/beautiful.png',
    audio:false
});

可用性

iOS系统

可提供的1.0.0及更高版本

setPath

设置视频的文件路径

setPath({params})

params

path：

• 类型：字符串
• 描述：视频资源地址,支持网络和本地路径（fs://，widget://）

coverImg：

• 类型：布尔
• 描述：（可选项）封面图路径，播放器打开尚未播放时的封面图，要求本地路径（widget://、fs://）

title：

• 类型：字符串
• 描述：（可选项）当设置 play 接口打开的视频时，本参数表示设置该视频的标题，本参数仅对 play 接口有效
• 默认值：原标题

audio:

• 类型：布尔
• 描述：（可选项）播放的资源是否是音频文件，若是则开始播放后不移除封面图 coverImg
• 默认值：false

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.setPath({
    path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
    coverImg: '',
    audio:false
});

可用性

iOS系统

可提供的1.0.0及更高版本

replay

重新播放

play()

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.replay();

可用性

iOS系统

可提供的1.0.0及更高版本

play

开始播放

play()

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.play();

可用性

iOS系统

可提供的1.0.0及更高版本

pause

暂停播放

pause()

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.pause();

可用性

可提供的1.0.0及更高版本

close

关闭播放器

close()

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.close();

可用性

iOS系统

可提供的1.0.0及更高版本

show

显示视频播放视图

show()

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.show();

可用性

iOS系统

可提供的1.0.0及更高版本

hide

隐藏视频播放视图

hide()

示例代码

可用性

iOS系统

可提供的1.0.0及更高版本

addEventListener

添加监听

addEventListener({params},callback(ret))

params

name：

• 类型：字符串
• 描述：（可选项）所要监听的动作名称
• 取值范围：
  • gesture:手势事件监听
  • click:按钮点击事件监听
  • state:播放器状态监听

ret：

• 类型：JSON对象
• 内部字段：

{
       eventType : 'gestureTap'  //字符串类型；事件类型
       // 取值范围：
       //'gestureLeftUp' : 播放器靠左的二分之一内的上滑事件
       //'gestureLeftDown' : 播放器靠左的二分之一内的下滑事件
       //'gestureRightUp' : 播放器靠右的二分之一内的上滑事件
       //'gestureRightDown' : 播放器靠右的二分之一内的下滑事件
       //'gestureSwipeLeft' : 播放器上的左滑事件
       //'gestureSwipeRight' : 播放器上的右滑事件
       //'gestureTap' : 点击播放器事件（单击手势）
       //'gestureDoubleTap' : 双击播放器事件（双击手势）
       // click对应的事件类型:
       //'clickLock' : 点击锁定屏幕按钮事件
       //'clickUNLock' : 点击解锁屏幕锁定按钮事件
       //'clickFullScreen' : 点击全屏按钮事件
          //'clickCancelFull' : 点击非全屏按钮事件
         //'clickPlay' : 点击播放按钮事件
        //'clickPause' : 点击暂停按钮事件
          //'clickBack' : 点击返回按钮事件
          //'clickLoadError' : 点击加载失败按钮事件
          //'clickOne' : 点击第一个自定义按钮事件（正常状态下点击）
          //'clickOneSelected' : 点击第一个自定义按钮事件（选中状态下点击）
          //'clickTwo' : 点击第二个自定义按钮事件（正常状态下点击）
          //'clickTwoSelected' : 点击第二个自定义按钮事件（选中状态下点击）
          //'clickThree' : 点击第三个自定义按钮事件（正常状态下点击）
          //'clickThreeSelected' : 点击第三个自定义按钮事件（选中状态下点击）
          // state对应的事件类型:
          //'statePlaying' : 播放器播放事件
         //'statePaused' : 播放器暂停事件
         //'stateComplete' : 播放器播放完成事件
         //'stateError' : 播放器加载视频失败事件
         //'stateFullScreen' : 播放器全屏事件
         //'stateCancelFull' : 播放器取消全屏事件
}

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.addEventListener({
    name: 'state'
}, function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } else {
        alert(JSON.stringify(err));
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

removeEventListener

移除动作监听

removeEventListener({params})

params

name：

• 类型：字符串
• 描述：（可选项）所要移除的监听的动作名称
• 取值范围：
  • gesture:手势事件监听
  • click:按钮点击事件监听
  • state:播放器状态监听

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.removeEventListener({
    name: 'state'
});

可用性

iOS系统

可提供的1.0.0及更高版本

fullScreen

全屏播放（横屏模式）

fullScreen()

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.fullScreen();

可用性

iOS系统

可提供的1.0.0及更高版本

cancelFullScreen

取消全屏播放

cancelFullScreen()

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.cancelFullScreen();

可用性

iOS系统

可提供的1.0.0及更高版本

forward

快进

forward({params})

params

seconds：

• 类型：数字
• 描述：快进的秒数

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.forward({
    seconds: 5
});

可用性

iOS系统

可提供的1.0.0及更高版本

rewind

快退

rewind({params})

params

seconds：

• 类型：数字
• 描述：快退的秒数

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.rewind({
    seconds: 5
});

可用性

可提供的1.0.0及更高版本

seekTo

跳转

seekTo({params})

params

seconds：

• 类型：数字
• 描述：跳转到音视频播放的秒数

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.seekTo({
    seconds: 20
});

可用性

iOS系统

可提供的1.0.0及更高版本

setBrightness

设置屏幕亮度

setBrightness({params})

brightness：

• 类型：数字
• 描述：（可选项）设置的屏幕的亮度，取值范围：0-100，在 iOS 平台上设置的是系统屏幕亮度。Android 平台上设置的本应用内的屏幕亮度
• 默认值：80

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.setBrightness({
    brightness: 50
});

可用性

iOS系统

可提供的1.0.0及更高版本

getBrightness

获取当前屏幕亮度值

getBrightness(callback(ret))

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.getBrightness(function(ret, err) {
    if (ret) {
        alert(JSON.stringify(ret));
    } 
});

可用性

iOS系统

可提供的1.0.0及更高版本

setVolume

设置音量

setVolume({params})

params

volume：

• 类型：数字
• 描述：（可选项）音量大小，取值范围：0-1
• 默认值：0

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.setVolume({
    volume: 0.6
});

可用性

iOS系统

可提供的1.0.0及更高版本

getVolume

获取当前播放音量

getVolume(callback(ret))

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
    volume:            //数字类型；当前音量值
}

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.getVolume(function(ret) {
    if (ret) {
        alert(JSON.stringify(ret));
    } 
});

可用性

iOS系统

可提供的1.0.0及更高版本

getDuration

获取视频的时长

getDuration(callback(ret))

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
    duration:  1221122          //数字类型；视频的总时长
}

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.getDuration(function(ret) {
    if (ret) {
        alert(JSON.stringify(ret));
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

getCurrentPosition

获取已经播放的时长

getCurrentPosition(callback(ret))

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
    currentPosition:888          //数字类型；已经播放的时长
}

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.getCurrentPosition(function(ret) {
    if (ret) {
        alert(JSON.stringify(ret));
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

isFullScreen

获取是否全屏播放状态

isFullScreen(callback(ret))

callback(ret)

ret：

• 类型：JSON 对象
• 内部字段：

{
     status: true|false   //布尔型；true:全屏 false:窗口

可用性

iOS系统