UIScrollPlayer
open hide show close add pause play startPlay addEventListener addButtonsListener setCurrButtonVisibility
概述
UIScrollPlayer插件封装了仿抖音上下滑动的播放器
注意：本插件 iOS 平台上最低适配系统版本为 iOS 9.0
插件接口
open
打开播放器
open({params}, callback(ret,err))
params
rect：
- 类型：JSON 对象
- 描述：插件的位置及尺寸
- 内部字段：
{
x: 0, // 数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
y: 0, // 数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
w: 320, // 数字类型；插件的宽度；支持设置'auto'；默认值：所属的 Window 或 Frame 的宽度
h: 250 // 数字类型；插件的高度；支持设置'auto'；默认值：所属的 Window 或 Frame 的高度
}
videos：
- 类型：JSON 数组
- 描述： 视频列表
[{
imageUrl: '', //（可选项）播放前的预览图片；默认：插件自带图片；支持网络和本地路径（widget://fs://）
holderImage:'' //(可选项)播放前预览图片占位图；仅支持widget、fs本地路径
videoUrl: '', // 播放的视频地址,支持网络 widget://fs://
buttons:[ // （可选项）Json数组类型；悬浮在视频上方按钮，不设置则按公共按钮参数显示
{
x:, //数字类型；按钮相对控件的x坐标
y:, //数字类型；按钮相对控件的y坐标
w:, //数字类型；按钮宽度，默认：100
h:, //数字类型；按钮高度，默认：100
imgPath:'', //字符串类型；普通状态按钮图片路径，支持widget、fs、网络路径。注意设置按钮图片的时候不显示标题 ；android 与highlightedImgPath同时设置时网络路径无效
highlightedImgPath:'',//字符串类型；高亮状态下按钮图片路径，支持widget、fs、网络路径。注意设置按钮图片的时候不显示标题；android 不支持网络路径
name:'', //字符串类型；按钮名称，添加点击事件 点击按钮会回调
styles:{ //json对象，按钮的样式（仅ios支持）
bgColor: '#fff', //（可选项）字符串类型；按钮的背景色，支持 rgb、rgba、#；默认：'#fff
title:'', //字符串类型，按钮标题，注意设置按钮图片的时候不显示标题
highlightedTitle:'',//字符串类型，高亮状态下按钮标题，注意设置按钮图片的时候不显示标题
titleSize: 12, //（可选项）数字类型；按钮标题字体大小；默认：12
titleColor: '#000',//（可选项）字符串类型；按钮标题字体颜色；默认：#000
highlightedTitleColor: '#FF0000',//（可选项）字符串类型；高亮状态下按钮标题字体颜色；默认：#FF0000
borderColor: '#000', //（可选项）字符串类型；边框颜色，支持 rgb、rgba、#；默认：'#000'
borderWidth: 0, //（可选项）数字类型；边框宽度；默认：0
edge:{ //json对象，标题的边距，负数标题向外移动，正数标题向内移动
top:0, //数字类型，标题上边距
bottom:0, //数字类型，标题下边距
left:0, //数字类型，标题左边距
right:0 //数字类型，标题右边距
}
}
}],
}]
buttons：
- 类型：JSON 数组
- 描述：（可选项）悬浮在视频上方按钮，videos中item中不设置buttons则按此参数展示
- 内部字段：
[
{
x:, //数字类型；按钮相对控件的x坐
y:, //数字类型；按钮相对控件的y坐标
w:, //数字类型；按钮宽度，默认：100
h:, //数字类型；按钮高度，默认：100
imgPath:'', //字符串类型；普通状态按钮图片路径，支持widget、fs、网络路径。注意设置按钮图片的时候不显示标题 ；android 与highlightedImgPath同时设置时网络路径无效
highlightedImgPath:'',//字符串类型；高亮状态下按钮图片路径，支持widget、fs、网络路径。注意设置按钮图片的时候不显示标题；android 不支持网络路径
name:'', //字符串类型；按钮名称，添加点击事件 点击按钮会回调
styles:{ //json对象，按钮的样式（仅ios支持）
bgColor: '#fff', //（可选项）字符串类型；按钮的背景色，支持 rgb、rgba、#；默认：'#fff
title:'', //字符串类型，按钮标题，注意设置按钮图片的时候不显示标题
highlightedTitle:'',//字符串类型，高亮状态下按钮标题，注意设置按钮图片的时候不显示标题
titleSize: 12, //（可选项）数字类型；按钮标题字体大小；默认：12
titleColor: '#000',//（可选项）字符串类型；按钮标题字体颜色；默认：#000
highlightedTitleColor: '#FF0000',//（可选项）字符串类型；高亮状态下按钮标题字体颜色；默认：#FF0000
borderColor: '#000', //（可选项）字符串类型；边框颜色，支持 rgb、rgba、#；默认：'#000'
borderWidth: 0, //（可选项）数字类型；边框宽度；默认：0
edge:{ //json对象，标题的边距，负数标题向外移动，正数标题向内移动
top:0, //数字类型，标题上边距
bottom:0, //数字类型，标题下边距
left:0, //数字类型，标题左边距
right:0 //数字类型，标题右边距
}
}
]
index：
- 类型：数字
- 描述：（可选项）页面打开时默认播放视频的下标
- 默认：0
autoPlay：
- 类型：布尔
- 描述：（可选项）视频是否自动播放，设置为false后所有视频都不自动播放
- 默认值：true（自动播放）
scalingMode：
- 类型：数字类型
- 描述：（可选项）视频填充方式
- 取值范围：1/按视频比例放大缩小至一边充满，2/按视频比例放大缩小至视频充满控件，可能视频会被裁剪，3/宽高充满控件，视频可能会变形
- 默认值：1
imgScaleType：
- 类型：数字类型
- 描述：（可选项）封面图填充方式
- 取值范围：1/按图片比例放大缩小至一边充满，可能有黑边，图片不变形2/按图片比例放大缩小至图片充满控件，可能图片会被裁剪，图片不变形3/宽高充满控件，图片可能会变形
- 默认值：3
isLooping：
- 类型：布尔类型
- 描述：（可选项）是否循环播放
- 默认值：true
fixedOn：
- 类型：字符串
- 描述：（可选项）插件所属 Frame 的名字，若不传则插件归属于当前 Window
fixed：
- 类型：布尔
- 描述：（可选项）插件是否随所属 Window 或 Frame 滚动
- 默认值：true（不随之滚动）
callback(ret,err)
ret：
- 类型：JSON 对象
- 内部字段：
{
status: true, //布尔型；true|false
}
err：
- 类型：JSON 对象
- 内部字段：
{
msg : ''
}
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.open({
rect : {
x : 0,
y : 150,
h : 400
},
videos : [{
imageUrl:'',
videoUrl:'',
},{
imageUrl:'',
videoUrl:'',
},{
imageUrl:'',
videoUrl:'',
}],
},function(ret, err){
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
hide
隐藏播放器
hide()
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.hide();
可用性
iOS、Android系统
可提供的1.0.0及更高版本
show
显示播放器
show()
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.show();
可用性
iOS、Android系统
可提供的1.0.0及更高版本
close
关闭播放器
close()
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.close();
可用性
iOS、Android系统
可提供的1.0.0及更高版本
add
添加视频
add({params}, callback(ret,err))
params
videos：
- 类型：JSON 数组
- 描述： 视频列表
[{
imageUrl: '', //（可选项）播放前的预览图片
holderImage:'' //(可选项)播放前预览图片占位图；仅支持widget、fs本地路径
videoUrl: '', // 播放的视频地址支持http,https,widget://fs://
buttons:[ // （可选项）Json数组类型；悬浮在视频上方按钮，不设置则按公共按钮参数显示
{
x:, //数字类型；按钮相对控件的x坐
y:, //数字类型；按钮相对控件的y坐标
w:, //数字类型；按钮宽度，默认：100
h:, //数字类型；按钮高度，默认：100
imgPath:'', //字符串类型；普通状态按钮图片路径，支持widget、fs、网络路径。注意设置按钮图片的时候不显示标题 ；android 与highlightedImgPath同时设置时网络路径无效
highlightedImgPath:'',//字符串类型；高亮状态下按钮图片路径，支持widget、fs、网络路径。注意设置按钮图片的时候不显示标题；android 不支持网络路径
name:'', //字符串类型；按钮名称，添加点击事件 点击按钮会回调
styles:{ //json对象，按钮的样式（仅ios支持）
bgColor: '#fff', //（可选项）字符串类型；按钮的背景色，支持 rgb、rgba、#；默认：'#fff
title:'', //字符串类型，按钮标题，注意设置按钮图片的时候不显示标题
highlightedTitle:'',//字符串类型，高亮状态下按钮标题，注意设置按钮图片的时候不显示标题
titleSize: 12, //（可选项）数字类型；按钮标题字体大小；默认：12
titleColor: '#000',//（可选项）字符串类型；按钮标题字体颜色；默认：#000
highlightedTitleColor: '#FF0000',//（可选项）字符串类型；高亮状态下按钮标题字体颜色；默认：#FF0000
borderColor: '#000', //（可选项）字符串类型；边框颜色，支持 rgb、rgba、#；默认：'#000'
borderWidth: 0, //（可选项）数字类型；边框宽度；默认：0
edge:{ //json对象，标题的边距，负数标题向外移动，正数标题向内移动
top:0, //数字类型，标题上边距；默认：0
bottom:0, //数字类型，标题下边距；默认：0
left:0, //数字类型，标题左边距；默认：0
right:0 //数字类型，标题右边距；默认：0
}
}
}],
}]
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.add({
videos : [{}]
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
pause
暂停当前视频播放 pause()
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.pause();
可用性
iOS、Android系统
可提供的1.0.0及更高版本
play
暂停后播放视频（iOS此接口只支持暂停后播放视频，若open接口设置autoPlay为fasle或者视频停止后开始播放调用startPlay接口）
play()
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.play();
可用性
iOS、Android系统
可提供的1.0.0及更高版本
startPlay
播放视频
startPlay({params})
params
index：
- 类型：数字类型
- 描述：（可选项）播放视频下标
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.startPlay({index:1});
可用性
iOS
可提供的1.0.5及更高版本
addEventListener
滑动播放器监听
addEventListener(callback(ret))
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
evenType:'onPlaying'
//未知:onUnknown
//播放:onPlaying
//暂停:onPaused
//停止:onStopped
//播放错误:onError
//单击事件:onSingleTapUp
//双击事件:onDoubleTap
//滑动事件:onScroll
index:0 //播放页序号
}
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.addEventListener(function(ret, err){
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
addButtonsListener
添加视频悬浮按钮监听事件
addButtonsListener(callback(ret))
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
evenType:'', //字符串类型；事件；内部字段：‘click’/点击
buttonName:'first', //字符串类型；buttons中传入按钮名称
index:0 //播放页序号
}
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.addButtonsListener(function(ret, err){
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS、Android系统
可提供的1.0.2及更高版本
setCurrButtonVisibility
控制当前item中按钮（open接口中传入的buttons）的显示隐藏，
setCurrButtonVisibility(callback(ret))
params
buttonName：
- 类型：字符串类型
- 描述： open中传入的按钮name
visibility：
- 类型：布尔类型
- 描述：（可选项） 是否显示
- 默认：true
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status:, //布尔类型；是否成功
}
err：
- 类型：JSON 对象
- 内部字段：
{
msg:'', //字符串类型；错误信息
}
示例代码
var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.setCurrButtonVisibility({
buttonName:'',
visibility:false,
},function(ret, err){
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS、Android系统
可提供的1.1.2及更高版本