vPlayer

立即使用

openPlayer replay open close play pause setPath show hide full cancelFull isFull forward rewind seekTo setBrightness getBrightness setVolume getVolume setRect addEventListener removeEventListener

论坛示例

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

概述

vPlayer iOS封装了AVPlayer视频播放功能(支持音频播放)。iOS 平台上支持的视频文件格式有:WMV,AVI,MKV,RMVB,RM,XVID,MP4,3GP,MPG等,音频文件格式有:MP3,WMA,RM,ACC,OGG,APE,FLAC,FLV等。本模块封装了两套播放方案:一,通过调用 openPlayer 接口,直接打开一个自带默认播放界面的播放器;二,通过 open 接口,打开一个纯播放器界面,再配合 frame 自定义完整的播放页面,通过play、pause等接口控制播放操作。

openPlayer

打开一个自带界面的视频播放器,本播放器为全屏横屏显示,支持屏幕随设备自动旋转。 openPlayer({params}, callback(ret))

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
  3. y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
  4. w: 320, //(可选项)数字类型;模块的宽度;默认:所属的 Window 或 Frame 的宽度
  5. h: 300 //(可选项)数字类型;模块的高度;默认:w的3/4
  6. }

styles:

  • 类型:JSON 对象
  • 描述:(可选项)模块的样式设置
  • 内部字段:
  1. {
  2. head:{ // JSON对象;播放器顶部导航条样式
  3. bg: 'rgba(161,161,161,0.5)', //(可选项)字符串类型;顶部导航条背景颜色,支持#、rgb、rgba;默认:rgba(161,161,161,0.5)
  4. height: 44, //(可选项)数字类型;顶部导航条的高;默认:44
  5. marginTop:0, // (可选项)数字类型;距离模块顶部的距离;默认:0
  6. hide:false, //(可选项)布尔类型;打开播放器时顶部导航条是否隐藏;默认:false
  7. backBtn:{ //(可选项)JSON对象;播放器左上角返回按钮样式
  8. size: 44, //(可选项)数字类型;返回按钮大小;默认:44
  9. backImg:'', //(可选项)字符串类型;返回按钮的背景图片,要求本地路径(widget://、fs://);默认:返回小箭头图标
  10. marginLeft:5 // (可选项)数字类型;左边距,默认:5
  11. },
  12. titleLabel:{ //(可选项)JSON对象;播放器顶部导航条标题
  13. title:'哈哈哈', //(可选项)字符串类型;标题:默认:无
  14. size:20, //(可选项)数字类型;标题字体大小;默认:20
  15. color:'#fff', //(可选项)字符串类型;标题字体颜色;默认:#fff
  16. backgroundColor:'rgba(0,0,0,0)', //(可选项)字符串类型;背景颜色;默认:rgba(0,0,0,0)
  17. width:100, //(可选项)数字类型;标题的最大宽度,若numberLines为1,文本超过该宽度,显示...,否则为文本的实际宽度。若numberLines为0或其它,文本超过该宽度,则换行,否则为文本的实际宽度;默认:100
  18. numberLines:1, //(可选项)数字类型;文本的行数,与width配合使用,为0时则自动根据文本长度计算行数,需要注意的是,当文本长度较长时,如要完整显示文本,需要播放器顶部导航条的高度足够大;默认:1
  19. leftMargin:5 //(可选项)数字类型;距离左边返回按钮的外边距;默认:5
  20. },
  21. customButtons:[ //(可选项)数组类型;顶部导航条自定义按钮数组,最多支持三个自定义按钮,从右到左排列
  22. { //(可选项)JSON对象;顶部导航条自定义按钮
  23. w:44, //(可选项)数字类型;按钮宽度;默认:44
  24. h:44, //(可选项)数字类型;按钮高度;默认:44
  25. rightMagin:5, // (可选项)数字类型;右边距;默认:5
  26. img:'', //(可选项)字符串类型;自定义按钮正常状态下设置图片,要求本地路径(widget://、fs://);默认:无
  27. imgSelected:'', //(可选项)字符串类型;自定义按钮选中状态下设置图片,要求本地路径(widget://、fs://);默认:无
  28. }]
  29. },
  30. foot:{ //(可选项)JSON对象;播放器底部导航条样式
  31. bg: 'rgba(161,161,161,0.5)', //(可选项)字符串类型;底部导航条背景颜色,支持#、rgb、rgba;默认:rgba(161,161,161,0.5)
  32. height: 44, //(可选项)数字类型;底部导航条的高;默认:44
  33. marginBottom:0, //(可选项)数字类型;底部导航条距离底部的距离;默认:0
  34. hide:false, //(可选项)布尔类型;打开播放器时底部导航条是否隐藏;默认:false
  35. playBtn:{ //(可选项)JSON对象;播放/暂停按钮样式
  36. size : 44, //(可选项)数字类型;播放/暂停按钮大小;默认:44
  37. playImg:'', //(可选项)字符串类型;播放按钮设置图片,要求本地路径(widget://、fs://);默认:播放按钮图标
  38. pauseImg:'', //(可选项)字符串类型;暂停按钮设置图片,要求本地路径(widget://、fs://);默认:暂停按钮图标
  39. marginLeft:0 // (可选项)数字类型;左边距;默认:0
  40. },
  41. currentTimeLabel:{ //(可选项)JSON对象;当前时间显示样式
  42. textSize:14, //(可选项)数字类型;时间显示文字大小;默认:14
  43. textColor:"#fff", //(可选项)字符串类型;时间显示文字颜色,支持#、rgba、rgb;默认:#fff
  44. marginLeft:5 // (可选项)数字类型;距离左边播放/暂停按钮左边距,默认:5
  45. },
  46. seekBar:{
  47. sliderColor:'#fff', //(可选项)字符串类型;底部进度条滑块颜色,支持#、rgba、rgb,注意:若设置了sliderImg,则sliderColor无效;默认:#fff;(android不支持)
  48. sliderImg:'', //(可选项)字符串类型;底部进度条滑块设置图片,要求本地路径(widget://、fs://);默认:滑块小图标
  49. progressColor: '#696969', //(可选项)字符串类型;进度条背景色,支持#、rgba、rgb,注意:若设置了progressImg,则progressColor无效;默认:#696969(android不支持)
  50. progressImg:'', //(可选项)字符串类型;进度条设置图片,要求本地路径(widget://、fs://);默认:由progressColor确定(android不支持)
  51. progressSelectedColor: '', //(可选项)字符串类型;滑动后的进度条背景色,支持#、rgba、rgb,注意:若设置了progressSelectedImg,则progressSelectedColor无效;默认:#333333 (android不支持)
  52. progressSelectedImg:'', //(可选项)字符串类型;进度条滑动后的部分设置图片,要求本地路径(widget://、fs://);默认:由progressSelectedColor确定 (android不支持)
  53. marginLeft:5, // (可选项) 数字类型;左边距,默认:5
  54. marginRight:5 // (可选项)数字类型;右边距,默认:5
  55. },
  56. totalTimeLabel:{ //(可选项)JSON对象;当前播放视频时长显示样式
  57. textSize:14, //(可选项)数字类型;时间显示文字大小;默认:14
  58. textColor:"#fff", //(可选项)字符串类型;时间显示文字颜色,支持#、rgba、rgb;默认:#fff
  59. marginRight:5 // (可选项)数字类型;右边距,默认:5
  60. },
  61. fullScreenBtn:{ //(可选项)JSON对象;全屏/非全屏按钮样式
  62. size:30, //(可选项)数字类型;底部全屏/非全屏按钮大小;默认:44
  63. img:'', //(可选项)字符串类型;全屏按钮设置图片,要求本地路径(widget://、fs://);默认:全屏按钮图标
  64. fullScreenImg:'', //(可选项)字符串类型;非全屏按钮设置图片,要求本地路径(widget://、fs://);默认:非全屏按钮图标
  65. marginRight:0 // (可选项)数字类型;右边距,默认:0
  66. }
  67. }
  68. }

path:

  • 类型:字符串
  • 描述:文档的路径,支持网络和本地(fs://)路径

autoPlay:

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

rate:

  • 类型:数值
  • 描述:(可选项)播放速率
  • 默认值:1(正常速度)

coverImg:

  • 类型:字符串
  • 描述:(可选项)封面图路径,播放器打开尚未播放时的封面图,要求本地路径(widget://、fs://)

fixedOn:

  • 类型:字符串
  • 描述:(可选项)模块视图添加到指定 frame 的名字(ios:只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)模块是否随所属 window 或 frame 滚动
  • 默认值:true(不随之滚动)

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType : 'gestureTap' //字符串类型;事件类型
  3. // 取值范围:
  4. //'clickFullScreen' : 点击全屏按钮事件
  5. //'clickCancelFull' : 点击非全屏按钮事件
  6. //'clickPlay' : 点击播放按钮事件
  7. //'clickPause' : 点击暂停按钮事件
  8. //'clickBack' : 点击返回按钮事件
  9. //'clickLoadError' : 点击加载失败按钮事件
  10. //'clickOne' : 点击第一个自定义按钮事件(正常状态下点击)
  11. //'clickOneSelected' : 点击第一个自定义按钮事件(选中状态下点击)
  12. //'clickTwo' : 点击第二个自定义按钮事件(正常状态下点击)
  13. //'clickTwoSelected' : 点击第二个自定义按钮事件(选中状态下点击)
  14. //'clickThree' : 点击第三个自定义按钮事件(正常状态下点击)
  15. //'clickThreeSelected' : 点击第三个自定义按钮事件(选中状态下点击)
  16. //'stateComplete' : 播放器播放完成事件
  17. //'stateError' : 播放器加载视频失败事件
  18. //'stateFullScreen' : 播放器全屏事件
  19. //'stateCancelFull' : 播放器取消全屏事件
  20. }

示例代码

  1. var vPlayer = api.require('vPlayer');
  2. vPlayer.openPlayer({
  3. rect:{
  4. y : 30
  5. },
  6. path : 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4',
  7. autoPlay: true,
  8. coverImg: 'widget://image/ZFPlayer/ZFPlayer_loading_bgView.png',
  9. styles : {
  10. head:{
  11. bg: 'rgba(161,161,161,0.5)',
  12. height: 44,
  13. marginTop:0,
  14. hide:false,
  15. backBtn:{
  16. size: 44,
  17. backImg:'widget://image/ZFPlayer/ZFPlayer_back_full.png',
  18. marginLeft:5
  19. },
  20. titleLabel:{
  21. title:'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
  22. size:20,
  23. color:'#fff',
  24. width:200,
  25. numberLines:1,
  26. leftMargin:5,
  27. backgroundColor:'rgba(0,0,0,0)'
  28. },
  29. customButtons:[
  30. {
  31. w:44,
  32. h:44,
  33. rightMagin:5,
  34. img:'widget://image/ZFPlayer/ZFPlayer_lock-nor.png',
  35. imgSelected:'widget://image/ZFPlayer/ZFPlayer_repeat_video.png',
  36. },
  37. {
  38. w:44,
  39. h:44,
  40. rightMagin:5,
  41. img:'widget://image/ZFPlayer/ZFPlayer_lock-nor.png',
  42. imgSelected:'widget://image/ZFPlayer/ZFPlayer_repeat_video.png',
  43. },
  44. {
  45. w:44,
  46. h:44,
  47. rightMagin:5,
  48. img:'widget://image/ZFPlayer/ZFPlayer_lock-nor.png',
  49. }]
  50. },
  51. foot:{
  52. bg: 'rgba(161,161,161,0.5)',
  53. height: 44,
  54. marginBottom:0,
  55. hide:false,
  56. playBtn:{
  57. size : 44,
  58. playImg:'widget://image/ZFPlayer/ZFPlayer_play.png',
  59. pauseImg:'widget://image/ZFPlayer/ZFPlayer_pause.png',
  60. marginLeft:0
  61. },
  62. currentTimeLabel:{
  63. textSize:14,
  64. textColor:"#FFF",
  65. marginLeft:5
  66. },
  67. seekBar:{
  68. sliderImg:'widget://image/ZFPlayer/ZFPlayer_slider.png',
  69. progressColor: '#696969',
  70. progressSelectedColor: '#333333',
  71. marginLeft:5,
  72. marginRight:5
  73. },
  74. totalTimeLabel:{
  75. textSize:14,
  76. textColor:"#FFF",
  77. marginRight:5
  78. },
  79. fullScreenBtn:{
  80. size:44,
  81. img:'widget://image/ZFPlayer/ZFPlayer_shrinkscreen.png',
  82. fullScreenImg:'widget://image/ZFPlayer/ZFPlayer_fullscreen.png',
  83. marginRight:0
  84. }
  85. }
  86. }
  87. },function(ret) {
  88. if (ret) {
  89. alert(JSON.stringify(ret));
  90. }
  91. });

可用性

iOS系统

可提供的1.0.0及更高版本

replay

重新播放指定播放地址。配合openPlayer接口使用

replay({params})

params

path:

  • 类型:字符串类型
  • 描述:(可选项)视频资源地址,支持网络和本地路径(fs://,widget://)
  • 默认:之前的播放地址

title:

  • 类型:字符串类型
  • 描述:(可选项)顶部标题文字
  • 默认:之前的标题文字

示例代码

  1. var vPlayer = api.require('vPlayer');
  2. vPlayer.replay({
  3. path : 'widget://res/haba.mp4'
  4. });

可用性

iOS系统

可提供的1.0.0及更高版本

open

打开一个视频播放器

open({params})

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)播放器的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
  3. y: 0, //(可选项)数字类型;(可选项)模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
  4. w: 300, //(可选项)数字类型;模块的宽度;默认值:所属的 Window 或 Frame 的宽度
  5. h: 200 //(可选项)数字类型;模块的高度;默认值:w的3/4
  6. }

path:

  • 类型:字符串类型
  • 描述:视频资源地址,支持网络和本地路径(fs://)
  • 默认:无

autoPlay:

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

rate:

  • 类型:数值
  • 描述:(可选项)播放速率
  • 默认值:1(正常速度)

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)模块视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:模块依附于当前 window

fixed:

  • 类型:布尔类型
  • 描述:(可选项)模块是否随所属 window 或 frame 滚动
  • 默认:true(不随之滚动)

示例代码

  1. var vPlayer = api.require('vPlayer');
  2. vPlayer.open({
  3. rect:{
  4. x: 0,
  5. y: 0,
  6. w: 300,
  7. h: 200
  8. },
  9. path : 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4',
  10. });

可用性

iOS系统

可提供的1.0.0及更高版本 关闭播放器。配合open接口使用

play

close()

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

play

播放

play()

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

pause

暂停

pause()

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

setPath

设置音/视频的文件路径

setPath({params})

params

path:

  • 类型:字符串
  • 描述:音/视频的文件路径,支持网络和本地(fs://)路径

示例代码

  1. var vPlayer = api.require('vPlayer');
  2. vPlayer.setPath({
  3. path : 'widget://res/haba.mp4'
  4. });

可用性

iOS系统

可提供的1.0.0及更高版本

show

显示播放器

show()

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

hide

隐藏播放器

hide()

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

full

全屏

full()

示例代码

  1. var vPlayer = api.require('vPlayer');
  2. vPlayer.full();

可用性

iOS系统

可提供的1.0.0及更高版本

cancelFull

取消全屏

cancelFull()

示例代码

  1. var vPlayer = api.require('vPlayer');
  2. vPlayer.cancelFull();

可用性

iOS系统

可提供的1.0.0及更高版本

isFull

当前是否为全屏

isFull(callback(ret))

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. isFull: //布尔类型;是否全屏
  3. }

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

forward

快进

forward({params})

params

seconds:

  • 类型:数字
  • 描述:(可选项)快进的秒数
  • 默认:2秒

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

rewind

快退

rewind({params})

params

seconds:

  • 类型:数字
  • 描述:(可选项)快进的秒数
  • 默认:2秒

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

seekTo

跳转指定时间播放

seekTo({params})

params

seconds:

  • 类型:数字
  • 描述:(可选项)快进的秒数
  • 默认:2秒

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

setBrightness

设置屏幕亮度

setBrightness({params})

params

brightness:

  • 类型:数字
  • 描述:(可选项)设置的屏幕的亮度,取值范围:0-1.0,**在 iOS 平台上设置的是系统屏幕亮度。
  • 默认值:0.5

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

getBrightness

获取当前屏幕亮度值

getBrightness(callback(ret))

callback(ret)

ret:

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

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

setVolume

设置音量

setVolume({params})

params

volume:

  • 类型:数字
  • 描述:(可选项)音量大小,取值范围:0-1.0
  • 默认值:1.0

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

getVolume

获取当前播放音量

getVolume(callback(ret))

callback(ret)

ret:

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

示例代码

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

可用性

iOS系统

可提供的1.0.0及更高版本

setRect

设置视频播放器位置、尺寸

setRect({params})

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(可选项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:open中设置的 x 坐标
  3. y: 0, //(可选项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:open中设置的 y 坐标
  4. w: 320, //(可选项)数字类型;模块的宽度;默认:open中设置的宽度
  5. h: 300 //(可选项)数字类型;模块的高度;默认:open中设置的高度
  6. }

示例代码

  1. var vPlayer = api.require('vPlayer');
  2. vPlayer.setRect({
  3. rect: {
  4. x: 0,
  5. y: 0,
  6. w: 320,
  7. h: 300
  8. }
  9. });

可用性

iOS系统

可提供的1.0.0及更高版本

addEventListener

添加监听

addEventListener({params},callback(ret))

params

name:

  • 类型:字符串
  • 描述:监听的事件的名字
  • 取值范围:
    • ‘gesture’:手势事件监听
    • ‘state’:播放器状态监听

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'gestureTap' //字符串类型;事件类型
  3. // 取值范围:
  4. // gesture对应的事件类型:
  5. //'gestureLeftUp' : 播放器靠左的二分之一内的上滑事件
  6. //'gestureLeftDown' : 播放器靠左的二分之一内的下滑事件
  7. //'gestureRightUp' : 播放器靠右的二分之一内的上滑事件
  8. //'gestureRightDown' : 播放器靠右的二分之一内的下滑事件
  9. //'gestureSwipeLeft' : 播放器上的左滑事件
  10. //'gestureSwipeRight' : 播放器上的右滑事件
  11. //'gestureTap' : 点击播放器事件(单击手势)
  12. //'gestureDoubleTap' : 双击播放器事件(双击手势)
  13. // state对应的事件类型:
  14. //'stateComplete' : 播放器播放完成事件
  15. //'stateError' : 播放器加载视频失败事件
  16. //'stateReady' : 可以播放状态,如果不是自动播放,可在此事件发生时调用play接口
  17. }

示例代码

  1. var vPlayer = api.require('vPlayer');
  2. vPlayer.addEventListener({
  3. name : 'gesture'
  4. },function(ret) {
  5. if (ret) {
  6. alert(JSON.stringify(ret));
  7. }
  8. });

可用性

iOS系统

可提供的1.0.0及更高版本

removeEventListener

移除动作监听

removeEventListener({params})

params

name:

  • 类型:字符串
  • 描述:监听的事件的名字
  • 取值范围:
    • ‘gesture’:手势事件监听
    • ‘state’:播放器状态监听

示例代码

  1. var vPlayer = api.require('vPlayer');
  2. vPlayer.removeEventListener({
  3. name: 'state'
  4. });

可用性

iOS系统

可提供的1.0.0及更高版本