ijkplayer

open replay pause show addEventListener fullScreen forward seekTo getBrightness getVolume getCurrentPosition setSpeed screenCapture

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

ijkplayer 封装了ijkplayer SDK（支持音频播放）。本模块带有UI方案，打开后为一个具有完整功能的播放器界面，本播放器全屏时为横屏显示，支持屏幕随设备自动旋转。具有双击播放、暂停，手势滑动改变播放进度、屏幕亮度和音量的功能，本模块支持大部分主流视频格式，支持RTMP、RTSP、HTTP流媒体协议。

ijkplayer简介

jkplayer 是 bilibili 开源的一款优秀的播放器, 基于 FFmpeg, 支持 iOS/Android, 点播/直播, 以及多种编码.

android编译说明

android需要升级环境编译

open

打开播放器界面

open({params})

rect:

  • 类型：JSON对象
  • 描述：(可选项）播放器的位置及长宽

texts：

  • 类型：JSON 对象
  • 描述：（可选项）顶部标题文字
  • 内部字段：
  2.     head: {          //（可选项）JSON 对象；顶部文字
  3.         title: ''    //（可选项）字符串类型；顶部标题文字
  4.     }
  5. }

styles：

  • 类型：JSON 对象
  • 描述：（可选项）模块的样式设置
  • 内部字段：
  1. {
  2.     repeat:{
  3.            repeatwidth: 40,                 //（可选项）数字类型；重新播放按钮的宽；默认：40
  4.            repeatheight: 60,                 //（可选项）数字类型；重新播放按钮的高；默认：60
  5.            repeatImg:'',  //（可选项）字符串类型；重新播放按钮的背景图片，要求本地路径（widget://、fs://）；默认：重新播放小图标
  7.         },
  8.     lock:{(android不支持此参数)
  9.            hide:false,                  //（可选项）是否隐藏锁屏按钮，默认：false
  10.            lockSize: 30,                 //（可选项）数字类型；锁定屏幕按钮大小；默认：30
  11.            lockImg:'',  //（可选项）字符串类型；锁定屏幕按钮的背景图片，要求本地路径（widget://、fs://）；默认：圆圈锁小图标
  12.            unlockImg:'',  //（可选项）字符串类型；解锁屏幕按钮的背景图片，要求本地路径（widget://、fs://）；默认：圆圈锁小图标
  14.         },
  15.     head:{                           //（可选项）JSON对象；播放器顶部导航条样式    
  16.        bg: 'rgba(161,161,161,0.5)',  //（可选项）字符串类型；顶部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
  17.        height: 44,                   //（可选项）数字类型；顶部导航条的高；默认：44
  18.        titleSize: 20,                //（可选项）数字类型；顶部标题字体大小；默认：20
  19.        titleColor: '#fff',           //（可选项）字符串类型；顶部标题字体颜色；默认：#fff
  20.        backSize: 44,                 //（可选项）数字类型；顶部返回按钮大小；默认：44
  21.        backImg:'fs://img/back.png',  //（可选项）字符串类型；顶部返回按钮的背景图片，要求本地路径（widget://、fs://）；默认：返回小箭头图标
  22.        hide:false, //顶部导航条是否隐藏；默认：false
  24.        customButtons:[     //（可选项）数组类型；顶部导航条自定义按钮数组，最多支持三个自定义按钮，从右到左排列
  25.           {    //（可选项）JSON对象；顶部导航条自定义按钮
  26.               w:44,  //（可选项）数字类型；按钮宽度；默认：44
  27.               h:44,  //（可选项）数字类型；按钮高度；默认：44
  28.               rightMagin:10,
  29.               img:'widget://image/ZFPlayer/ZFPlayer_lock-nor.png',         //（可选项）字符串类型；自定义按钮正常状态下设置图片，要求本地路径（widget://、fs://）；默认：无
  30.               imgSelected:'widget://image/ZFPlayer/ZFPlayer_repeat_video.png', //（可选项）字符串类型；自定义按钮选中状态下设置图片，要求本地路径（widget://、fs://）；默认：无
  31.                                               }]
  32.     },  
  33.     foot:{                           //（可选项）JSON对象；播放器底部导航条样式    
  34.        bg: 'rgba(161,161,161,0.5)',  //（可选项）字符串类型；底部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
  35.        height: 44,                   //（可选项）数字类型；底部导航条的高；默认：44
  36.        playSize: 44,                 //（可选项）数字类型；底部播放/暂停按钮大小；底部全屏按钮大小等于播放/暂停按钮大小；默认：44
  37.        playImg:'fs://img/back.png',  //（可选项）字符串类型；底部播放按钮的背景图片，要求本地路径（widget://、fs://）；默认：播放按钮图标
  38.        pauseImg:'fs://img/back.png', //（可选项）字符串类型；底部暂停按钮的背景图片，要求本地路径（widget://、fs://）；默认：暂停按钮图标
  39.        timeSize: 14,                  //（可选项）数字类型；底部时间标签大小；默认：14
  40.        timeColor:'#fff',              //（可选项）字符串类型；底部时间标签颜色，支持#、rgba、rgb；默认：#fff
  41.        sliderImg:'fs://img/slder@2x.png',//（可选项）字符串类型；底部进度条滑块背景图片，要求本地路径（widget://、fs://）；默认：滑块小图标((在iOS上需要添加二倍图或者三倍图,否则会出现毛边))
  42.        progressColor: '#696969',      //（可选项）字符串类型；进度条背景色，支持#、rgba、rgb；默认：#696969，(android不支持此参数)
  43.        progressSelected: '#76EE00',   //（可选项）字符串类型；滑动后的进度条背景色，支持#、rgb、rgba；默认：#76EE00，(android不支持此参数)
  44.        verticalImg:'',                //（可选项）字符串类型；底部竖屏按钮的背景图片，要求本地路径（widget://、fs://）；默认：竖屏按钮图标              
  45.         horizontalImg:'',             //（可选项）字符串类型；底部横屏按钮的背景图片，要求本地路径（widget://、fs://）；默认：横屏按钮图标
  46.         hide:false, //底部导航条是否隐藏；默认：false
  47.     indicator:{
  48.        isIndicator:false,                //是否显示模块自带（亮度/音量）指示器（左右两侧滑动条）；默认：false；
  49.        indicatorwidth: 5,         //（可选项）数字类型；滑动条的宽度；默认：5
  50.        indicatorheight: 0.7,       //（可选项）数字类型；滑动条相对于屏幕的高度的比例，例如0.7就是屏幕高度*0.7；默认：0.7
  51.        indicatortop: 50,       //（可选项）数字类型；滑动条相距离顶部距离；默认：50
  52.        indicatormargin: 100,      //（可选项）数字类型；滑动条距离左右边距，设置后亮度进度条就是左边距，音量就是右边距；默认：100
  53.        indicatorImg:'',           //（可选项）字符串类型；滑块背景图片，要求本地路径（widget://、fs://）；默认：白色图标
  54.        sliderwidth:20,            //（可选项）数字类型；滑块直径；默认：20
  55.        sliderColor: '#FFFFFF',      //（可选项）字符串类型；滑动条背景色，支持#、rgba、rgb；默认：#FFFFFF，
  57.     }
  58. }

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（不随之滚动）

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.open({
  3.     texts: {
  4.         head: {
  5.             title: '顶部文字'
  6.         }
  7.     },
  8.     styles: {
  9.         repeat:{
  10.            repeatwidth: 40,                 //（可选项）数字类型；重新播放按钮的宽；默认：40
  11.            repeatheight: 60,                 //（可选项）数字类型；重新播放按钮的高；默认：60           
  12.            repeatImg:'',
  13.         },
  14.         lock:{
  15.            lockSize: 30, 
  16.            lockImg:'',                           
  17.         },
  18.         head: {
  19.             bg: 'rgba(0.5,0.5,0.5,0.7)',
  20.             height: 44,
  21.             titleSize: 20,
  22.             titleColor: '#fff',
  23.             backSize: 44,
  24.             backImg: 'fs://img/back.png',
  26.             customButtons:[ 
  27.                                {    
  28.                                    w:44, 
  29.                                  h:44, 
  30.                                  rightMagin:10,
  31.                                  img:'',       
  32.                                  imgSelected:'',                                           
  33.                              }]
  34.         },
  35.         foot: {
  36.             bg: 'rgba(0.5,0.5,0.5,0.7)',
  37.             height: 44,
  38.             playSize: 44,
  39.             playImg: '',
  40.             pauseImg: '',
  41.             timeSize: 14,
  42.             timeColor: '#fff',
  43.             sliderImg: '',
  44.             progressColor: '#696969',
  45.             progressSelected: '#76EE00',
  46.             hide:false,
  47.            verticalImg:'',                        
  48.            horizontalImg:'',            
  49.         }
  50.     },
  51.     path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
  52.     autoPlay: true, 
  53.     movieScaling:'scaleNone',
  54.     coverImg:'widget://image/beautiful.png'
  55. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setPath

设置视频的文件路径

setPath({params})

params

path：

  • 类型：字符串
  • 描述：视频资源地址,支持网络和本地路径（fs://，widget://）(android不支持widget) 支持RTMP、RTSP、HTTP流媒体协议

coverImg：

  • 类型：布尔
  • 描述：（可选项）封面图路径，播放器打开尚未播放时的封面图，要求本地路径（widget://、fs://）

title：

  • 类型：字符串
  • 描述：（可选项）当设置 play 接口打开的视频时，本参数表示设置该视频的标题，本参数仅对 play 接口有效
  • 默认值：原标题

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.setPath({
  3.     path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
  4.     coverImg: ''
  5. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

replay

重新播放

play()

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.replay();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

play

开始播放

play()

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.play();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

pause

暂停播放

pause()

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.pause();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

close()

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示视频播放视图

show()

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏视频播放视图

hide()

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.hide();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addEventListener

添加监听

addEventListener({params},callback(ret))

params

name：

  • 类型：字符串
  • 描述：（可选项）所要监听的动作名称
  • 取值范围：
    • gesture:手势事件监听
    • click:按钮点击事件监听
    • state:播放器状态监听

callback(ret)

ret：

  • 类型：JSON对象
  • 内部字段：
  1. {
  2.        eventType : 'gestureTap'  //字符串类型；事件类型
  4.        // 取值范围：
  5.        // gesture对应的事件类型:
  6.        //'gestureLeftUp' : 播放器靠左的二分之一内的上滑事件
  7.        //'gestureLeftDown' : 播放器靠左的二分之一内的下滑事件
  8.        //'gestureRightUp' : 播放器靠右的二分之一内的上滑事件
  9.        //'gestureRightDown' : 播放器靠右的二分之一内的下滑事件
  10.        //'gestureSwipeLeft' : 播放器上的左滑事件
  11.        //'gestureSwipeRight' : 播放器上的右滑事件
  12.        //'gestureDoubleTap' : 双击播放器事件（双击手势）
  14.        // click对应的事件类型:
  15.        //'clickLock' : 点击锁定屏幕按钮事件
  16.        //'clickUNLock' : 点击解锁屏幕锁定按钮事件
  17.        //'clickFullScreen' : 点击全屏按钮事件
  18.           //'clickCancelFull' : 点击非全屏按钮事件
  19.          //'clickPlay' : 点击播放按钮事件
  20.         //'clickPause' : 点击暂停按钮事件
  21.           //'clickBack' : 点击返回按钮事件
  22.           //'clickLoadError' : 点击加载失败按钮事件
  23.           //'clickOne' : 点击第一个自定义按钮事件（正常状态下点击）
  24.           //'clickOneSelected' : 点击第一个自定义按钮事件（选中状态下点击）
  25.           //'clickTwo' : 点击第二个自定义按钮事件（正常状态下点击）
  26.           //'clickTwoSelected' : 点击第二个自定义按钮事件（选中状态下点击）
  27.           //'clickThree' : 点击第三个自定义按钮事件（正常状态下点击）
  28.           //'clickThreeSelected' : 点击第三个自定义按钮事件（选中状态下点击）
  30.           // state对应的事件类型:
  31.           //'statePlaying' : 播放器播放事件
  32.          //'statePaused' : 播放器暂停事件
  33.          //'stateComplete' : 播放器播放完成事件
  34.          //'stateStop' : 播放器播放停止事件
  35.          //'stateError' : 播放器加载视频失败事件
  36.          //'stateFullScreen' : 播放器全屏事件
  37.          //'stateCancelFull' : 播放器取消全屏事件
  38. }

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

removeEventListener

移除动作监听

removeEventListener({params})

params

name：

  • 类型：字符串
  • 描述：（可选项）所要移除的监听的动作名称
  • 取值范围：
    • gesture:手势事件监听
    • click:按钮点击事件监听
    • state:播放器状态监听
  1. var ijkplayer = api.require('ijkplayer');
  3.     name: 'state'
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

fullScreen

全屏播放（横屏模式）

fullScreen()

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.fullScreen();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

cancelFullScreen

取消全屏播放

cancelFullScreen()

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.cancelFullScreen();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

forward

快进

forward({params})

params

seconds：

  • 类型：数字
  • 描述：快进的秒数

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.forward({
  3.     seconds: 5
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

rewind

快退

rewind({params})

params

seconds：

  • 类型：数字
  • 描述：快退的秒数

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.rewind({
  3.     seconds: 5
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

seekTo

跳转

seekTo({params})

params

seconds：

  • 类型：数字
  • 描述：跳转到音视频播放的秒数

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.seekTo({
  3.     seconds: 20
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setBrightness

设置屏幕亮度

setBrightness({params})

params

brightness：

  • 类型：数字
  • 描述：（可选项）设置的屏幕的亮度，取值范围：0-100，在 iOS 平台上设置的是系统屏幕亮度。Android 平台上设置的本应用内的屏幕亮度
  • 默认值：80

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.setBrightness({
  3.     brightness: 50
  4. });

可用性

可提供的1.0.0及更高版本

getBrightness

获取当前屏幕亮度值

getBrightness(callback(ret))

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     brightness:            //数字类型；当前屏幕亮度值
  3. }

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.getBrightness(function(ret, err) {
  3.     if (ret) {
  4.         alert(JSON.stringify(ret));
  5.     } 
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setVolume

设置音量

setVolume({params})

params

volume：

  • 类型：数字
  • 描述：（可选项）音量大小，取值范围：0-1
  • 默认值：0

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.setVolume({
  3.     volume: 0.6
  4. });

iOS系统，Android系统

可提供的1.0.0及更高版本

getVolume

获取当前播放音量

getVolume(callback(ret))

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     volume:            //数字类型；当前音量值
  3. }

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getDuration

获取视频的时长

getDuration(callback(ret))

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     duration:  1221122          //数字类型；视频的总时长（单位：毫秒）
  3. }

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.getDuration(function(ret) {
  3.     if (ret) {
  4.         alert(JSON.stringify(ret));
  5.     }
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getCurrentPosition

获取已经播放的时长

getCurrentPosition(callback(ret))

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     currentPosition:888          //数字类型；已经播放的时长（单位：毫秒）
  3. }

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.getCurrentPosition(function(ret) {
  3.     if (ret) {
  4.         alert(JSON.stringify(ret));
  5.     }
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

isFullScreen

获取是否全屏播放状态

isFullScreen(callback(ret))

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.      status: true|false   //布尔型；true:全屏 false:窗口
  3. }

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.isFullScreen(function(ret) {
  3.     if (ret) {
  4.         alert(JSON.stringify(ret));
  5.     }
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setSpeed

设置播放速度

setSpeed({params},callback(ret))

params

speed：

  • 类型：数字类型
  • 描述：音量大小，设置视频播放倍速 取值范围：0.5-1.9
  • 默认值：1.0

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.      status: true|false   //布尔型；设置成功/失败
  3. }

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.setSpeed({
  3. speed:0.5
  4. }function(ret) {
  5.     if (ret) {
  6.         alert(JSON.stringify(ret));
  7.     }
  8. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setHeadFoot

设置顶部底部导航条是否隐藏

setHeadFoot({params})

params

head：

  • 类型：布尔
  • 描述：（可选项）设置播放器顶部导航条是否隐藏
  • 默认值：false

foot：

  • 类型：布尔
  • 描述：（可选项）设置播放器底部导航条是否隐藏
  • 默认值：false

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.setHeadFoot({
  3.    head:true
  4. });

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

screenCapture

截屏

screenCapture({params})

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.      status: true|false   //布尔型；获取成功/失败
  3.      bitmapPath:'',         //字符串类型；截屏图片存储路径
  4. }

示例代码

  1. var ijkplayer = api.require('ijkplayer');
  2. ijkplayer.screenCapture({
  3.    head:true

可用性

iOS系统，Android系统

可提供的1.0.2及更高版本

论坛示例