vlcPlayer
open setPath replay play pause close show hide addEventListener removeEventListener fullScreen cancelFullScreen forward rewind seekTo setBrightness getBrightness setVolume getVolume getDuration getCurrentPosition isFullScreen
概述
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及更高版本