ijkplayer
来自于:开发者立即使用
open setPath replay play pause close show hide addEventListener removeEventListener fullScreen cancelFullScreen forward rewind seekTo setBrightness getBrightness setVolume getVolume getDuration getCurrentPosition isFullScreen setSpeed setHeadFoot screenCapture
论坛示例
为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。
概述
ijkplayer 封装了ijkplayer SDK(支持音频播放)。本模块带有UI方案,打开后为一个具有完整功能的播放器界面,本播放器全屏时为横屏显示,支持屏幕随设备自动旋转。具有双击播放、暂停,手势滑动改变播放进度、屏幕亮度和音量的功能,本模块支持大部分主流视频格式,支持RTMP、RTSP、HTTP流媒体协议。
ijkplayer简介
jkplayer 是 bilibili 开源的一款优秀的播放器, 基于 FFmpeg, 支持 iOS/Android, 点播/直播, 以及多种编码.
android编译说明
android需要升级环境编译
open
打开播放器界面
open({params})
params
rect:
- 类型:JSON对象
- 描述:(可选项)播放器的位置及长宽
{
x: 0, //(可选项)数字类型;播放器 x 坐标(相对于所属的 Window 或 Frame);默认值:0
y: 0, //(可选项)数字类型;播放器 y 坐标(相对于所属的 Window 或 Frame);默认值:0
w: 320, //(可选项)数字类型;播放器(相对于所属的 Window 或 Frame);默认值:屏幕宽度
h: 300, //(可选项)数字类型;播放器(相对于所属的 Window 或 Frame);默认值:300
}
texts:
- 类型:JSON 对象
- 描述:(可选项)顶部标题文字
- 内部字段:
{
head: { //(可选项)JSON 对象;顶部文字
title: '' //(可选项)字符串类型;顶部标题文字
}
}
styles:
- 类型:JSON 对象
- 描述:(可选项)模块的样式设置
- 内部字段:
{
repeat:{
repeatwidth: 40, //(可选项)数字类型;重新播放按钮的宽;默认:40
repeatheight: 60, //(可选项)数字类型;重新播放按钮的高;默认:60
repeatImg:'', //(可选项)字符串类型;重新播放按钮的背景图片,要求本地路径(widget://、fs://);默认:重新播放小图标
},
lock:{(android不支持此参数)
hide:false, //(可选项)是否隐藏锁屏按钮,默认:false
lockSize: 30, //(可选项)数字类型;锁定屏幕按钮大小;默认:30
lockImg:'', //(可选项)字符串类型;锁定屏幕按钮的背景图片,要求本地路径(widget://、fs://);默认:圆圈锁小图标
unlockImg:'', //(可选项)字符串类型;解锁屏幕按钮的背景图片,要求本地路径(widget://、fs://);默认:圆圈锁小图标
},
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
backSize: 44, //(可选项)数字类型;顶部返回按钮大小;默认:44
backImg:'fs://img/back.png', //(可选项)字符串类型;顶部返回按钮的背景图片,要求本地路径(widget://、fs://);默认:返回小箭头图标
hide:false, //顶部导航条是否隐藏;默认:false
customButtons:[ //(可选项)数组类型;顶部导航条自定义按钮数组,最多支持三个自定义按钮,从右到左排列
{ //(可选项)JSON对象;顶部导航条自定义按钮
w:44, //(可选项)数字类型;按钮宽度;默认:44
h:44, //(可选项)数字类型;按钮高度;默认:44
rightMagin:10,
img:'widget://image/ZFPlayer/ZFPlayer_lock-nor.png', //(可选项)字符串类型;自定义按钮正常状态下设置图片,要求本地路径(widget://、fs://);默认:无
imgSelected:'widget://image/ZFPlayer/ZFPlayer_repeat_video.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://);默认:暂停按钮图标
timeSize: 14, //(可选项)数字类型;底部时间标签大小;默认:14
timeColor:'#fff', //(可选项)字符串类型;底部时间标签颜色,支持#、rgba、rgb;默认:#fff
sliderImg:'fs://img/slder@2x.png',//(可选项)字符串类型;底部进度条滑块背景图片,要求本地路径(widget://、fs://);默认:滑块小图标((在iOS上需要添加二倍图或者三倍图,否则会出现毛边))
progressColor: '#696969', //(可选项)字符串类型;进度条背景色,支持#、rgba、rgb;默认:#696969,(android不支持此参数)
progressSelected: '#76EE00', //(可选项)字符串类型;滑动后的进度条背景色,支持#、rgb、rgba;默认:#76EE00,(android不支持此参数)
verticalImg:'', //(可选项)字符串类型;底部竖屏按钮的背景图片,要求本地路径(widget://、fs://);默认:竖屏按钮图标
horizontalImg:'', //(可选项)字符串类型;底部横屏按钮的背景图片,要求本地路径(widget://、fs://);默认:横屏按钮图标
hide:false, //底部导航条是否隐藏;默认:false
},
indicator:{
isIndicator:false, //是否显示模块自带(亮度/音量)指示器(左右两侧滑动条);默认:false;
indicatorwidth: 5, //(可选项)数字类型;滑动条的宽度;默认:5
indicatorheight: 0.7, //(可选项)数字类型;滑动条相对于屏幕的高度的比例,例如0.7就是屏幕高度*0.7;默认:0.7
indicatortop: 50, //(可选项)数字类型;滑动条相距离顶部距离;默认:50
indicatormargin: 100, //(可选项)数字类型;滑动条距离左右边距,设置后亮度进度条就是左边距,音量就是右边距;默认:100
indicatorImg:'', //(可选项)字符串类型;滑块背景图片,要求本地路径(widget://、fs://);默认:白色图标
sliderwidth:20, //(可选项)数字类型;滑块直径;默认:20
sliderColor: '#FFFFFF', //(可选项)字符串类型;滑动条背景色,支持#、rgba、rgb;默认:#FFFFFF,
}
}
path:
- 类型:字符串
- 描述:视频资源地址,支持网络和本地路径(fs://,widget://)(android不支持widget) 支持RTMP、RTSP、HTTP流媒体协议
autoPlay:
- 类型:布尔
- 描述:(可选项)打开时是否自动播放
- 默认值:true(自动播放)
isAutorotate:
- 类型:布尔型
- 描述:(可选项)是否支持自动转屏
- 默认值:true
isShowProcessView:
- 类型:布尔型
- 描述:(可选项)是否显示进度条 (显示:true ; 不显示:false)【备注:直播流自动 默认为false】
- 默认值:true
isShowTimeLable:
- 类型:布尔型
- 描述:(可选项)是否显示播放时间 (显示:true ; 不显示:false)备注:直播流自动 默认为false】
- 默认值:true
isLive:
- 类型:布尔型
- 描述:(可选项)是否直播视频源 (直播:true;点播:false)
- 默认值:直播:rtmp://开头|rtsp://开头|.m3u8结尾;其余为非直播
enableFull:
- 类型:布尔
- 描述:(可选项)本次播放视频是否全屏播放,当为true时将直接全屏播放视频,x,y,w,h,fixedOn,fixed值不会生效。
- 默认值:false(窗口播放)
isFullBtn:
- 类型:布尔
- 描述:(可选项)小窗口是否显示进入全屏按钮
- 默认值:true(显示)
isBackBtn:
- 类型:布尔
- 描述:(可选项)小窗口是否显示返回按钮
- 默认值:false(不显示)
isSmallOpenGesture:
- 类型:布尔型
- 描述:(可选项)窗口播放时是否开启手势控制音量,亮度和进度 (开启:true;不开启:false)
- 默认值:false
isOpenGesture:
- 类型:布尔型
- 描述:(可选项)全屏时是否开启手势控制音量,亮度和进度 (开启:true;不开启 - :false)
- 默认值:true
movieScaling:
- 类型:字符串
- 描述:(可选项)缩放模式
- 默认值:’scaleAspectFit’
取值范围:
- scaleNone (scalingModeNone)(android不支持)
- scaleToFill(填充)
- scaleAspectFit(适应)
- scaleModeFill(scalingModeFill)(android不支持)
coverImg:
- 类型:布尔
- 描述:(可选项)封面图路径,播放器打开尚未播放时的封面图,要求本地路径(widget://、fs://)
fixedOn:
- 类型:字符串类型
- 描述:(可选项)模块视图添加到指定 frame 的名字(ios:只指 frame,传 window 无效)(android可以是frame或者Window,但是在全屏的时候,需要挂在Window上或者frame是全屏)
- 默认:模块依附于当前 window
fixed:
- 类型:布尔类型
- 描述:(可选项)模块是否随所属 window 或 frame 滚动
- 默认:true(不随之滚动)
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.open({
texts: {
head: {
title: '顶部文字'
}
},
styles: {
repeat:{
repeatwidth: 40, //(可选项)数字类型;重新播放按钮的宽;默认:40
repeatheight: 60, //(可选项)数字类型;重新播放按钮的高;默认:60
repeatImg:'',
},
lock:{
lockSize: 30,
lockImg:'',
},
head: {
bg: 'rgba(0.5,0.5,0.5,0.7)',
height: 44,
titleSize: 20,
titleColor: '#fff',
backSize: 44,
backImg: 'fs://img/back.png',
hide:false,
customButtons:[
{
w:44,
h:44,
rightMagin:10,
img:'',
imgSelected:'',
}]
},
foot: {
bg: 'rgba(0.5,0.5,0.5,0.7)',
height: 44,
playSize: 44,
playImg: '',
pauseImg: '',
timeSize: 14,
timeColor: '#fff',
sliderImg: '',
progressColor: '#696969',
progressSelected: '#76EE00',
hide:false,
verticalImg:'',
horizontalImg:'',
}
},
path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
autoPlay: true,
movieScaling:'scaleNone',
coverImg:'widget://image/beautiful.png'
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
setPath
设置视频的文件路径
setPath({params})
params
path:
- 类型:字符串
- 描述:视频资源地址,支持网络和本地路径(fs://,widget://)(android不支持widget) 支持RTMP、RTSP、HTTP流媒体协议
coverImg:
- 类型:布尔
- 描述:(可选项)封面图路径,播放器打开尚未播放时的封面图,要求本地路径(widget://、fs://)
title:
- 类型:字符串
- 描述:(可选项)当设置 play 接口打开的视频时,本参数表示设置该视频的标题,本参数仅对 play 接口有效
- 默认值:原标题
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.setPath({
path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
coverImg: ''
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
replay
重新播放
play()
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.replay();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
play
开始播放
play()
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.play();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
pause
暂停播放
pause()
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.pause();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
close
关闭播放器
close()
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.close();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
show
显示视频播放视图
show()
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.show();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
hide
隐藏视频播放视图
hide()
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.hide();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
addEventListener
添加监听
addEventListener({params},callback(ret))
params
name:
- 类型:字符串
- 描述:(可选项)所要监听的动作名称
- 取值范围:
- gesture:手势事件监听
- click:按钮点击事件监听
- state:播放器状态监听
callback(ret)
ret:
- 类型:JSON对象
- 内部字段:
{
eventType : 'gestureTap' //字符串类型;事件类型
// 取值范围:
// gesture对应的事件类型:
//'gestureLeftUp' : 播放器靠左的二分之一内的上滑事件
//'gestureLeftDown' : 播放器靠左的二分之一内的下滑事件
//'gestureRightUp' : 播放器靠右的二分之一内的上滑事件
//'gestureRightDown' : 播放器靠右的二分之一内的下滑事件
//'gestureSwipeLeft' : 播放器上的左滑事件
//'gestureSwipeRight' : 播放器上的右滑事件
//'gestureTap' : 点击播放器事件(单击手势)
//'gestureDoubleTap' : 双击播放器事件(双击手势)
// click对应的事件类型:
//'clickLock' : 点击锁定屏幕按钮事件
//'clickUNLock' : 点击解锁屏幕锁定按钮事件
//'clickFullScreen' : 点击全屏按钮事件
//'clickCancelFull' : 点击非全屏按钮事件
//'clickPlay' : 点击播放按钮事件
//'clickPause' : 点击暂停按钮事件
//'clickBack' : 点击返回按钮事件
//'clickLoadError' : 点击加载失败按钮事件
//'clickOne' : 点击第一个自定义按钮事件(正常状态下点击)
//'clickOneSelected' : 点击第一个自定义按钮事件(选中状态下点击)
//'clickTwo' : 点击第二个自定义按钮事件(正常状态下点击)
//'clickTwoSelected' : 点击第二个自定义按钮事件(选中状态下点击)
//'clickThree' : 点击第三个自定义按钮事件(正常状态下点击)
//'clickThreeSelected' : 点击第三个自定义按钮事件(选中状态下点击)
// state对应的事件类型:
//'statePlaying' : 播放器播放事件
//'statePaused' : 播放器暂停事件
//'stateComplete' : 播放器播放完成事件
//'stateStop' : 播放器播放停止事件
//'stateError' : 播放器加载视频失败事件
//'stateFullScreen' : 播放器全屏事件
//'stateCancelFull' : 播放器取消全屏事件
}
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.addEventListener({
name: 'state'
}, function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
removeEventListener
移除动作监听
removeEventListener({params})
params
name:
- 类型:字符串
- 描述:(可选项)所要移除的监听的动作名称
- 取值范围:
- gesture:手势事件监听
- click:按钮点击事件监听
- state:播放器状态监听
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.removeEventListener({
name: 'state'
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
fullScreen
全屏播放(横屏模式)
fullScreen()
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.fullScreen();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
cancelFullScreen
取消全屏播放
cancelFullScreen()
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.cancelFullScreen();
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
forward
快进
forward({params})
params
seconds:
- 类型:数字
- 描述:快进的秒数
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.forward({
seconds: 5
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
rewind
快退
rewind({params})
params
seconds:
- 类型:数字
- 描述:快退的秒数
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.rewind({
seconds: 5
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
seekTo
跳转
seekTo({params})
params
seconds:
- 类型:数字
- 描述:跳转到音视频播放的秒数
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.seekTo({
seconds: 20
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
setBrightness
设置屏幕亮度
setBrightness({params})
params
brightness:
- 类型:数字
- 描述:(可选项)设置的屏幕的亮度,取值范围:0-100,在 iOS 平台上设置的是系统屏幕亮度。Android 平台上设置的本应用内的屏幕亮度
- 默认值:80
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.setBrightness({
brightness: 50
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
getBrightness
获取当前屏幕亮度值
getBrightness(callback(ret))
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
brightness: //数字类型;当前屏幕亮度值
}
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.getBrightness(function(ret, err) {
if (ret) {
alert(JSON.stringify(ret));
}
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
setVolume
设置音量
setVolume({params})
params
volume:
- 类型:数字
- 描述:(可选项)音量大小,取值范围:0-1
- 默认值:0
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.setVolume({
volume: 0.6
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
getVolume
获取当前播放音量
getVolume(callback(ret))
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
volume: //数字类型;当前音量值
}
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.getVolume(function(ret) {
if (ret) {
alert(JSON.stringify(ret));
}
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
getDuration
获取视频的时长
getDuration(callback(ret))
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
duration: 1221122 //数字类型;视频的总时长(单位:毫秒)
}
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.getDuration(function(ret) {
if (ret) {
alert(JSON.stringify(ret));
}
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
getCurrentPosition
获取已经播放的时长
getCurrentPosition(callback(ret))
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
currentPosition:888 //数字类型;已经播放的时长(单位:毫秒)
}
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.getCurrentPosition(function(ret) {
if (ret) {
alert(JSON.stringify(ret));
}
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
isFullScreen
获取是否全屏播放状态
isFullScreen(callback(ret))
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
status: true|false //布尔型;true:全屏 false:窗口
}
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.isFullScreen(function(ret) {
if (ret) {
alert(JSON.stringify(ret));
}
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
setSpeed
设置播放速度
setSpeed({params},callback(ret))
params
speed:
- 类型:数字类型
- 描述:音量大小,设置视频播放倍速 取值范围:0.5-1.9
- 默认值:1.0
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
status: true|false //布尔型;设置成功/失败
}
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.setSpeed({
speed:0.5
}function(ret) {
if (ret) {
alert(JSON.stringify(ret));
}
});
可用性
iOS系统,Android系统
可提供的1.0.0及更高版本
setHeadFoot
设置顶部底部导航条是否隐藏
setHeadFoot({params})
params
head:
- 类型:布尔
- 描述:(可选项)设置播放器顶部导航条是否隐藏
- 默认值:false
foot:
- 类型:布尔
- 描述:(可选项)设置播放器底部导航条是否隐藏
- 默认值:false
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.setHeadFoot({
head:true
});
可用性
iOS系统,Android系统
可提供的1.0.2及更高版本
screenCapture
截屏
screenCapture({params})
callback(ret)
ret:
- 类型:JSON 对象
- 内部字段:
{
status: true|false //布尔型;获取成功/失败
bitmapPath:'', //字符串类型;截屏图片存储路径
}
示例代码
var ijkplayer = api.require('ijkplayer');
ijkplayer.screenCapture({
head:true
});
可用性
iOS系统,Android系统
可提供的1.0.2及更高版本
论坛示例
为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。