scrollVideoAli

论坛示例

为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码供您参考。

概述

scrollVideoAli插件用阿里播放器底层封装仿抖音上下滑动播放视频功能，解决scrollVideo插件和阿里系播放器一起使用iOS不能正常播放的问题。

固件要求

Android：4.4及以上 iOS：8.0及以上

插件使用攻略

1、Info.plist配置信息如下,放在res目录下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>AlivcLicenseKey</key>
    <string>Wo8stiG49mZsBReN8a089ddc9989f41b79fa729cbffef****</string>
</dict>
</plist>

插件接口

addEventListener

滑动播放器监听

addEventListener(callback(ret))

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true||false
    evenType : 'onPageSelected'//当前播放页:onPageSelected
                    //播放错误:onErrorVideo
                    //缓冲开始:onBufferingStart
                    //缓冲结束:onBufferingEnd
                    //单击事件:onSingleTapUp
                    //双击事件:onDoubleTap
                    //长按事件:onLongPress
                    //按钮点击事件:onBtnClick
                    //文字点击事件:onTextClick
                    //大小播放器切换事件:onSwitchPlayer
                    //视频准备成功事件:onPrepared
                    //向左滑过事件:onMoveLeft
                    //向右滑过事件:onMoveRight
                    //向上滑过事件:onMoveUp
                    //向下滑过事件:onMoveDown
                    //视频播放完成事件:onCompletion
    xh : 0, //播放页序号
    itemData : {..},//当前item的json内容
    clickData:{...}//对应按钮或者文字的json内容。
}

示例代码

var demo = api.require('scrollVideoAli');
demo.addEventListener(function(ret, err){
    api.alert({msg: JSON.stringify(ret)});
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

openScrollVideo

打开滑动播放器

openScrollVideo({params}, callback(ret,err))

params

rect：

类型：JSON 对象
描述：（必填项）插件的位置及尺寸
内部字段：

{
    x: 0,   //（必填项）数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认值：0
    y: 0,   //（必填项）数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认值：0
    w: 320, //（必填项）数字类型；插件的宽度；默认值：所属的 Window 或 Frame 的宽度
    h: 250  //（必填项）数字类型；插件的高度；默认值：所属的 Window 或 Frame 的高度
}

fixedOn：

类型：字符串
描述：（可选项）插件所属 Frame 的名字，若不传则插件归属于当前 Window

fixed：

类型：布尔
描述：（（可选项）插件是否随所属 Window 或 Frame 滚动
默认值：true（不随之滚动）

{
    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 ）
       pic2 : '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：

类型：数字型
描述：（可选项）指定从播放列表中的第几条开始播放。
默认值：0

orientation：

类型：数字型
描述：（可选项）播放列表滑动方向(0:垂直滑动 1:水平滑动)。
默认值：0

options：

类型：JSON型
描述：（可选项）设置播放器内核配置项(与userData内部options配置互斥)。

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
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

隐藏滑动播放器

hideScrollVideo(callback(ret, err))

callback(ret, err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true||false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
demo.hideScrollVideo();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

showScrollVideo

显示滑动播放器

showScrollVideo(callback(ret))

callback(ret)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true
}

示例代码

var demo = api.require('scrollVideoAli');
demo.showScrollVideo(function(ret){
    api.alert({msg: JSON.stringify(ret)});
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

closeScrollVideo

关闭滑动播放器

closeScrollVideo(callback(ret, err))

callback(ret, err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true||false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
demo.closeScrollVideo(function(ret, err){
    alert(JSON.stringify(ret) + "  " +JSON.stringify(err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

updateVideoStyle

更新当前播放器样式

updateVideoStyle({params}, callback(ret,err))

params

isClean：

类型：布尔类型
描述：（可选项）更新样式时是否清空原来存在的按钮。(true:清空 false:不清空)
默认值：false

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 ）
   pic2 : '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 : '',按钮名称
}]

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
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

添加一条记录

addVideoData({params}, callback(ret,err))

params

uid：

类型：字符串
描述：（必填项）播放ID

imageUrl：

类型：字符串
描述：（必填项）播放前的预览图片

videoUrl：

类型：浮点型
描述：（必填项）播放的视频地址(支持http,https)

isLocalCache：

类型：布尔型
描述：（可选项）是否本地缓存视频,音频;直播类不能缓存,开发者自行控制;(备注:iOS虽然缓存在本地了,但是不能完全离线播放;缓存文件在cache://文件目录下). (开启:true ; 不开启:false)
默认值：直播:rtmp://开头|rtsp://开头|.m3u8结尾;其余为非直播

scalingMode：

类型：数字型
描述：（可选项）视频播放显示铺满模式（1:无缩放, 2:适应大小模式, 3:充满可视范围，可能会被裁剪, 4:缩放到充满视图）
默认值：4（无缩放）

placeholderColor：

类型：字符串
描述：（可选项）背景图的背景色。
默认值：黑色

placeholderImage：

类型：字符串
描述：（可选项）背景图未加载时显示的图片,当该值存在时，placeholderColor无效。

imageType：

类型：数字型
描述：（可选项）背景图渲染类型 0:图片拉伸填充(图片可能会变形) 1:图片拉伸至完全显示(图片不会变形) 2:图片拉伸至完全铺满填充(图片不会变形)
默认值：0:图片拉伸填充(图片可能会变形)

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 ）
   pic2 : '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 : '',按钮名称
}]

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
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

暂停当前视频播放

pause(callback(ret,err))

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
demo.pause(function(ret,err){
    alert(JSON.stringify(ret,err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

play

暂停后恢复播放当前视频

play(callback(ret,err))

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
demo.play(function(ret,err){
    alert(JSON.stringify(ret,err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

isPlaying

是否播放状态

isPlaying()

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
    isPlaying : true,
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
var ret = demo.isPlaying();
api.alert({msg: JSON.stringify(ret)});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

itemCount

获取播放item总数

itemCount()

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
    count : 0,
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
var ret = demo.itemCount();
api.alert({msg: JSON.stringify(ret)});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

getDuration

获取视频的时长

getDuration()

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
    duration : 0,
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
var ret = demo.getDuration();
api.alert({msg: JSON.stringify(ret)});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

getCurrentPosition

获取已经播放的时长

getCurrentPosition()

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
    currentPosition : 0,
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
var ret = demo.getCurrentPosition();
api.alert({msg: JSON.stringify(ret)});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

setVolume

设置音量

setVolume({params},callback(ret,err))

params

volume：

类型：数字型
描述：（可选项）播放视频音量0-100。
默认值：0

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
demo.setVolume({
    volume : 60
},function(ret,err){
    alert(JSON.stringify(ret,err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

delCurrentItem

删除当前播放item(当删除到最后剩余1条记录的时候就不能删除了)

delCurrentItem(callback(ret,err))

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
demo.delCurrentItem(function(ret,err){
    alert(JSON.stringify(ret,err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

getBufferPercentage

获取已经缓存的时长

getBufferPercentage()

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
    bufferPercentage : 10,//百分比(%)
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
var ret = demo.getBufferPercentage();
api.alert({msg: JSON.stringify(ret)});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

seekTo

设置播放进度

seekTo({params})

params

process：

类型：数字型
描述：（可选项）播放视频进度值。
默认值：0

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
var ret = demo.seekTo({process : 12131});
api.alert({msg: JSON.stringify(ret)});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

playSpecifiedItem

播放指定序号视频

playSpecifiedItem({params},callback(ret,err))

params

position：

类型：数字型
描述：（可选项）播放指定列表中序号视频。
默认值：0

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
demo.playSpecifiedItem({
    position : 4
},function(ret,err){
    alert(JSON.stringify(ret,err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

addVideoDatas

添加多条记录

addVideoDatas({params}, callback(ret,err))

params

userData：

类型：JSON 对象
描述：（必填项）视频播放列表（最少传入1条记录）。

{
   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 ）
       pic2 : '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
    }
}

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
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及更高版本

setShowByTag

控制按钮的显示和隐藏

setShowByTag({params}, callback(ret,err))

params

tag：

类型：数字型
描述：（必填项）视图中按钮的tag值。

isShow：

类型：布尔型
描述：（可选项）视图中按钮是否显示。
默认值：false

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideoAli');
demo.setShowByTag({
    tag : 1002
},function(ret,err){
    alert(JSON.stringify(ret,err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

setMusicByTag

控制音乐图标是否暂停

setMusicByTag({params}, callback(ret,err))

params

tag：

类型：数字型
描述：（必填项）视图中按钮的tag值。

isRuning：

类型：布尔型
描述：（可选项）音乐图标是否旋转。
默认值：false

callback(ret,err)

ret：

类型：JSON 对象
内部字段：

{
    status: true,      //布尔型；true|false
}

err：

类型：JSON 对象
内部字段：

{
    msg : ''
}

示例代码

var demo = api.require('scrollVideo');
demo.setMusicByTag({
    tag : 1002
},function(ret,err){
    alert(JSON.stringify(ret,err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

是否仍需要帮助？请保持联络！

最后更新于 2025/09/15