neteasePlayer

来自于:AC模块工作室立即使用

open show hide close switchContentUrl isPlaying setHardwareDecoder seekTo currentPlaybackTime addEventListener showAlert

论坛示例

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

概述

neteasePlayer 封装了网易云视频播放器。可快进、快退设置播放位置等操作,亦可通过手势设置系统声音大小。接口可获取模块上的各种手势操作事件。使用本模块相当于open一个window。本模块通过 open 接口,打开一个纯播放器界面

功能特性

  • 支持 HTTP、RTMP、HLS 协议的流媒体播放

  • 支持常见的音视频文件播放(MP4、flv、MP3 等)

  • 支持 MediaCodec 硬件解码;支持硬件解码(iOS 8.0及以上)

  • 支持多种画面预览模式(填充,拉伸,裁剪)

  • 支持 ARM, ARMv7a, ARM64v8a, X86 架构

  • 支持的CPU架构:armv7、arm64、i386、x86_64

  • 支持 Android 4.0及以上系统,支持iOS 7.0及以上系统

  • 支持音频后台播放

  • 可高度定制化播放器UI控件

  • 优化 RTMP 直播首屏秒开

  • 优化 RTMP 直播累积延时

open

打开一个自带界面的视频播放器,本播放器为全屏横屏显示,支持屏幕随设备自动旋转。用户单击播放器时,会弹出 foot 和 head 导航条,再次单击则关闭之。

open({params}, callback(ret, err))

params

title:

  • 类型:字符串
  • 描述:(可选项)视频标题

definition:

  • 类型:数组
  • 描述:(可选项)视频清晰度
  • 默认:
  1. ["高清","标清","流畅"]

styles:

  • 类型:JSON 对象
  • 描述:(可选项)模块的样式设置
  • 内部字段:
  1. {
  2. head:{//(可选项)JSON对象;播放器顶部导航条样式
  3. bg: 'rgba(161,161,161,0.5)', //(可选项)字符串类型;顶部导航条背景,支持#、rgb、rgba、img;默认:rgba(161,161,161,0.5)
  4. height: 44, //(可选项)数字类型;顶部导航条的高;默认:44
  5. title:{
  6. size:13, //(可选项)数字类型;顶部标题字体大小;默认:13
  7. color:'#fff', //(可选项)字符串类型;顶部标题字体颜色;默认:#fff
  8. width:100, //(可选项)标题的宽度,文本超过该宽度,显示...
  9. leftMargin:10 //(可选项)距离左边控件的外边距,默认:10
  10. },
  11. backSize: 44, //(可选项)数字类型;顶部返回按钮大小;默认:44
  12. backImg:'fs://img/back.png', //(可选项)字符串类型;顶部返回按钮的背景图片,要求本地路径(widget://、fs://);默认:返回小箭头图标
  13. definition:{
  14. bg:'#fff' //(可选项)数字类型;清晰度背景颜色;默认:'#00000'
  15. textSize:14, //(可选项)数字类型;清晰度标签大小;默认:14
  16. textColor:"#FFF", //(可选项)字符串类型;清晰度标签颜色,支持#、rgba、rgb;默认:#FFF
  17. textWidth: 30, //(可选项) 数字类型;清晰度的宽度
  18. marginRight:5 // (可选项) 数字类型;右边距,默认:5
  19. },
  20. playCenterBtn:{
  21. size : 44, //(可选项)数字类型;屏幕中间的播放/暂停按钮大小;默认:44
  22. playCenterImg:'fs://img/play.png', //(可选项)字符串类型;底部播放按钮的背景图片,要求本地路径(widget://、fs://);默认:播放按钮图标
  23. pauseCenterImg:'fs://img/pause.png',//(可选项)字符串类型;底部暂停按钮的背景图片,要求本地路径(widget://、fs://);默认:暂停按钮图标
  24. },
  25. foot:{ //(可选项)JSON对象;播放器底部导航条样式
  26. bg: 'rgba(161,161,161,0.5)', //(可选项)字符串类型;底部导航条背景,支持#、rgb、rgba、img;默认:rgba(161,161,161,0.5)
  27. height: 44, //(可选项)数字类型;底部导航条的高;默认:44
  28. playBtn:{
  29. size : 44, //(可选项)数字类型;底部播放/暂停按钮大小;默认:44
  30. playImg:'fs://img/play.png', //(可选项)字符串类型;底部播放按钮的背景图片,要求本地路径(widget://、fs://);默认:播放按钮图标
  31. pauseImg:'fs://img/pause.png',//(可选项)字符串类型;底部暂停按钮的背景图片,要求本地路径(widget://、fs://);默认:暂停按钮图标
  32. marginLeft:5 //(可选项)数字类型;左边距,默认:5
  33. },
  34. currentTimeLabel:{
  35. textSize:14, //(可选项)数字类型;底部时间标签大小;默认:14
  36. textColor:"#FFF", //(可选项)字符串类型;底部时间标签颜色,支持#、rgba、rgb;默认:#FFF
  37. textWidth: 30, //(可选项)数字类型;时间标签的宽度
  38. marginLeft:5 //(可选项)数字类型;左边距,默认:5
  39. },
  40. seekBar:{
  41. sliderImg:'fs://img/slder.png', //(可选项)字符串类型;底部进度条滑块背景图片,要求本地路径(widget://、fs://);默认:滑块小图标
  42. sliderW : 20, // 数字类型; slider 的宽度
  43. sliderH : 20, // 数字类型; slider 的高度
  44. progressColor: '#696969', //(可选项)字符串类型;进度条背景色,支持#、rgba、rgb;默认:#696969
  45. progressSelected: '#76EE00', //(可选项)字符串类型;滑动后的进度条背景色,支持#、rgb、rgba;默认:#76EE00
  46. marginLeft:5 // (可选项)数字类型;左边距,默认:5
  47. marginRight:5 // (可选项)数字类型;右边距,默认:5
  48. },
  49. totalTimeLabel:{
  50. textSize:10, //(可选项)数字类型;底部时间标签大小;默认:10
  51. textColor:"#FFF", //(可选项)字符串类型;底部时间标签颜色,支持#、rgba、rgb;默认:#FFF
  52. textWidth: 30, //(可选项)数字类型;时间标签的宽度
  53. marginRight:5 //(可选项)数字类型;右边距,默认:5
  54. },
  55. voiceBtn:{
  56. visibletrue, //(可选项)布尔类型;是否可见,默认:true
  57. size:44, //(可选项)数字类型;底部右边声音按钮大小;默认:44
  58. muteImg:'widget://img/muteImg.png', //(可选项)字符串类型;底部静音按钮的背景图片,要求本地路径(widget://、fs://);默认:静音按钮图标
  59. disMuteImg:'widget://img/disMuteImg.png', //(可选项)字符串类型;底部非静音按钮的背景图片,要求本地路径(widget://、fs://);默认:非静音按钮图标
  60. },
  61. fullscreenBtn:{
  62. size:44, //(可选项)数字类型;底部全屏/非全屏按钮大小;默认:44
  63. verticalImg:'fs://img/vertical.png', //(可选项)字符串类型;底部横竖屏切换按钮的背景图片,竖屏状态下的切换按钮,要求本地路径(widget://、fs://);默认:竖屏按钮图标
  64. horizontalImg:'fs://img/horizontal.png', //(可选项)字符串类型;底部横竖屏切换按钮的背景图片,横屏状态下的切换按钮,要求本地路径(widget://、fs://);默认:横屏按钮图标
  65. }
  66. }
  67. }

shareConfig:

  • 类型: JSON对象
  • 描述:分享UI配置
  1. {
  2. bg:'#000', //(可选项)分享面板的背景;默认:黑色
  3. shareBtn:{ //(可选项)JSON对象;分享按钮设置(不传不显示)
  4. iconPath:"widget://res/shareBtn.jpg", //(可选项)按钮图标,支持widget:// fs://
  5. size:30, //(可选项)按钮大小,默认:30
  6. marginRight:20 //(可选项)右边距,默认:20
  7. },
  8. shareItems:[{ // JSON数组;分享选项设置
  9. iconPath:'widget://res/qq.jpg', // 字符串;分享item的图标
  10. text:'QQ分享' // 字符串;分享item的文本
  11. }]
  12. }

path:

  • 类型:字符串
  • 描述:(可选项)文档的路径,支持网络和本地(fs://)路径,在 android 平台上不支持 widget

autoPlay:

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

autoRotate:

  • 类型:布尔
  • 描述:是否自动旋转
  • 默认值:false

fixedOn:

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

fixed:

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

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType:'share',
  3. shareId:0, // 数字类型;点击分享item的索引
  4. status: // 布尔类型;是否打开播放组件并显示,true|false;Will be deprecated in ther future
  5. }

示例代码

  1. var neteasePlayer = api.require('neteasePlayer');
  2. neteasePlayer.open({
  3. title:'少林寺',
  4. definition:["高清","标清","流畅"],
  5. styles:{
  6. head:{
  7. bg: 'rgba(161,161,161,1)',
  8. height: 44,
  9. title:{
  10. size:20,
  11. color:'#fff',
  12. width:100,
  13. leftMargin:10
  14. },
  15. backSize: 44,
  16. backImg:'widget://image/back.png',
  17. definition:{
  18. bg:'#fff',
  19. textSize:14,
  20. textColor:"#FFF",
  21. textWidth: 30,
  22. marginRight:5
  23. },
  24. },
  25. playCenterBtn:{
  26. size : 44,
  27. playCenterImg:'fs://img/play.png',
  28. pauseCenterImg:'fs://img/pause.png',
  29. },
  30. foot:{
  31. bg: 'rgba(0,0,0,0.5)',
  32. height: 44,
  33. playBtn:{
  34. size: 44,
  35. playImg:'widget://image/play.png',
  36. pauseImg:'widget://image/pause.png',
  37. marginLeft:5
  38. },
  39. currentTimeLabel:{
  40. textSize:10,
  41. textColor:"#FFF",
  42. textWidth: 50,
  43. marginLeft:5
  44. },
  45. seekBar:{
  46. sliderImg:'widget://image/circle.png',
  47. sliderW : 20,
  48. sliderH : 20,
  49. progressColor: '#696969',
  50. progressSelected: '#76EE00',
  51. marginLeft:10,
  52. marginRight:10
  53. },
  54. totalTimeLabel:{
  55. textSize:10,
  56. textColor:"#FFF",
  57. textWidth: 50,
  58. marginRight:5
  59. },
  60. voiceBtn:{
  61. size:44,
  62. muteImg:'widget://img/muteImg.png',
  63. disMuteImg:'widget://img/disMuteImg.png',
  64. },
  65. fullscreenBtn:{
  66. size:44,
  67. verticalImg:'widget://image/vertical.png',
  68. horizontalImg:'widget://image/horizontal.png',
  69. }
  70. } },
  71. path:'http://baobab.wdjcdn.com/1455782903700jy.mp4',
  72. autoPlay: true
  73. },function(ret, err){
  74. if(ret){
  75. alert(JSON.stringify(ret));
  76. } else {
  77. alert(JSON.stringify(err));
  78. }
  79. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭播放器

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

switchContentUrl

播放过程中切换播放地址

switchContentUrl()

params

aUrl:

  • 类型:字符串
  • 描述:(可选项)待切换的播放地址,支持网络和本地(fs://)路径,在 android 平台上不支持 widget

示例代码

  1. var neteasePlayer = api.require('neteasePlayer');
  2. neteasePlayer.switchContentUrl({
  3. aUrl : 'http://xxx/xx.mp4'
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

isPlaying

判断当前播放状态

isPlaying(ret)

callback(ret)

  1. {
  2. state: true // boolean类型,true表示正在播放,否则为暂停状态
  3. }

示例代码

  1. var neteasePlayer = api.require('neteasePlayer');
  2. neteasePlayer.isPlaying(function(ret){
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setHardwareDecoder

设置是否开启硬件解码,仅IOS 8.0以上支持,默认不开启

setHardwareDecoder()

params()

status:

  • 类型:布尔
  • 描述:true是后台暂停 false是继续播放
  • 默认:false

示例代码

  1. var neteasePlayer = api.require('neteasePlayer');
  2. neteasePlayer.setHardwareDecoder({
  3. status:false
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

seekTo

设置当前播放时间点

seekTo({params})

params

seconds:

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

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

currentPlaybackTime

获取当前播放时长

currentPlaybackTime({params})

callBack

  1. {
  2. duration: 10s // 数字类型
  3. }

示例代码

  1. var neteasePlayer = api.require('neteasePlayer');
  2. neteasePlayer.currentPlaybackTime(function(ret){
  3. alert(JSON.stringify(ret));
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

addEventListener

播放器监听事件

addEventListener(ret)

callback

ret:

  1. {
  2. eventType: 'play', // 字符串类型;点击播放按钮;取值范围:
  3. // pause 点击暂停播放按钮
  4. // complete 播放器播放完成
  5. // error 播放器异常
  6. // back 返回按钮
  7. // upFling 在播放器上任意位置快速上滑
  8. // downFling 在播放器上任意位置快速下滑
  9. definition: '' //该字段返回 open -> definition相应的item
  10. }

示例代码

  1. var neteasePlayer = api.require('neteasePlayer');
  2. neteasePlayer.addEventListener(function(ret){
  3. if(ret && ret.eventType == 'back'){
  4. alert('点击back按钮');
  5. }
  6. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

showAlert

弹出提醒信息(暂仅支持Android)

showAlert()

params

title:

  • 类型:字符串
  • 描述:弹框标题

msg:

  • 类型:字符串
  • 描述:弹框信息

okBtnTitle:

  • 类型:字符串
  • 描述:确认按钮标题
  • 默认:确定

示例代码

  1. var neteasePlayer = api.require('neteasePlayer');
  2. neteasePlayer.showAlert({
  3. title:'温馨提示',
  4. msg:'您的手机未安装qq',
  5. okBtnTitle:'确定'
  6. });