vlcPlayer

概述

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

# **open**

打开播放器界面

open({params})

params

rect:

  • 类型:JSON对象
  • 描述:(可选项)播放器的位置及长宽
{
      x: 0,    //(可选项)数字类型;播放器 x 坐标(相对于所属的 Window 或 Frame);默认值:0
      y: 0,    //(可选项)数字类型;播放器 y 坐标(相对于所属的 Window 或 Frame);默认值:0
      w: 320,  //(可选项)数字类型;支持设置'auto';播放器(相对于所属的 Window 或 Frame);默认值:屏幕宽度
      h: 300,  //(可选项)数字类型;支持设置'auto';播放器(相对于所属的 Window 或 Frame);默认值:300
}

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
       verticalImg:'',                //(可选项)字符串类型;底部竖屏按钮的背景图片,要求本地路径(widget://、fs://);默认:竖屏按钮图标              
        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, 
                                 h: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();

可用性

iOS系统

可提供的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()

示例代码

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

可用性

iOS系统

可提供的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对应的事件类型:
       //'clickLock' : 点击锁定屏幕按钮事件
       //'clickUNLock' : 点击解锁屏幕锁定按钮事件
       //'clickFullScreen' : 点击全屏按钮事件
          //'clickCancelFull' : 点击非全屏按钮事件
         //'clickPlay' : 点击播放按钮事件
        //'clickPause' : 点击暂停按钮事件
          //'clickBack' : 点击返回按钮事件
          //'clickLoadError' : 点击加载失败按钮事件
          //'clickOne' : 点击第一个自定义按钮事件(正常状态下点击)
          //'clickOneSelected' : 点击第一个自定义按钮事件(选中状态下点击)
          //'clickTwo' : 点击第二个自定义按钮事件(正常状态下点击)
          //'clickTwoSelected' : 点击第二个自定义按钮事件(选中状态下点击)
          //'clickThree' : 点击第三个自定义按钮事件(正常状态下点击)
          //'clickThreeSelected' : 点击第三个自定义按钮事件(选中状态下点击)
          
          // state对应的事件类型:
          //'statePlaying' : 播放器播放事件
         //'statePaused' : 播放器暂停事件
         //'stateComplete' : 播放器播放完成事件
         //'stateStop' : 播放器播放停止事件
         //'stateError' : 播放器加载视频失败事件
         //'stateFullScreen' : 播放器全屏事件
         //'stateCancelFull' : 播放器取消全屏事件
}

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.addEventListener({
    name: 'state'
}, function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: 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
});

可用性

iOS系统

可提供的1.0.0及更高版本

# **seekTo**

跳转

seekTo({params})

params

seconds:

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

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

# **setBrightness**

设置屏幕亮度

setBrightness({params})

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 对象
  • 内部字段:
{
    brightness:            //数字类型;当前屏幕亮度值
}

示例代码

var vlcPlayer = api.require('vlcPlayer');
vlcPlayer.getBrightness(function(ret, err) {
    if (ret) {
        api.alert({msg: 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) {
        api.alert({msg: 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) {
        api.alert({msg: 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) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统

可提供的1.0.0及更高版本

# **isFullScreen**

获取是否全屏播放状态

isFullScreen(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
     status: true|false   //布尔型;true:全屏 false:窗口
}

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

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