videoPlayer
来自于:官方立即使用
论坛示例
为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。
概述
videoPlayer 封装了视频播放功能(不支持纯音频播放)。可快进、快退设置播放位置等操作,亦可设置屏幕亮度和系统声音大小。通过监听接口可获取模块上的各种手势操作事件。使用本模块时可把本模块当做一个 frame 添加在 window 或 frame 上。Android 平台上支持的的视频文件格式有:MP4、3gp;iOS 平台上支持的视频文件格式有:MOV,MP4,M4V。
本模块封装了三套播放方案:
一,通过调用 play 接口,直接打开一个自带默认播放界面的播放器,可通过 setPath 改变播放的视频资源;
二,通过 open 接口,打开一个纯播放器界面,再配合 frame 自定义完整的播放页面,可通过setPath、start、pause、stop、show、hide、fullScreen、cancelFullScreen、forward、rewind、seekTo、addEventListener、removeEventListener、setRect 接口控制播放操作。
三,通过 openPlay 接口,打开一个自带界面的播放器,可通过start、pause、show、hide、isFullscreen、customBtnIsSelected、setCustomBtnSelected、setCustomBtnCancelSelected、setCustomBtnVisible 接口控制播放操作。
另外,本模块提供了截取制定视频制定时刻画面的接口 videoCapture。
实例widget下载地址
play
打开一个自带界面的视频播放器,本播放器为全屏横屏显示,支持屏幕随设备自动旋转。用户单击播放器时,会弹出 foot 和 head 导航条,再次单击则关闭之。仅 setPath 接口对本接口打开的播放器有效
play({params}, callback(ret))
params
texts:
- 类型:JSON 对象
- 描述:(可选项)聊天输入框模块可配置的文本
- 内部字段:
{
head: { //(可选项)JSON 对象;顶部文字
title: '' //(可选项)字符串类型;顶部标题文字
}
}
styles:
- 类型:JSON 对象
- 描述:(可选项)模块的样式设置
- 内部字段:
{
head:{ //(可选项)JSON对象;播放器顶部导航条样式
bg: 'rgba(161,161,161,0.5)', //(可选项)字符串类型;顶部导航条背景,支持#、rgb、rgba、img;默认:rgba(161,161,161,0.5)
height: 44, //(可选项)数字类型;顶部导航条的高;默认:44
titleSize: 20, //(可选项)数字类型;顶部标题字体大小;默认:20
titleColor: '#fff', //(可选项)字符串类型;顶部标题字体颜色;默认:#fff
backLeftMargin:10, //(可选项)数字类型;返回按钮左边距;默认:15
backTopMargin:10, //(可选项)数字类型;返回按钮距离header的顶部距离;默认:在header中居中
backSize: 44, //(可选项)数字类型;顶部返回按钮大小;默认:44
backImg:'fs://img/back.png', //(可选项)字符串类型;顶部返回按钮的背景图片,要求本地路径(widget://、fs://);默认:返回小箭头图标
setSize: 44, //(可选项)数字类型;顶部右边设置按钮大小;默认:44
setImg:'fs://img/set.png' //(可选项)字符串类型;顶部右边设置按钮背景图片,要求本地路径(widget://、fs://);默认:设置小图标
},
foot:{ //(可选项)JSON对象;播放器底部导航条样式
bg: 'rgba(161,161,161,0.5)', //(可选项)字符串类型;底部导航条背景,支持#、rgb、rgba、img;默认:rgba(161,161,161,0.5)
height: 44, //(可选项)数字类型;底部导航条的高;默认:44
playSize: 44, //(可选项)数字类型;底部播放/暂停按钮大小;默认:44
playImg:'fs://img/back.png', //(可选项)字符串类型;底部播放按钮的背景图片,要求本地路径(widget://、fs://);默认:播放按钮图标
pauseImg:'fs://img/back.png', //(可选项)字符串类型;底部暂停按钮的背景图片,要求本地路径(widget://、fs://);默认:暂停按钮图标
nextSize: 44, //(可选项)数字类型;底部下一集按钮大小;默认:44
nextImg:'fs://img/back.png', //(可选项)字符串类型;底部下一集按钮的背景图片,要求本地路径(widget://、fs://);默认:下一集按钮图标
timeSize: 14, //(可选项)数字类型;底部时间标签大小;默认:14
timeColor:'#fff', //(可选项)字符串类型;底部时间标签颜色,支持#、rgba、rgb;默认:#fff
sliderImg:'fs://img/slder@2x.png',//(可选项)字符串类型;底部进度条滑块背景图片,要求本地路径(widget://、fs://);默认:滑块小图标((在iOS上需要添加二倍图或者三倍图,否则会出现毛边))
progressColor: '#696969', //(可选项)字符串类型;进度条背景色,支持#、rgba、rgb;默认:#696969
progressSelected: '#76EE00', //(可选项)字符串类型;滑动后的进度条背景色,支持#、rgb、rgba;默认:#76EE00
fullscreenImgSize:44, //(可选项)数字类型;全屏按钮大小设置;默认:44
verticalImg:'', //(可选项)字符串类型;底部竖屏按钮的背景图片,要求本地路径(widget://、fs://);默认:竖屏按钮图标
horizontalImg:'', //(可选项)字符串类型;底部横屏按钮的背景图片,要求本地路径(widget://、fs://);默认:横屏按钮图标
}
}
lockBtn:
- 类型:JSON对象
- 描述:锁屏按钮配置
{
lockImg:'fs://img/slder@2x.png', //(可选项)字符串类型;锁按钮的背景图片,要求本地路径(widget://、fs://);默认:锁按钮图标
unlockImg:'fs://img/slder@2x.png', //(可选项)字符串类型;解锁按钮的背景图片,要求本地路径(widget://、fs://);默认:解锁按钮图标
}
path:
- 类型:字符串
- 描述:(可选项)文档的路径,支持网络和本地(fs://)路径,在 android 平台上不支持 widget
autoPlay:
- 类型:布尔
- 描述:(可选项)打开时是否自动播放
- 默认值:true(自动播放)
coverImg:
- 类型:字符串类型
- 描述:(可选项)封面图路径,播放器打开尚未播放时的封面图,要求本地路径(widget://、fs://)
autorotation:
- 类型:布尔
- 描述:(可选项)视频播放页面是否支持自动旋转(横竖屏),若为 false 则手动点击右下角按钮旋转
- 默认值:true(根据设备当前方向自动适配旋转)
audio:
- 类型:布尔
- 描述:(可选项)播放的资源是否是音频文件,若是则开始播放后不移除封面图 coverImg
- 默认值:false
scalingMode:(该参数已废弃)
- 类型:字符串
- 描述:(可选项)缩放模式 该参数仅支持iOS
- 默认值:'scaleAspectFit'
取值范围:
- scaleNone (scalingModeNone)
- scaleToFill(填充)
- scaleAspectFit(适应)
- scaleModeFill(scalingModeFill)
seekBarDragable:
- 类型:布尔
- 描述:(可选项) 播放进度条是否可以拖动
- 默认:true
hideStatusBar:
- 类型:布尔
- 描述:(可选项) 是否隐藏状态栏(该参数仅支持android)
- 默认:false
isFull:
- 类型:布尔
- 描述:(可选项)是否全屏
- 默认:true
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
eventType: //字符串类型;回调事件类型,取值范围如下:
//show(打开成功并显示)
//back(返回)
//play(播放)
//pause(暂停)
//next (下一集)
//failed(播放失败)
}
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.play({
texts: {
head: {
title: '顶部文字'
}
},
styles: {
head: {
bg: 'rgba(0.5,0.5,0.5,0.7)',
height: 44,
titleSize: 20,
titleColor: '#fff',
backSize: 44,
backImg: 'fs://img/back.png',
setSize: 44,
setImg: 'fs://img/set.png'
},
foot: {
bg: 'rgba(0.5,0.5,0.5,0.7)',
height: 44,
playSize: 44,
playImg: 'fs://img/back.png',
pauseImg: 'fs://img/back.png',
nextSize: 44,
nextImg: 'fs://img/back.png',
timeSize: 14,
timeColor: '#fff',
sliderImg: 'fs://img/slder.png',
progressColor: '#696969',
progressSelected: '#76EE00',
lockImg:'fs://img/slder@2x.png',
unlockImg:'fs://img/slder@2x.png',
}
},
path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4', //(可选项)字符串类型;文档的路径,支持网络和本地(fs://)路径;默认:未传值时不播放
//在 android 平台上不支持 widget://
autoPlay: true //(可选项)布尔类型;打开时是否自动播放;默认:true(自动播放)
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
open
打开一个视频播放器(类似一个frame)
open({params}, callback(ret, err))
params
rect:
- 类型:JSON 对象
- 描述:(可选项)模块的位置及尺寸
- 内部字段:
{
x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
w: 320, //(可选项)数字类型;模块的宽度;默认:所属的 Window 或 Frame 的宽度
h: 300 //(可选项)数字类型;模块的高度;默认:w的3/4
}
bg:
- 类型:字符串
- 描述:(可选项)字符串类型;视频背景颜色,支持#、rgb、rgba (在切换视屏为了防止闪屏,请根据自己的视频调节颜色)
- 默认:'#fff'
path:
- 类型:字符串
- 描述:(可选项)文档的路径,支持网络和本地(fs://)路径,在 android 平台上不支持 widget
autoPlay:
- 类型:布尔
- 描述:(可选项)打开时是否自动播放
- 默认值:true(自动播放)
scalingMode:
- 类型:字符串
- 描述:(可选项)缩放模式 该参数仅支持ios
- 默认值:'scaleAspectFit'
取值范围:
- scaleNone (scalingModeNone)
- scaleToFill(填充)
- scaleAspectFit(适应)
- scaleModeFill(scalingModeFill)
coverImg:
- 类型:布尔
- 描述:(可选项)封面图路径,播放器打开尚未播放时的封面图,要求本地路径(widget://、fs://)
loop:
- 类型:布尔
- 描述:(可选项)是否循环播放 该参数仅支持ios
- 默认值:false
fixedOn:
- 类型:字符串类型
- 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
- 默认:模块依附于当前 window
fixed:
- 类型:布尔
- 描述:(可选项)模块是否随所属 window 或 frame 滚动
- 默认值:true(不随之滚动)
callback(ret, err)
ret:
- 类型:JSON 对象
- 内部字段:
{
status: //布尔类型;是否打开播放组件并显示,true|false;Will be deprecated in ther future
duration: //数字类型;视频总时长,单位为s,仅当 status 为 true并且eventType=playing 时有值 限Android
eventType: //字符串类型;交互事件类型,取值范围:
//show(打开成功并显示)
//error(播放器打开失败)
//playing(开始播放)
//failed(播放失败)
}
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.open({
path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
scalingMode:'scaleToFill'
}, function(ret, err) {
if (ret.status) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
setPath
设置音/视频的文件路径,对 open 和 play 打开的视频播放器有效。
setPath({params}, callback(ret))
params
path:
- 类型:字符串
- 描述:文档的路径,支持网络和本地(fs://)路径,在 android 平台上不支持 widget
bg:
- 类型:字符串
- 描述:(可选项)字符串类型;视频背景颜色,支持#、rgb、rgba (在切换视屏为了防止闪屏,请根据自己的视频调节颜色)
- 默认:'#fff'
coverImg:
- 类型:布尔
- 描述:(可选项)封面图路径,播放器打开尚未播放时的封面图,要求本地路径(widget://、fs://)
title:
- 类型:字符串
- 描述:(可选项)当设置 play 接口打开的视频时,本参数表示设置该视频的标题,本参数仅对 play 接口有效
- 默认值:原标题
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
status: //布尔类型;路径是否重设成功,true|false
duration: //数字类型;视频总时长,单位为s,仅当 status 为 true 时有值
}
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.setPath({
path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
coverImg: ''
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
start
开始播放,只对 open 和 openPlay 接口打开的视频播放器有效
start()
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.start();
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
pause
暂停播放,只对 open 和 openPlay 接口打开的视频播放器有效
pause()
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.pause();
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
stop
停止播放,仅对 open 打开的视频播放器有效
stop()
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.stop();
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
close
关闭播放器 ,对 open、openPlay、play 打开的视频播放器均有效
close()
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.close();
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
show
显示视频播放视图,仅对 open 和 openPlay 打开的视频播放器有效
show()
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.show();
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
hide
隐藏视频播放视图,仅对 open 和 openPlay 打开的视频播放器有效
hide()
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.hide();
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
fullScreen
全屏播放(横屏模式),仅对open打开的播放器有效
fullScreen()
Params
orientation:
- 类型:字符串
- 描述:转屏方向
- 默认:right
- 取值范围:
- right 向右旋转
- left 向左旋转
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.fullScreen({
orientation:'right'
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
cancelFullScreen
取消全屏播放,仅对open打开的播放器有效
cancelFullScreen()
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.cancelFullScreen();
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
forward
快进,仅对open打开的播放器有效
forward({params})
params
seconds:
- 类型:数字
- 描述:快进的秒数
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.forward({
seconds: 5
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
rewind
快退,仅对open打开的播放器有效
rewind({params})
params
seconds:
- 类型:数字
- 描述:快退的秒数
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.rewind({
seconds: 5
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
seekTo
跳转,仅对open打开的播放器有效
seekTo({params})
params
seconds:
- 类型:数字
- 描述:跳转到音视频播放的秒数
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.seekTo({
seconds: 20
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
setBrightness
设置屏幕亮度,对open、openPlay、play打开的播放器有效
setBrightness({params})
params
brightness:
- 类型:数字
- 描述:(可选项)设置的屏幕的亮度,取值范围:0-100,在 iOS 平台上设置的是系统屏幕亮度。Android 平台上设置的本应用内的屏幕亮度
- 默认值:80
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.setBrightness({
brightness: 50
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0及 更高版本
getBrightness
获取当前屏幕亮度值,对open、openPlay、play打开的播放器有效
getBrightness(callback(ret, err))
callback(ret, err)
ret:
- 类型:JSON 对象
- 内部字段:
{
brightness: //数字类型;当前屏幕亮度值
}
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.getBrightness(function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
setVolume
设置音量,对open、openPlay、play打开的播放器有效
setVolume({params})
params
volume:
- 类型:数字
- 描述:(可选项)音量大小,取值范围:0-1
- 默认值:0
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.setVolume({
volume: 0.6
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
getVolume
获取当前播放音量,对open、openPlay、play打开的播放器有效
getVolume(callback(ret, err))
callback(ret, err)
ret:
- 类型:JSON 对象
- 内部字段:
{
volume: //数字类型;当前音量值
}
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.getVolume(function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
addEventListener
添加动作监听(当全屏或者fixed为true且页面不能被左右滑动时有效),对open打开的播放器有效
addEventListener({params},callback(ret, err))
params
name:
- 类型:字符串
- 描述:(可选项)所要监听的动作名称
- 取值范围:
- 'leftUp':播放器靠左的二分之一内的上滑事件,每滑动5(百分比)回调执行一次
- 'leftDown':播放器靠左的二分之一内的下滑事件,每滑动5(百分比)回调执行一次
- 'rightUp':播放器靠右的二分之一内的上滑事件,每滑动5(百分比)回调执行一次
- 'rightDown':播放器靠右的二分之一内的下滑事件,每滑动5(百分比)回调执行一次
- 'swipeLeft':播放器上的左滑事件,每滑动5(百分比)回调执行一次
- 'swipeRight':播放器上的右滑事件,每滑动5(百分比)回调执行一次
- 'click':点击播放器事件(单击手势)
- 'doubleClick':双击播放器事件(单击手势)
- 'play':播放事件,包括开始播放(start)、正在播放(playing)、暂停(pause)、停止(stop)、播放完成(complete),在回调里用 eventType 区分。播放事件为 playing 时,回调函数每秒执行四次
callback(ret, err)
ret:
- 类型:JSON 对象
- 内部字段:
{
eventType: //字符串类型;播放事件类型,仅当 name 为 play 时有值;取值范围如下:
//start(开始播放)
//playing(正在播放)
//pause(播放暂停)
//stop(播放停止)
//complete(播放完成)
current: //数字类型;当前播放位置,单位为s,仅当 name 为 play,eventType 为 playing 时有值
}
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.addEventListener({
name: 'leftUp'
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
removeEventListener
移除动作监听,对open打开的播放器有效
removeEventListener({params})
params
name:
- 类型:字符串
- 描述:(可选项)所要移除的监听的动作名称
- 取值范围:
- 'leftUp': 播放器靠左的二分之一内的上滑事件,每滑动5(百分比)回调执行一次
- 'leftDown': 播放器靠左的二分之一内的下滑事件,每滑动5(百分比)回调执行一次
- 'rightUp': 播放器靠右的二分之一内的上滑事件,每滑动5(百分比)回调执行一次
- 'rightDown': 播放器靠右的二分之一内的下滑事件,每滑动5(百分比)回调执行一次
- 'swipeLeft': 播放器上的左滑事件,每滑动5(百分比)回调执行一次
- 'swipeRight': 播放器上的右滑事件,每滑动5(百分比)回调执行一次
- 'click': 点击播放器事件(单击手势)
- 'doubleClick': 双击播放器事件(单击手势)
- 'play': 播放事件,包括开始播放(start)、正在播放(playing)、暂停(pause)、停止(stop)、播放完成(complete)
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.removeEventListener({
name: 'leftUp'
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
setRect
设置视频播放器位置、尺寸,以及是否全屏,对open打开的播放器有效
setRect({params}, callback(ret, err))
params
rect:
- 类型:JSON 对象
- 描述:(可选项)模块的位置及尺寸
- 内部字段:
{
x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
w: 320, //(可选项)数字类型;模块的宽度;默认:open中设置的宽度
h: 300 //(可选项)数字类型;模块的高度;默认:open中设置的高度
}
fullscreen:
- 类型:布尔类型
- 描述:(可选项)模块的位置及尺寸是否全屏(true不显示状态栏,false显示状态栏)
- 默认值:false(不随全屏)
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.setRect({
rect: {
x: 0,
y: 0,
w: 320,
h: 300
},
fullscreen: true
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
openPlay
打开一个自带界面的视频播放器,本播放器全屏时横屏显示,支持屏幕随设备自动旋转。用户单击播放器时,会弹出 foot 和 head 导航条,再次单击则关闭之。
openPlay({params}, callback(ret))
params
rect:
- 类型:JSON 对象
- 描述:(可选项)模块的位置及尺寸
- 内部字段:
{
x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
w: 320, //(可选项)数字类型;模块的宽度;默认:所属的 Window 或 Frame 的宽度
h: 300 //(可选项)数字类型;模块的高度;默认:w的3/4
}
texts:
- 类型:JSON 对象
- 描述:(可选项)聊天输入框模块可配置的文本
- 内部字段:
{
head: { //(可选项)JSON 对象;顶部文字
title: '' //(可选项)字符串类型;顶部标题文字
}
}
centerPlayBtn:
- 类型:JSON对象
- 描述:(可选项)视频未播放或者视频暂停时在视频播放器中间显示(不传不显示)
{
size:30, // 数字类型;按钮大小;默认:30
iconPath:'widget://image/playIcon.png' // 字符串类型;图标路径;
}
styles:
- 类型:JSON 对象
- 描述:(可选项)模块的样式设置
- 内部字段:
{
head:{ //(可选项)JSON对象;播放器顶部导航条样式
bg: 'rgba(161,161,161,0.5)', //(可选项)字符串类型;顶部导航条背景,支持#、rgb、rgba、img;默认:rgba(161,161,161,0.5)
height: 44, //(可选项)数字类型;顶部导航条的高;默认:44
y:20 , // (可选项)数字类型;距离模块顶部的距离;默认:20(仅支持iOS)
titleSize: 20, //(可选项)数字类型;顶部标题字体大小;默认:20
titleColor: '#fff', //(可选项)字符串类型;顶部标题字体颜色;默认:#fff
backSize: 44, //(可选项)数字类型;顶部返回按钮大小;默认:44
backImg:'fs://img/back.png', //(可选项)字符串类型;顶部返回按钮的背景图片,要求本地路径(widget://、fs://);默认:返回小箭头图标
backLeftMargin:10, //(可选项)数字类型;返回按钮左边距;默认:15
customButtons:[{
w:30, //(可选项)数字类型;顶部右边设置按钮大小;默认:30
h:30, //(可选项)数字类型;顶部右边设置按钮大小;默认:30
marginRight:10, //(可选项)数字类型;按钮右边距;默认:10
img:'fs://img/img1.png',//(可选项)字符串类型;顶部右边设置自定义按钮(未选中状态),要求本地路径(widget://、fs://);
imgSelected:'fs://img/img2.png',//(可选项)字符串类型;顶部右边设置自定义按钮(选中状态),要求本地路径(widget://、fs://);
isSelected:false, //(可选项)布尔类型;顶部右边设置自定义按钮是否被选中,默认:false;
}]
},
foot:{ //(可选项)JSON对象;播放器底部导航条样式
bg: 'rgba(161,161,161,0.5)', //(可选项)字符串类型;底部导航条背景,支持#、rgb、rgba、img;默认:rgba(161,161,161,0.5)
height: 44, //(可选项)数字类型;底部导航条的高;默认:44
playSize: 44, //(可选项)数字类型;底部播放/暂停按钮大小;默认:44
playImg:'fs://img/play.png', //(可选项)字符串类型;底部播放按钮的背景图片,要求本地路径(widget://、fs://);默认:播放按钮图标
pauseImg:'fs://img/pause.png', //(可选项)字符串类型;底部暂停按钮的背景图片,要求本地路径(widget://、fs://);默认:暂停按钮图标
timeSize: 14, //(可选项)数字类型;底部时间标签大小;默认:14
timeColor:'#fff', //(可选项)字符串类型;底部时间标签颜色,支持#、rgba、rgb;默认:#fff
sliderImg:'fs://img/slder@2x.png', //(可选项)字符串类型;底部进度条滑块背景图片,要求本地路径(widget://、fs://);默认:滑块小图标(在iOS上需要添加二倍图或者三倍图,否则会出现毛边)
progressColor: '#696969', //(可选项)字符串类型;进度条背景色,支持#、rgba、rgb;默认:#696969
progressSelected: '#76EE00' //(可选项)字符串类型;滑动后的进度条背景色,支持#、rgb、rgba;默认:#76EE00
rotationSize:44 //(可选项)数字类型;底部横屏/竖屏按钮大小;默认:foot的高度
verticalImg:'fs://img/vertical.png', //(可选项)字符串类型;底部横竖屏切换按钮的背景图片,竖屏状态下的切换按钮,要求本地路径(widget://、fs://);默认:竖屏按钮图标
horizontalImg:'fs://img/horizontal.png', //(可选项)字符串类型;底部横竖屏切换按钮的背景图片,横屏状态下的切换按钮,要求本地路径(widget://、fs://);默认:横屏按钮图标
}
}
lockBtn:
- 类型:JSON对象
- 描述:锁屏按钮配置
{
lockImg:'fs://img/slder@2x.png', //(可选项)字符串类型;锁按钮的背景图片,要求本地路径(widget://、fs://);默认:锁按钮图标
unlockImg:'fs://img/slder@2x.png', //(可选项)字符串类型;解锁按钮的背景图片,要求本地路径(widget://、fs://);默认:解锁按钮图标
}
path:
- 类型:字符串
- 描述:(可选项)文档的路径,支持网络和本地(fs://)路径,在 android 平台上不支持 widget
autoPlay:
- 类型:布尔
- 描述:(可选项)打开时是否自动播放
- 默认值:true(自动播放)
coverImg:
- 类型:布尔
- 描述:(可选项)封面图路径,播放器打开尚未播放时的封面图,要求本地路径(widget://、fs://、http:// )
autorotation:
- 类型:布尔
- 描述:(可选项)视频播放页面是否支持自动旋转(横竖屏),若为 false 则手动点击右下角按钮旋转(ios不支持此参数,如果需要视频自动旋转,在iPhone手机上打开自动旋转按钮即可)
- 默认值:true(根据设备当前方向自动适配旋转)
useGestureControl:
- 类型:布尔
- 描述:(可选项)视频播放页面是否使用手势控制 (亮度,声音,快进快退)
- 默认值:true
seekBarDragable:
- 类型:布尔
- 描述:(可选项) 播放进度条是否可以拖动
- 默认:true
audio:
- 类型:布尔
- 描述:(可选项)播放的资源是否是音频文件,若是则开始播放后不移除封面图 coverImg
- 默认值:false
isShowBack:
- 类型:布尔
- 描述:(可选项)在竖屏时是否显示back按钮(与横屏无关)
- 默认值:true(显示)
fixedOn:
- 类型:字符串类型
- 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
- 默认:模块依附于当前 window
fixed:
- 类型:布尔
- 描述:(可选项)模块是否随所属 window 或 frame 滚动
- 默认值:true(不随之滚动)
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
status: //布尔类型;是否打开播放组件并显示,true|false;Will be deprecated in ther future
duration: //数字类型;视频总时长,单位为s,仅当 status 为 true 时有值
eventType: //字符串类型;交互事件类型,取值范围:
//show(打开成功并显示)
//error(播放器打开失败)
//play(开始播放)
//failed(播放失败)
//pause(暂停)
//finish(播放完成)
//back (返回)
//landscape 播放器横屏事件
//portrait 播放器竖屏事件
value:false //( true代表横屏,false代表竖屏当前是横屏还是竖屏,仅字段为back时有效)
btnIndex: 0, //数字类型,用户自定义按钮的点击index,从右到左排列
isSelected:true //布尔类型;用户自定义按钮是否被选中
}
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.openPlay({
rect:
{ x: 0,
y : 0,
w : 320,
h: 250
},
texts: {
head: {
title: '顶部文字'
}
},
styles: {
head: {
bg: 'rgba(0.5,0.5,0.5,0.7)',
height: 44,
y:20,
titleSize: 20,
titleColor: '#fff',
backSize: 44,
backImg: 'fs://img/back.png',
customButtons:[],
},
foot: {
bg: 'rgba(0.5,0.5,0.5,0.7)',
height: 44,
playSize: 44,
playImg: 'fs://img/paly.png',
pauseImg: 'fs://img/pause.png',
timeSize: 14,
timeColor: '#fff',
sliderImg: 'fs://img/slder.png',
progressColor: '#696969',
progressSelected: '#76EE00',
verticalImg:'',
horizontalImg:'',
lockImg:'',
unlockImg:'',
}
},
path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4', //(可选项)字符串类型;文档的路径,支持网络和本地(fs://)路径;默认:未传值时不播放
//在 android 平台上不支持 widget://
autoPlay: true //(可选项)布尔类型;打开时是否自动播放;默认:true(自动播放)
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
可用性
iOS 系统,Android 系统
可提供的 1.0.0 及更高版本
onBack
该方法需要在监听到物理按键时调用(只对 openPlay 接口打开的播放器有效,暂仅支持 android)
onBack()
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.onBack();
可用性
Android 系统
可提供的 1.0.0 及更高版本
isFullscreen
判断当前窗口是否全屏(只对 openPlay 接口打开的播放器有效)
isFullscreen(callback(ret))
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
isFullscreen:true // 布尔类型,是否全屏
}
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.isFullscreen(function(ret){
alert(JSON.stringify(ret));
});
可用性
Android,iOS系统
可提供的 1.0.0 及更高版本
onPause
该方法需要在 pause 事件中调用(只对 openPlay 接口打开的播放器有效,仅支持android)
onPause()
示例代码
api.addEventListener({
name:'pause'
}, function(ret){
var videoPlayer = api.require('videoPlayer');
videoPlayer.onPause();
});
可用性
Android 系统
可提供的 1.0.0 及更高版本
onResume
该方法需要在resume事件中调用(只对 openPlay 接口打开的播放器有效,仅支持android)
onResume()
示例代码
api.addEventListener({
name:'resume'
}, function(ret){
var videoPlayer = api.require('videoPlayer');
videoPlayer.onResume();
});
可用性
Android 系统
可提供的 1.0.0 及更高版本
customBtnIsSelected
判断自定义按钮是否被选中 注意:只对openPlay接口打开的播放器有效
customBtnIsSelected(params,callback(ret))
params
index:
- 类型:数字
- 描述:(可选项)用户自定义按钮的点击index,从右到左排列
- 默认值:1
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
isSelected:true // 布尔类型,是否选中
}
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.customBtnIsSelected({
index:1,
},function(ret){
alert(JSON.stringify(ret));
});
可用性
iOS,Android 系统
可提供的 1.0.0 及更高版本
setCustomBtnSelected
设置自定义按钮被选中 注意:只对openPlay接口打开的播放器有效
setCustomBtnSelected(params)
params
index:
- 类型:数字
- 描述:(可选项)用户自定义按钮的点击index,从右到左排列
- 默认值:1
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.setCustomBtnSelected({
index:1
});
可用性
iOS,Android 系统
可提供的 1.0.0 及更高版本
setCustomBtnCancelSelected
设置自定义按钮被取消 只对openPlay接口打开的播放器有效
setCustomBtnCancelSelected(params)
params
index:
- 类型:数字
- 描述:(可选项)用户自定义按钮的点击index,从右到左排列
- 默认值:1
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.setCustomBtnCancelSelected({
index:1
});
可用性
iOS,Android 系统
可提供的 1.0.0 及更高版本
setCustomBtnVisible
设置自定义按钮是否隐藏 只对 openPlay 接口打开的播放器有效
setCustomBtnVisible(params)
params
index:
- 类型:数字
- 描述:(可选项)用户自定义按钮的点击index,从右到左排列
- 默认值:1
visible:
- 类型:布尔
- 描述:是否显示
- 默认:false
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.setCustomBtnVisible({
index:1,
visible:false
});
可用性
iOS,Android 系统
可提供的 1.0.0 及更高版本
videoCapture
获取指定视频的制定时刻的截图
videoCapture(params)
params
videoUrl:
- 类型:字符串
- 描述:视频地址,支持本地(widget://和fs:// android仅支持fs://)和网络视频
time:
- 类型:数字类型
- 描述:指定位置(单位为秒)
isAblum:
- 类型:布尔类型
- 描述:(可选项)是否保存相册
- 默认:false
name:
- 类型:布尔类型
- 描述:(必选项)图片名
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
status: true, // 布尔类型; 是否转换成功,true|false
path: '' // 字符串类型;转换的图片在本地保存的路径(绝对路径)
}
示例代码
var videoPlayer = api.require('videoPlayer');
videoPlayer.videoCapture({
videoUrl:'',
time:10,
isAblum:false,
name:'moive'
}, function(ret){
alert(JSON.stringify(ret));
});
可用性
iOS,Android 系统
可提供的 1.0.0 及更高版本
论坛示例
为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。