请选择 进入手机版 | 继续访问电脑版

UIBPlayer (视频播放)demo分享

[复制链接]
技术支持-F 发表于 2019-5-13 21:26:50
UIBPlayer 封装了百度云播放器 SDK。本模块带有UI方案,打开后为一个具有完整功能的播放器界面。百度云播放器突破 Android、iOS 平台对视频格式的限制,支持目前所有主流的媒体格式(mp4、avi、wmv、flv、mkv、mov、 rmvb 等)。

模块文档地址


模块亮点介绍:
1. 自带UI,用户只需自己设计图标,调整参数。
2.  具有双击播放、暂停,手势滑动改变播放进度、屏幕亮度和音量的功能
3. iOS 支持横竖屏自动切换(设置中打开竖屏锁定)4. 顶部、底部按钮播放时自动隐藏,点击唤起。

1.  使用前先去百度开放平台获取AccessKey,配置到config.xml文件中,否则会出现闪退等异常。参考模块文档说明。
2.  直接调用open接口即可打开播放器。代码如下:

  1. var UIBPlayer = api.require('UIBPlayer');
  2.         UIBPlayer.open({
  3.             rect: {
  4.                 x: 0,
  5.                 y: 0,
  6.                 w: api.winWidth,
  7.                 h: 300
  8.             },
  9.             videoScalingMode:"FIT_WITH_CROPPING",
  10.             path: 'http://wvideo.spriteapp.cn/video/2016/0328/56f8ec01d9bfe_wpd.mp4',
  11.             autoPlay: false,
  12.             enableLooping: true,
  13.             pauseInBackground: true,
  14.             coverImg: 'widget://image/uibplayer/cover.png',
  15.             styles: {
  16.                 head: {
  17.                     bg: 'rgba(161,161,161,0.5)',
  18.                     height: 44,
  19.                     marginTop: api.safeArea.top,
  20.                     hide: false,
  21.                     backBtn: {
  22.                         size: 30,
  23.                         backImg: 'widget://image/uibplayer/back.png',
  24.                         marginLeft: 5
  25.                     },
  26.                     titleLabel: {
  27.                         title: '蝙蝠侠',
  28.                         size: 20,
  29.                         color: '#fff',
  30.                         width: 200,
  31.                         numberLines: 1,
  32.                         leftMargin: 5,
  33.                         backgroundColor: 'rgba(0,0,0,0)'
  34.                     },
  35.                     customButtons: [{
  36.                         w: 30,
  37.                         h: 30,
  38.                         rightMagin: 5,
  39.                         img: 'widget://image/uibplayer/setting.png',
  40.                         imgSelected: 'widget://image/uibplayer/settinged.png',
  41.                     }, {
  42.                         w: 30,
  43.                         h: 30,
  44.                         rightMagin: 5,
  45.                         img: 'widget://image/uibplayer/mess.png',
  46.                         imgSelected: 'widget://image/uibplayer/messed.png',
  47.                     }]
  48.                 },
  49.                 foot: {
  50.                     bg: 'rgba(161,161,161,0.5)',
  51.                     height: 44,
  52.                     marginBottom: 0,
  53.                     hide: false,
  54.                     playBtn: {
  55.                         size: 44,
  56.                         playImg: 'widget://image/uibplayer/play.png',
  57.                         pauseImg: 'widget://image/uibplayer/pause.png',
  58.                         marginLeft: 0
  59.                     },
  60.                     currentTimeLabel: {
  61.                         textSize: 14,
  62.                         textColor: "#FFF",
  63.                         marginLeft: 5
  64.                     },
  65.                     seekBar: {
  66.                         sliderImg: 'widget://image/uibplayer/slide.png',
  67.                         progressColor: '#696969',
  68.                         progressSelectedColor: '#333333',
  69.                         marginLeft: 5,
  70.                         marginRight: 5
  71.                     },
  72.                     totalTimeLabel: {
  73.                         textSize: 14,
  74.                         textColor: "#FFF",
  75.                         marginRight: 5
  76.                     },
  77.                     fullScreenBtn: {
  78.                         size: 30,
  79.                         img: 'widget://image/uibplayer/unfullscreen.png',
  80.                         fullScreenImg: 'widget://image/uibplayer/fullscreen.png',
  81.                         marginRight: 10
  82.                     }
  83.                 }
  84.             },
  85.             fixedOn: api.frameName,
  86.             fixed: false
  87.         });
复制代码
模块截图:


附件为用到的图标素材。
没有放源码包。因为不同用户需要到百度开放平台申请key, 配置到自己项目的config.xml中,提交代码然后编译自定义loader。





本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X

3条回复

飞翔的翔 职业车手 9469Y币
支持一下
以德服人、 实习司机 87Y币
支持下,最近在做更新视频app
Mr.ZhouHeng 官方版主 12774Y币
这样子啊
您需要登录后才可以回帖 登录

本版积分规则