UIScrollPlayer

来自于:AC模块工作室立即使用

概述

UIScrollPlayer模块封装了仿抖音上下滑动的播放器

模块接口

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://)
    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

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){
    alert(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: '',   //(可选项)播放前的预览图片
    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

暂停后播放视频

play()

示例代码

var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.play();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

addEventListener

滑动播放器监听

addEventListener(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    evenType:'onPlaying'
             //未知:onUnknown
             //播放:onPlaying
             //暂停:onPaused
             //停止:onStopped(IOS)
               //播放错误:onError
              //单击事件:onSingleTapUp
              //双击事件:onDoubleTap
              //滑动事件:onScroll
    index:0  //播放页序号
}

示例代码

var UIScrollPlayer = api.require('UIScrollPlayer');
UIScrollPlayer.addEventListener(function(ret, err){
    alert(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){
    alert(JSON.stringify(ret));
});

可用性

iOS、Android系统

可提供的1.0.2及更高版本