ijkplayer

来自于:开发者立即使用

论坛示例

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

概述

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不支持此参数)
           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
    }
}

path:

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

autoPlay:

  • 类型:布尔
  • 描述:(可选项)打开时是否自动播放
  • 默认值:true(自动播放)

isAutorotate:

  • 类型:布尔型
  • 描述:(可选项)是否支持自动转屏(android不支持)
  • 默认值: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及更高版本

论坛示例

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