ijkplayer

论坛示例

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

概述

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

ijkplayer简介

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

android编译说明

android需要升级环境编译

注意：本插件 iOS 平台上最低适配系统版本为 iOS 11.0

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) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: 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) {
        api.alert({msg: 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) {
        api.alert({msg: 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) {
        api.alert({msg: 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) {
        api.alert({msg: 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) {
        api.alert({msg: 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) {
        api.alert({msg: 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及更高版本

论坛示例

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

是否仍需要帮助？请保持联络！

最后更新于 2024/11/18