为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码供您参考。
scrollVideo插件用ijkplayer封装在iOS、Android下仿抖音上下滑动播放视频功能(列表图片加载会存在延迟,可能会出现黑屏,属于正常现象,后续优化)。
Android:4.4及以上 iOS:9.0及以上
滑动播放器监听
addEventListener(callback(ret))
ret:
{
status: true, //布尔型;true||false
evenType : 'onPageSelected'//当前播放页:onPageSelected
//播放错误:onErrorVideo
//缓冲开始:onBufferingStart
//缓冲结束:onBufferingEnd
//单击事件:onSingleTapUp
//双击事件:onDoubleTap
//长按事件:onLongPress
//按钮点击事件:onBtnClick
//文字点击事件:onTextClick
//大小播放器切换事件:onSwitchPlayer
//视频准备成功事件:onPrepared
//向左滑过事件:onMoveLeft
//向右滑过事件:onMoveRight
xh : 0, //播放页序号
itemData : {..},//当前item的json内容
clickData:{...}//对应按钮或者文字的json内容。
}
var demo = api.require('scrollVideo');
demo.addEventListener(function(ret, err){
alert(JSON.stringify(ret));
});
iOS、Android系统
可提供的1.0.0及更高版本
打开滑动播放器
openScrollVideo({params}, callback(ret,err))
rect:
{
x: 0, //(必填项)数字类型;插件左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
y: 0, //(必填项)数字类型;插件左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
w: 320, //(必填项)数字类型;插件的宽度;默认值:所属的 Window 或 Frame 的宽度
h: 250 //(必填项)数字类型;插件的高度;默认值:所属的 Window 或 Frame 的高度
}
fixedOn:
fixed:
userData:
{
uid: '', //(必填项)播放ID
imageUrl: '', //(可选项)播放前的预览图片
placeholderColor: '#DDDDDD', //(可选项)背景图颜色,默认值:黑色
placeholderImage: 'widget://image/musiclist_img_item_music_bg.png', //(可选项)背景图未加载时显示的图片,当该值存在时,placeholderColor无效
imageType : 0,//0:图片拉伸填充(图片可能会变形) 1:图片拉伸至完全显示(图片不会变形) 2:图片拉伸至完全铺满填充(图片不会变形)
scalingMode : 4,//(可选选)视频播放显示铺满模式(详细描述见接口addVideoData文档)
isLocalCache : true, //(可选项)是否本地缓存视频,音频
styles : [{
type : 'button',// 按钮类型:button,text,music(带动画的音乐按钮),autoText(跑马灯)
x : 0, //按钮x坐标
y : 0, //按钮y坐标
w : 0, //按钮宽度
h : 0, //按钮高度
pic : 'widget://image/gif1.gif',//按钮图片路径;音乐按钮背景图(支持路径fs:// widget:// 类型:png gif )
pic1 : 'widget://image/gif1.gif',//音乐按钮中间logo图片路径(支持路径fs:// widget:// 类型:png gif )
isRadius : false,//是否进行圆形图片按钮处理;音乐按钮是否开启动画,默认:false
lineColor : '',//设置描边颜色,默认无
text : '测试',//文本内容
textSize : 12, //字体大小
textColor : '',//字体颜色
gravity : 0,// 文字位置 0:center 1 : left 2 :right (水平)
vertical : 0,// 文字位置 0:top 1 : middle 2 :bottom (垂直)
name : '',按钮名称
}]
}
position:
ret:
{
status: true, //布尔型;true|false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.openScrollVideo({
rect : {
x : 0,
y : 150,
h : 400
},
userData : [{
uid : new Date().getTime()+1,
imageUrl :'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/bc281dfcaf750de7acd9c8e9224e237b.png',
videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/abb9595e74647defe21d748e12f7a7c9.mp4',
},{
uid : new Date().getTime()+2,
imageUrl :'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/1a73dd6a90a52b2aad1aafefbf977e4c.png',
videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/00b2141bff87cfaa75498f66214aeb9e.mp4',
},{
uid : new Date().getTime()+3,
imageUrl :'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/ec65083dbdc6bb18a6318591ac6c15a5.png',
videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/9d9906ba474152307d7edca6bd72fbe2.mp4',
},{
uid : new Date().getTime()+4,
imageUrl :'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/51fc1ddde9790c96a6986b74342a15e3.png',
videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/dc811d2c4d88b409063c7ea2065fe6a0.mp4',
},{
uid : new Date().getTime()+5,
imageUrl :'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/51fc1ddde9790c96a6986b74342a15e3.png',
videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/dc811d2c4d88b409063c7ea2065fe6a0.mp4',
}],
},function(ret, err){
alert(JSON.stringify(ret)+" "+JSON.stringify(err));
});
iOS、Android系统
可提供的1.0.0及更高版本
隐藏滑动播放器
hideScrollVideo(callback(ret, err))
ret:
{
status: true, //布尔型;true||false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.hideScrollVideo();
iOS、Android系统
可提供的1.0.0及更高版本
显示滑动播放器
showScrollVideo(callback(ret))
ret:
{
status: true, //布尔型;true
}
var demo = api.require('scrollVideo');
demo.showScrollVideo(function(ret){
alert(JSON.stringify(ret));
});
iOS、Android系统
可提供的1.0.0及更高版本
关闭滑动播放器
closeScrollVideo(callback(ret, err))
ret:
{
status: true, //布尔型;true||false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.closeScrollVideo(function(ret, err){
alert(JSON.stringify(ret) + " " +JSON.stringify(err));
});
iOS、Android系统
可提供的1.0.0及更高版本
更新当前播放器样式
updateVideoStyle({params}, callback(ret,err))
styles:
[{
type : 'button',// 按钮类型:button,text,music(带动画的音乐按钮),autoText(跑马灯)
x : 0, //按钮x坐标
y : 0, //按钮y坐标
w : 0, //按钮宽度
h : 0, //按钮高度
pic : 'widget://image/gif1.gif',//按钮图片路径;音乐按钮背景图(支持路径fs:// widget:// 类型:png gif )
pic1 : 'widget://image/gif1.gif',//音乐按钮中间logo图片路径(支持路径fs:// widget:// 类型:png gif )
isRadius : false,//是否进行圆形图片按钮处理;音乐按钮是否开启动画,默认:false
lineColor : '',//设置描边颜色,默认无
text : '测试',//文本内容
textSize : 12, //字体大小
textColor : '',//字体颜色
gravity : 0,// 文字位置 0:center 1 : left 2 :right (水平)
vertical : 0,// 文字位置 0:top 1 : middle 2 :bottom (垂直)
name : '',按钮名称
}]
ret:
{
status: true, //布尔型;true|false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.updateVideoStyle({
styles : [{
x : api.frameWidth - 45,
y : 0,
w : 40,
h : 40,
type : 'button',
pic : 'widget://image/refresh.png',
lineColor : '#000000'
},{
x : api.frameWidth - 45,
y : 0 + 40,
w : 40,
h : 20,
type : 'text',
text : '测1更新样式1',
textSize : 12
},{
x : api.frameWidth - 45,
y : 60 + 20,
w : 40,
h : 40,
type : 'button',
pic : 'widget://image/test_uz_icon.png',
lineColor : '#000000'
},{
x : api.frameWidth - 45,
y : 80 + 40,
w : 40,
h : 20,
type : 'text',
text : '测2更新样式2',
textSize : 12
},{
x : api.frameWidth - 45,
y : 120 + 40,
w : 40,
h : 40,
type : 'button',
pic : 'widget://image/gif1.gif',
}]
},function(ret,err){
alert(JSON.stringify(ret,err));
});
iOS、Android系统
可提供的1.0.0及更高版本
添加一条记录
addVideoData({params}, callback(ret,err))
uid:
imageUrl:
videoUrl:
isLocalCache:
scalingMode:
placeholderColor:
placeholderImage:
imageType:
styles:
[{
type : 'button',// 按钮类型:button,text,music(带动画的音乐按钮),autoText(跑马灯)
x : 0, //按钮x坐标
y : 0, //按钮y坐标
w : 0, //按钮宽度
h : 0, //按钮高度
pic : 'widget://image/gif1.gif',//按钮图片路径;音乐按钮背景图(支持路径fs:// widget:// 类型:png gif )
pic1 : 'widget://image/gif1.gif',//音乐按钮中间logo图片路径(支持路径fs:// widget:// 类型:png gif )
isRadius : false,//是否进行圆形图片按钮处理;音乐按钮是否开启动画,默认:false
lineColor : '',//设置描边颜色,默认无
text : '测试',//文本内容
textSize : 12, //字体大小
textColor : '',//字体颜色
gravity : 0,// 文字位置 0:center 1 : left 2 :right
name : '',按钮名称
}]
ret:
{
status: true, //布尔型;true|false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.addVideoData({
uid : new Date().getTime()+6,
imageUrl :'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/51fc1ddde9790c96a6986b74342a15e3.png',
videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/dc811d2c4d88b409063c7ea2065fe6a0.mp4',
},function(ret,err){
alert(JSON.stringify(ret,err));
});
iOS、Android系统
可提供的1.0.0及更高版本
暂停当前视频播放
pause(callback(ret,err))
ret:
{
status: true, //布尔型;true|false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.pause(function(ret,err){
alert(JSON.stringify(ret,err));
});
iOS、Android系统
可提供的1.0.0及更高版本
暂停后恢复播放当前视频
play(callback(ret,err))
ret:
{
status: true, //布尔型;true|false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.play(function(ret,err){
alert(JSON.stringify(ret,err));
});
iOS、Android系统
可提供的1.0.0及更高版本
是否播放状态
isPlaying()
##ret:
{
status: true, //布尔型;true|false
isPlaying : true,
msg : ''
}
var demo = api.require('scrollVideo');
var ret = demo.isPlaying();
alert(JSON.stringify(ret));
iOS、Android系统
可提供的1.0.0及更高版本
获取播放item总数
itemCount()
##ret:
{
status: true, //布尔型;true|false
count : 0,
msg : ''
}
var demo = api.require('scrollVideo');
var ret = demo.itemCount();
alert(JSON.stringify(ret));
iOS、Android系统
可提供的1.0.0及更高版本
获取视频的时长
getDuration()
##ret:
{
status: true, //布尔型;true|false
duration : 0,
msg : ''
}
var demo = api.require('scrollVideo');
var ret = demo.getDuration();
alert(JSON.stringify(ret));
iOS、Android系统
可提供的1.0.0及更高版本
获取已经播放的时长
getCurrentPosition()
##ret:
{
status: true, //布尔型;true|false
currentPosition : 0,
msg : ''
}
var demo = api.require('scrollVideo');
var ret = demo.getCurrentPosition();
alert(JSON.stringify(ret));
iOS、Android系统
可提供的1.0.0及更高版本
设置音量
setVolume({params},callback(ret,err))
volume:
ret:
{
status: true, //布尔型;true|false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.setVolume({
volume : 60
},function(ret,err){
alert(JSON.stringify(ret,err));
});
iOS、Android系统
可提供的1.0.0及更高版本
删除当前播放item(当删除到最后剩余1条记录的时候就不能删除了)
delCurrentItem(callback(ret,err))
ret:
{
status: true, //布尔型;true|false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.delCurrentItem(function(ret,err){
alert(JSON.stringify(ret,err));
});
iOS、Android系统
可提供的1.0.0及更高版本
获取已经缓存的时长
getBufferPercentage()
##ret:
{
status: true, //布尔型;true|false
bufferPercentage : 10,//百分比(%)
msg : ''
}
var demo = api.require('scrollVideo');
var ret = demo.getBufferPercentage();
alert(JSON.stringify(ret));
iOS、Android系统
可提供的1.0.0及更高版本
设置播放进度
seekTo({params})
process:
##ret:
{
status: true, //布尔型;true|false
msg : ''
}
var demo = api.require('scrollVideo');
var ret = demo.seekTo({process : 12131});
alert(JSON.stringify(ret));
iOS、Android系统
可提供的1.0.0及更高版本
播放指定序号视频
playSpecifiedItem({params},callback(ret,err))
position:
ret:
{
status: true, //布尔型;true|false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.playSpecifiedItem({
position : 4
},function(ret,err){
alert(JSON.stringify(ret,err));
});
iOS、Android系统
可提供的1.0.0及更高版本
添加多条记录
addVideoDatas({params}, callback(ret,err))
userData:
{
videoType : 0,//播放类型 0:视频 1:穿山甲Draw信息流广告
uid: '', //(必填项)播放ID
imageUrl: '', //(可选项)播放前的预览图片
placeholderColor: '#DDDDDD', //(可选项)背景图颜色,默认值:黑色
imageType : 0,//(可选项)0:图片拉伸填充(图片可能会变形) 1:图片拉伸至完全显示(图片不会变形) 2:图片拉伸至完全铺满填充(图片不会变形)
videoUrl: '', //(必填项)播放的视频地址(支持http,https) **当为广告时请填写广告id**,
scalingMode : 4,//(可选选)视频播放显示铺满模式(详细描述见接口addVideoData文档)
isLocalCache : true, //(可选项)是否本地缓存视频,音频
styles : [{
type : 'button',// 按钮类型:button,text,music(带动画的音乐按钮),autoText(跑马灯),seekBar
x : 0, //按钮x坐标
y : 0, //按钮y坐标
w : 0, //按钮宽度
h : 0, //按钮高度
pic : 'widget://image/gif1.gif',//按钮图片路径;音乐按钮背景图(支持路径fs:// widget:// 类型:png gif )
pic1 : 'widget://image/gif1.gif',//音乐按钮中间logo图片路径(支持路径fs:// widget:// 类型:png gif )
isRadius : false,//是否进行圆形图片按钮处理;音乐按钮是否开启动画,默认:false
lineColor : '',//设置描边颜色,默认无
text : '测试',//文本内容
textSize : 12, //字体大小
textColor : '',//字体颜色
gravity : 0,// 文字位置 0:center 1 : left 2 :right
name : '',按钮名称
progress : 50,//进度值0-100
leftColor : '#ff9966',//左边颜色
rightColor : '#0099ff'//右边颜色
}],
smallVideo : {//窗口播放视频配置信息
x : 0, //视频x坐标
y : 0, //视频y坐标
w : 0, //视频宽度
h : 0, //视频高度
videoUrl: '', //(必填项)播放的视频地址(支持http,https),
scalingMode : 4,//(可选选)视频播放显示铺满模式(详细描述见接口addVideoData文档)
isLocalCache : true, //(可选项)是否本地缓存视频,音频
volume : 50 ,//(可选项)窗口播放音量,默认值:0
}
}
ret:
{
status: true, //布尔型;true|false
}
err:
{
msg : ''
}
var demo = api.require('scrollVideo');
demo.addVideoDatas({
userData : [{
uid : new Date().getTime()+6,
imageUrl :'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/51fc1ddde9790c96a6986b74342a15e3.png',
videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/dc811d2c4d88b409063c7ea2065fe6a0.mp4',
}]
},function(ret,err){
alert(JSON.stringify(ret,err));
});
iOS、Android系统
可提供的1.0.0及更高版本