scrollVideo

论坛示例

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

概述

scrollVideo插件用ijkplayer封装在iOS、Android下仿抖音上下滑动播放视频功能(列表图片加载会存在延迟,可能会出现黑屏,属于正常现象,后续优化)。

固件要求

Android:4.4及以上 iOS:9.0及以上

插件接口

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
    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

打开滑动播放器

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(不随之滚动)

userData:

  • 类型:JSON 对象
  • 描述:(必填项)视频播放列表(最少传入1条记录)。
{
    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:

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

callback(ret,err)

ret:

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

err:

  • 类型:JSON 对象
  • 内部字段:
{
    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

隐藏滑动播放器

hideScrollVideo(callback(ret, err))

callback(ret, err)

ret:

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

err:

  • 类型:JSON 对象
  • 内部字段:
{
    msg : ''
}

示例代码

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

可用性

iOS、Android系统

可提供的1.0.0及更高版本

showScrollVideo

显示滑动播放器

showScrollVideo(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true,      //布尔型;true
}

示例代码

var demo = api.require('scrollVideo');
demo.showScrollVideo(function(ret){
    alert(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('scrollVideo');
demo.closeScrollVideo(function(ret, err){
    alert(JSON.stringify(ret) + "  " +JSON.stringify(err));
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

updateVideoStyle

更新当前播放器样式

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

params

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

callback(ret,err)

ret:

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

err:

  • 类型:JSON 对象
  • 内部字段:
{
    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

添加一条记录

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

callback(ret,err)

ret:

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

err:

  • 类型:JSON 对象
  • 内部字段:
{
    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

暂停当前视频播放

pause(callback(ret,err))

callback(ret,err)

ret:

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

err:

  • 类型:JSON 对象
  • 内部字段:
{
    msg : ''
}

示例代码

var demo = api.require('scrollVideo');
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('scrollVideo');
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('scrollVideo');
var ret = demo.isPlaying();
alert(JSON.stringify(ret));

可用性

iOS、Android系统

可提供的1.0.0及更高版本

itemCount

获取播放item总数

itemCount()

##ret:

  • 类型:JSON 对象
  • 内部字段:
{
    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

获取视频的时长

getDuration()

##ret:

  • 类型:JSON 对象
  • 内部字段:
{
    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

获取已经播放的时长

getCurrentPosition()

##ret:

  • 类型:JSON 对象
  • 内部字段:
{
    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

设置音量

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('scrollVideo');
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('scrollVideo');
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('scrollVideo');
var ret = demo.getBufferPercentage();
alert(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('scrollVideo');
var ret = demo.seekTo({process : 12131});
alert(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('scrollVideo');
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 )
       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
    }
}

callback(ret,err)

ret:

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

err:

  • 类型:JSON 对象
  • 内部字段:
{
    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及更高版本

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