moviePlayer
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。
概述
moviePlayer 封装了视频播放功能（不支持音频播放）。可快进、快退设置播放位置等操作，亦可通过手势设置屏幕亮度和系统声音大小。通过监听接口可获取插件上的各种手势操作事件。使用本插件时可把本插件当做一个 frame 添加在 window 或 frame 上。Android 平台上支持的的视频文件格式有：MP4、3gp；iOS 平台上支持的视频文件格式有：MOV，MP4，M4V。本插件通过 open 接口，打开一个自带界面的视频播放器。
open
打开一个自带界面的视频播放器，本播放器为全屏横屏显示，支持屏幕随设备自动旋转。用户单击播放器时，会弹出 foot 和 head 导航条，再次单击则关闭之。
注意:视频在竖屏时不显示标题，在横屏时显示
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
}
texts：
- 类型：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 (当statusBarAppearance 设置为false 时,head里面的y参数设置只对竖屏有效, 当statusBarAppearance= true时,head里面的y参数设置对横竖屏有效)
title:{
size:20, //（可选项）数字类型；顶部标题字体大小；默认：20
color:'#fff', //（可选项）字符串类型；顶部标题字体颜色；默认：#fff
width:40, //(可选项)标题的宽度，文本超过该宽度，显示...
leftMargin:10 //（可选项）距离左边控件的外边距，默认：10
},
backSize: 44, //（可选项）数字类型；顶部返回按钮大小；默认：44
backImg:'fs://img/back.png', //（可选项）字符串类型；顶部返回按钮的背景图片，要求本地路径（widget://、fs://）；默认：返回小箭头图标
customButtons:[
{
w:30, //（可选项）数字类型；顶部右边设置按钮大小；默认：30(仅支持iOS)
h:30, //（可选项）数字类型；顶部右边设置按钮大小；默认：30(仅支持iOS)
rightMargin:10, // (可选项）数字类型；右边距；默认：10
img:'fs://img/img1.png', //（可选项）字符串类型；顶部右边设置自定义按钮(未选中状态)，要求本地路径（widget://、fs://）；
imgSelected:'fs://img/img2.png', //（可选项）字符串类型；顶部右边设置自定义按钮(选中状态)，要求本地路径（widget://、fs://）；
},{
w:30, //（可选项）数字类型；顶部右边设置按钮大小；默认：30 (仅支持iOS)
h:30, //（可选项）数字类型；顶部右边设置按钮大小；默认：30 (仅支持iOS)
rightMargin:10, // (可选项）数字类型；右边距；默认：10
img:'fs://img/img3.png', //（可选项）字符串类型；顶部右边设置自定义按钮(未选中状态)，要求本地路径（widget://、fs://）；
imgSelected:'fs://img/img4.png', //（可选项）字符串类型；顶部右边设置自定义按钮(选中状态)，要求本地路径（widget://、fs://）；
}]
},
foot:{ //（可选项）JSON对象；播放器底部导航条样式
bg: 'rgba(161,161,161,0.5)', //（可选项）字符串类型；底部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
height: 44, //（可选项）数字类型；底部导航条的高；默认：44
palyBtn:{
size : 44, //（可选项）数字类型；底部播放/暂停按钮大小；默认：44
playImg:'fs://img/play.png', //（可选项）字符串类型；底部播放按钮的背景图片，要求本地路径（widget://、fs://）；默认：播放按钮图标
pauseImg:'fs://img/pause.png',//（可选项）字符串类型；底部暂停按钮的背景图片，要求本地路径（widget://、fs://）；默认：暂停按钮图标
marginLeft:5 // (可选项)
数字类型；左边距，默认：5
},
currentTimeLabel:{
textSize:14, //（可选项）数字类型；底部时间标签大小；默认：14
textColor:"#FFF", //（可选项）字符串类型；底部时间标签颜色，支持#、rgba、rgb；默认：#FFF
textWidth: 30, //（可选项） 数字类型；时间标签的宽度
marginLeft:5 // (可选项) 数字类型；左边距，默认：5
},
seekBar:{
sliderImg:'fs://img/slder.png', //（可选项）字符串类型；底部进度条滑块背景图片，要求本地路径（widget://、fs://）；默认：滑块小图标
sliderW : 20, // 数字类型; slider 的宽度
sliderH : 20, // 数字类型; slider 的高度
progressColor: '#696969', //（可选项）字符串类型；进度条背景色，支持#、rgba、rgb；默认：#696969
progressSelected: '#76EE00', //（可选项）字符串类型；滑动后的进度条背景色，支持#、rgb、rgba；默认：#76EE00
marginLeft:5 // (可选项) 数字类型；左边距，默认：5
marginRight:5 // (可选项)数字类型；右边距，默认：5
},
totalTimeLabel:{
textSize:14, //（可选项）数字类型；底部时间标签大小；默认：14
textColor:"#FFF", //（可选项）字符串类型；底部时间标签颜色，支持#、rgba、rgb；默认：#FFF
textWidth: 30, //（可选项） 数字类型；时间标签的宽度
marginRight:5 // (可选项)
数字类型；右边距，默认：5
},
fullscreenBtn:{
size:30 //（可选项）数字类型；底部全屏/非全屏按钮大小；默认：44
verticalImg:'fs://img/vertical.png', //（可选项）字符串类型；底部横竖屏切换按钮的背景图片，竖屏状态下的切换按钮，要求本地路径（widget://、fs://）；默认：竖屏按钮图标
horizontalImg:'fs://img/horizontal.png', //（可选项）字符串类型；底部横竖屏切换按钮的背景图片，横屏状态下的切换按钮，要求本地路径（widget://、fs://）；默认：横屏按钮图标
}
}
}
path：
- 类型：字符串
- 描述：（可选项）文档的路径，支持网络和本地（fs://）路径，在 android 平台上不支持 widget
showBack：
- 类型：布尔
- 描述：（可选项）竖屏时是否显示返回按钮 同时支持竖屏是否显示顶部导航条
- 默认值：true（显示）
isShowControlView：
- 类型：布尔
- 描述：（可选项）是否显示工具条
- 默认值：true（显示）
autoPlay：
- 类型：布尔
- 描述：（可选项）打开时是否自动播放
- 默认值：true（自动播放）
coverImg：
- 类型：布尔
- 描述：（可选项）封面图路径，播放器打开尚未播放时的封面图，要求本地路径（widget://、fs://）
scalingMode：
- 类型：字符串
- 描述：（可选项）视频播放时的拉伸方式 仅支持iOS
- 默认：aspect
- 取值范围：
- aspect 按原视频比例显示，是竖屏的就显示出竖屏的，两边留黑；
- aspectFill 原比例拉伸视频，填充层边界
- resize 不按照比例拉伸，填充层边界
autorotation:
- 类型：布尔
- 描述：（可选项）视频播放页面是否支持自动旋转（横竖屏），若为 false 则手动点击右下角按钮旋转
- 默认值：true（根据设备当前方向自动适配旋转）
useGestureControl:
- 类型：布尔
- 描述：（可选项）视频播放页面是否使用手势控制 (亮度，声音，快进快退) 注意:iOS如果此参数为false,则不能拖动进度条， 因为快进快退手势控制了进度条，在frame group中该参数为false，避免滑动事件冲突
- 默认值：true
seekBarDragable:
- 类型：布尔
- 描述：（可选项） 播放进度条是否可以拖动
- 默认：true
videoDirection：
- 类型：字符串
- 描述：（可选项）视频方向 ，前端开发者若要使用竖屏视频竖屏全屏播放，可传入portrait实现需求，类似抖音
- 默认：landscape
- 取值范围：
- portrait 竖屏视频；
- landscape 横屏视频
isShowStatusBar：
- 类型：布尔
- 描述：（可选项）footer和header在视频打开时是否显示
- 默认：true
tabLayoutUse：
- 类型：布尔
- 描述：（可选项）是否是在tabLayout中使用，如在tabLayout中使用全屏后不可在播放控件上添加任何其他控件，不推荐在tabLayout中使用（仅android支持）
- 默认：true
landscapeFullscreen：
- 类型：布尔类型
- 描述：（可选项）横屏模式下是否设置全屏，如设true全屏恢复竖屏后会取消全屏，会影响到应用全屏模式以及沉浸式模式。（仅android支持）
- 默认：true
fixedOn：
- 类型：字符串类型
- 描述：（可选项）插件视图添加到指定 frame 的名字（只指 frame，传 window 无效）
- 默认：插件依附于当前 window
fixed：
- 类型：布尔
- 描述：（可选项）插件是否随所属 window 或 frame 滚动
- 默认值：true（不随之滚动）
callback(ret, err)
ret：
- 类型：JSON 对象
- 内部字段：
{
status: // 布尔类型；是否打开播放组件并显示，true|false；Will be deprecated in ther future
}
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.open({
rect:{
x: 0,
y: 0,
w:api.frameWidth,
h:300
},
styles:{
head:{
bg: 'rgba(161,161,161,0.5)',
height: 44,
y:20,
title:{
size:20,
color:'#fff',
width:40,
leftMargin:10
},
backSize: 30,
backImg:'widget://image/back.png',
customButtons:[{
w:30,
h:30,
rightMagin:10,
img:'widget://image/image/collect.png',
imgSelected:'fs://image/collectSelected.png',
}]},
foot:{
bg: 'rgba(0,0,0,0.5)',
height: 44,
palyBtn:{
size: 20,
playImg:'widget://image/play.png',
pauseImg:'widget://image/pause.png',
marginLeft:5
},
currentTimeLabel:{
textSize:14,
textColor:"#FFF",
textWidth: 43,
marginLeft:5
},
seekBar:{
sliderImg:'widget://image/circle.png',
sliderW : 20,
sliderH : 20,
progressColor: '#696969',
progressSelected: '#76EE00',
marginLeft:10,
marginRight:10
},
totalTimeLabel:{
textSize:14,
textColor:"#FFF",
textWidth: 43,
marginRight:5
},
fullscreenBtn:{
size:20,
verticalImg:'widget://image/vertical.png',
horizontalImg:'widget://image/horizontal.png',
}
} },
path:'http://baobab.wdjcdn.com/1455782903700jy.mp4',
autoPlay: true
},function(ret, err){
if(ret){
// api.alert({msg: JSON.stringify(ret)});
// } else {
// api.alert({msg: JSON.stringify(err)});
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
show
显示视频播放视图
show()
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.show();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
hide
隐藏视频播放视图
hide()
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.hide();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
close
关闭播放器
close()
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.close();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
pause
暂停播放器
pause()
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.pause();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
play
播放
play()
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.play();
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
replay
重新播放指定播放地址
replay()
params
title：
- 类型：字符串
- 描述：（可选项）字符串类型；顶部标题文字
path：
- 类型：字符串
- 描述：（可选项）文档的路径，支持网络和本地（fs://）路径，在 android 平台上不支持 widget
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.replay({
title:'篮球',
path : 'http://xxx/xx.mp4'
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
isFullscreen
判断当前是否为全屏
isFullscreen()
callback(ret)
{
status: true // boolean类型，true表示全屏状态 否则为非全屏状态
}
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.isFullscreen(function(ret){
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
isPlaying
判断当前播放状态
isPlaying(ret)
callback(ret)
{
state: true // boolean类型，true表示正在播放，否则为暂停状态
}
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.isPlaying(function(ret){
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
addEventListener
播放器监听事件
addEventListener(ret)
callback
ret:
{
eventType: 'play', // 字符串类型；点击播放按钮、双击播放；取值范围：
// pause 点击暂停播放按钮、双击暂停
// complete 播放器播放完成
// prepared 播放器准备完毕
// error 播放器异常
// back 返回按钮
// leftFling 在播放器上任意位置快速左滑
// rightFling 在播放器上任意位置快速右滑
// upFling 在播放器上任意位置快速上滑
// downFling 在播放器上任意位置快速下滑
// customBtns 点击自定义按钮（结合index参数使用）
// clickGesture 点击播放器事件(单击手势)
// landscape 切换至横屏事件
// portrait 切换至竖屏事件
index：0 // 数字类型，自定义按钮的 index（仅在eventType == customBtns时有效）
}
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.addEventListener(function(ret){
if(ret && ret.eventType == 'back'){
alert('点击back按钮');
}
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
onBack
该方法需要在点击back按键是调用，back键监听事件需要前端处理
onBack()
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.onBack();
});
可用性
iOS系统，Android系统
可提供的1.0.0及更高版本
setShowOrHideControlView
footer和header是否显示
setShowOrHideControlView()
params
isShow:
- 类型：布尔类型
- 描述：（可选项)是否显示
- 默认：true
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.setShowOrHideControlView({
isShow:true
});
可用性
iOS，Android系统
可提供的1.0.0及更高版本
onPause
该方法用于app退入后台后调用（通过监听pause事件，仅支持Android）
onPause()
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.onPause();
可用性
Android系统
可提供的1.0.0及更高版本
onResume
该方法用于从后台恢复时调用（通过监听resume事件，仅支持Android）
onResume()
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.onResume();
可用性
Android系统
可提供的1.0.0及更高版本
getCurrentPosition
获取当前播放位置该方法需要在视频准备结束后调用
getCurrentPosition()
callback(ret, err)
ret：
- 类型：JSON 对象
- 内部字段：
{
position:1000 //当前播放位置
}
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.getCurrentPosition(function(ret){
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS，Android系统
可提供的1.0.0及更高版本
getDuration
获取播放总时长（仅支持Android）该方法需要在视频准备结束后调用
getDuration()
callback(ret, err)
ret：
- 类型：JSON 对象
- 内部字段：
{
duration:1000 //当前总时长
}
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.getDuration(function(ret){
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS，Android系统
可提供的1.0.0及更高版本
seekTo
跳转到指定播放位置
seekTo()
params
position:
- 类型：数字类型
- 描述：需要跳转的指定位置
- 单位：ms（毫秒）1秒=1000毫秒
isPlay:
- 类型：布尔类型
- 描述：跳转后继续播放还是暂停；默认：true 播放
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.seekTo({
position:10000,
isPlay:false
});
可用性
iOS，Android系统
可提供的1.0.0及更高版本
videoCapture
视频截图
videoCapture(params)
params
time:
- 类型：数字类型
- 描述：指定位置(单位为秒)
isAblum:
- 类型：布尔类型
- 描述：（可选项）是否保存相册
- 默认：false
name:
- 类型：布尔类型
- 描述：（必选项）图片名
callback(ret)
ret：
- 类型：JSON 对象
- 内部字段：
{
status: true, // 布尔类型； 是否转换成功，true|false
path: '' // 字符串类型；转换的图片在本地保存的路径（绝对路径）
}
示例代码
var moviePlayer = api.require('moviePlayer');
moviePlayer.videoCapture({
time:10,
isAblum:false,
name:'moive'
}, function(ret){
api.alert({msg: JSON.stringify(ret)});
});
可用性
iOS，Android系统
可提供的1.0.0及更高版本
setCustomButtons
设置CustomButton的隐藏与显示
setCustomButtons(params)
params
isShow:
- 类型：布尔类型
- 描述：是否显示
- 默认：true
array:
- 类型：数组类型
- 描述：需要显示或隐藏的按钮编号的数组
[
0,1
]
示例代码
var name = api.require('moviePlayer');
name.setCustomButtons({
isShow:false,
array:[0,1]
}, function(ret) {
if (ret) {
api.alert({msg: JSON.stringify(ret)});
}
});
可用性
iOS
可提供的1.0.0及更高版本
setSeekBarDragable
设置进度条是否能拖动
setSeekBarDragable(params)
params
seekBarDragable:
- 类型：布尔类型
- 描述：进度条能否拖动
- 默认：true
示例代码
var name = api.require('moviePlayer');
name.setSeekBarDragable({
seekBarDragable:false
}, function(ret) {
if (ret) {
api.alert({msg: JSON.stringify(ret)});
}
});
可用性
iOS、Android系统
可提供的1.0.0及更高版本
论坛示例
为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。